Get 5 new diagram templates every month
The Mermaid syntax for every example above. Copy any block into your own tool, or open it in the FlowViz editor to preview and edit it live.
Last updated: · Mermaid v11
How to draw a yes/no decision flow with Mermaid — the classic starting point. Two branches leave a diamond decision node, the failure path loops back through a debug step, and the happy path runs straight to done. Swap the labels and you have a working decision tree for any process.
flowchart TD
A(Start) --> B{Is it working?}
B -->|Yes| C[Ship it]
B -->|No| D[Debug]
D --> B
C --> E(Done)How to lay out an ETL pipeline as a Mermaid flowchart: sources feed ingestion, transformation, and loading stages. Each stage is a node, so inserting a validation or enrichment step is a one-line change.
flowchart LR
A[(Raw Data)] --> B[Extract]
B --> C{Valid?}
C -->|Yes| D[Transform]
C -->|No| E[Error Log]
D --> F[Load]
F --> G[(Data Warehouse)]
E --> H[Alert]How to draw a service topology as a Mermaid block diagram: client, API gateway, cache, and database on an explicit grid. columns and space entries control placement precisely, which regular flowcharts cannot.
block-beta
columns 3
Client space:1 API["API Gateway"]
space:3
Cache[("Redis")] space:1 DB[("Postgres")]
Client --> API
API --> DB
API --> CacheHow to lay out a CI pipeline as a block diagram, from commit through build, test, and deploy stages. Grid placement keeps stages aligned, and arrows between block ids mark the promotion path.
block-beta
columns 4
Commit Build Test Deploy
Commit --> Build
Build --> Test
Test --> DeployHow to describe a deployed web app with Mermaid’s architecture diagram: an API group containing a server, database, and storage, each with a built-in icon, connected edge to edge. A lightweight cloud diagram without a drawing tool.
architecture-beta
group api(cloud)[API]
service db(database)[Database] in api
service disk1(disk)[Storage] in api
service server(server)[Server] in api
db:L -- R:server
disk1:T -- B:dbHow to model edge delivery in an architecture diagram: an internet-facing gateway in front of an application group. Side-anchored connections (L, R, T, B) keep the topology tidy as it grows.
architecture-beta
group app(cloud)[App]
service gateway(internet)[Gateway]
service web(server)[Web Server] in app
service store(database)[Session Store] in app
gateway:R -- L:web
web:R -- L:storeHow to draw a C4 system-context diagram for a banking system: the customer, the internet banking system, and an external e-mail system, connected with labeled Rel relations. The standard first diagram for architecture documentation.
C4Context
title Internet banking - system context
Person(customer, "Customer", "A customer of the bank")
System(banking, "Internet Banking", "Lets customers view accounts")
System_Ext(mail, "E-mail System", "Sends notifications")
Rel(customer, banking, "Uses")
Rel(banking, mail, "Sends e-mails", "SMTP")How to diagram an OAuth2 token exchange as a Mermaid sequence diagram. The client obtains a token from the auth server, then presents it to the API — solid arrows for requests, dashed arrows for replies. Copy it as the skeleton for documenting any token-based auth flow.
sequenceDiagram
participant U as User
participant C as Client App
participant A as Auth Server
participant API
U->>C: Click "Login"
C->>A: POST /authorize
A-->>C: Redirect + code
C->>A: POST /token (code)
A-->>C: access_token + refresh_token
C->>API: GET /data (Bearer token)
API-->>C: 200 OK + data
C-->>U: Show dashboardHow to trace a full web request through the stack in one sequence diagram: browser to server to database and back. Each hop is a single message line, so adding a cache or CDN is just one more participant. Useful for onboarding docs and performance discussions.
sequenceDiagram
participant B as Browser
participant CDN
participant S as Server
participant DB
B->>CDN: GET /page
CDN-->>B: Cache HIT (static assets)
B->>S: GET /api/data
activate S
S->>DB: SELECT * FROM items
DB-->>S: ResultSet
deactivate S
S-->>B: 200 JSON responseHow to model a user authentication schema as a Mermaid ER diagram. User, profile, and session entities carry typed attributes with PK and FK key markers, and the relationship lines read directly as “a user has many sessions”. A solid template for documenting login and account tables.
erDiagram
USER {
int id PK
string email UK
string password_hash
datetime created_at
bool is_active
}
PROFILE {
int id PK
int user_id FK
string display_name
string avatar_url
text bio
}
SESSION {
string token PK
int user_id FK
datetime expires_at
string ip_address
}
USER ||--|| PROFILE : "has"
USER ||--o{ SESSION : "owns"How to turn a handful of numbers into a Mermaid pie chart. Each line is a quoted label, a colon, and a value — Mermaid computes the percentages itself. Replace the browser-share figures with any distribution you need to present.
pie title Global Browser Market Share
"Chrome" : 65.3
"Safari" : 18.7
"Edge" : 4.2
"Firefox" : 4.1
"Samsung" : 2.5
"Other" : 5.2How to model an online store’s core tables as an ER diagram: customers place orders, orders contain products. Cardinality symbols encode the one-to-many relationships, and typed attributes with PK/FK markers make the schema copy-ready for a design doc.
erDiagram
CUSTOMER ||--o{ ORDER : "places"
ORDER ||--|{ LINE_ITEM : "contains"
PRODUCT ||--o{ LINE_ITEM : "in"
CUSTOMER {
int id PK
string name
string email
}
ORDER {
int id PK
int customer_id FK
date order_date
decimal total
}
LINE_ITEM {
int id PK
int order_id FK
int product_id FK
int quantity
decimal price
}
PRODUCT {
int id PK
string name
decimal price
int stock
}How to express OOP inheritance in a Mermaid class diagram: an abstract base class with concrete subclasses. Attributes and methods sit inside each class block with +/- visibility markers, and <|-- arrows point from child to parent.
classDiagram
class Shape {
<<abstract>>
+String color
+float opacity
+area() float
+perimeter() float
}
class Circle {
+float radius
+area() float
+perimeter() float
}
class Rectangle {
+float width
+float height
+area() float
+perimeter() float
}
class Triangle {
+float a
+float b
+float c
+area() float
}
Shape <|-- Circle
Shape <|-- Rectangle
Shape <|-- TriangleHow to break down a web app project as a Mermaid mindmap. The project sits at the center and indentation alone creates the branches — features, tech stack, and launch tasks. The fastest way to turn a brainstorm into a shareable picture.
mindmap
root((Web App))
Frontend
React
TypeScript
Tailwind CSS
Backend
Node.js
PostgreSQL
Redis cache
DevOps
Docker
CI/CD
Monitoring
Product
Design system
User research
AnalyticsHow to plot a feature backlog on an impact-versus-effort quadrant chart. Each feature is one coordinate pair between 0 and 1, and the four named quadrants — quick wins to money pits — do the prioritization talking for you.
quadrantChart
title Feature Priority Matrix
x-axis Low Effort --> High Effort
y-axis Low Impact --> High Impact
quadrant-1 Quick Wins
quadrant-2 Major Projects
quadrant-3 Fill-ins
quadrant-4 Thankless Tasks
Dark mode: [0.2, 0.9]
Mobile app: [0.8, 0.85]
CSV export: [0.25, 0.6]
API docs: [0.4, 0.55]
Refactor DB: [0.9, 0.4]
Fix typos: [0.15, 0.2]How to present a monthly infrastructure budget as a pie chart, split by service category. Values are raw dollars; Mermaid derives the percentages. A drop-in template for cost reviews and FinOps updates.
pie title Cloud spend by service
"Compute" : 42.5
"Storage" : 18.2
"Databases" : 16.8
"Networking" : 12.5
"Monitoring" : 10.0How to document interface-driven design in a class diagram: a notifier interface with email and SMS channel implementations. Realization arrows show who implements what — a compact pattern for plugin-style architectures.
classDiagram
class Notifier {
<<interface>>
+send(message: string)
}
class EmailNotifier {
+smtpHost: string
+send(message: string)
}
class SmsNotifier {
+provider: string
+send(message: string)
}
class NotificationService {
-notifiers: Notifier[]
+broadcast(message: string)
}
Notifier <|.. EmailNotifier
Notifier <|.. SmsNotifier
NotificationService o-- NotifierHow to organize a product launch as a mindmap, with marketing, engineering, and support workstreams branching from the center and owners hanging off each branch. Indentation is the only syntax you need.
mindmap
root((Product Launch))
Marketing
Landing page
Email campaign
Social posts
Engineering
Feature freeze
Load testing
Rollback plan
Support
Docs update
FAQ
TrainingHow to build a risk assessment matrix from a quadrant chart: likelihood on one axis, severity on the other, each risk plotted as a coordinate. The named quadrants sort risks into monitor, mitigate, and act-now buckets at a glance.
quadrantChart
title Risk assessment
x-axis Low Likelihood --> High Likelihood
y-axis Low Severity --> High Severity
quadrant-1 Mitigate now
quadrant-2 Contingency plan
quadrant-3 Accept
quadrant-4 Monitor
Vendor lock-in: [0.3, 0.7]
Key person risk: [0.6, 0.8]
Scope creep: [0.8, 0.5]
Data breach: [0.25, 0.95]
Budget overrun: [0.55, 0.45]How to render a conversion funnel as a sankey diagram: visitors split into signed-up and bounced, sign-ups into activated and dropped off, activation into paying and free. Each row is source, target, value — the ribbon widths tell the retention story.
sankey-beta
Visitors,Signed up,300
Visitors,Bounced,700
Signed up,Activated,180
Signed up,Dropped off,120
Activated,Paying,60
Activated,Free tier,120How to show how an annual budget divides across departments and programs using a sankey diagram. Reusing a node as the source of later rows chains the flow through stages, so money is visibly conserved from top to bottom.
sankey-beta
Budget,Engineering,500
Budget,Marketing,250
Budget,Operations,150
Engineering,Headcount,350
Engineering,Infrastructure,150
Marketing,Paid ads,150
Marketing,Events,100How to chart six months of revenue with Mermaid’s xychart: bar and line series over the same categories, a labeled y-axis with a fixed range, all from a few lines of text. Ideal for embedding lightweight metrics in docs.
xychart-beta
title "Monthly revenue"
x-axis [Jan, Feb, Mar, Apr, May, Jun]
y-axis "Revenue ($k)" 0 --> 120
bar [42, 55, 61, 74, 88, 105]
line [42, 55, 61, 74, 88, 105]How to track p95 API latency across releases with a Mermaid line chart. Releases form the x-axis, response times the series — a plain-text alternative to a screenshot from your observability tool.
xychart-beta
title "p95 latency by release"
x-axis [v1.0, v1.1, v1.2, v1.3, v1.4, v1.5]
y-axis "Latency (ms)" 0 --> 500
line [420, 380, 310, 340, 260, 190]How to compare team members across five skill axes with a radar chart. Each person is a curve, values follow the axis declaration order, and min/max pin the scale so the shapes are honestly comparable.
radar-beta
title Team skills
axis c["Coding"], d["Design"], o["Ops"]
axis p["Product"], m["Marketing"]
curve alice["Alice"]{80, 60, 70, 55, 40}
curve bob["Bob"]{55, 85, 45, 75, 70}
max 100
min 0How to document the first 96 bits of a TCP header with a packet diagram. Each field is a bit range plus a name, rows wrap at 32 bits automatically, and the output looks like it came straight from an RFC.
packet-beta
0-15: "Source Port"
16-31: "Destination Port"
32-63: "Sequence Number"
64-95: "Acknowledgment Number"How to plan a two-week sprint as a Mermaid Gantt chart, with design, development, and QA grouped into sections. Tasks carry done and active status tags and chain off each other with after, so slipping one task visibly shifts its dependents.
gantt
title Sprint 12
dateFormat YYYY-MM-DD
section Design
Wireframes :done, d1, 2024-03-01, 3d
Review :done, d2, after d1, 1d
section Development
Frontend :active, dev1, after d2, 6d
Backend :dev2, after d2, 5d
Integration :dev3, after dev2, 2d
section QA
Testing :qa1, after dev1, 3d
Bug fixes :qa2, after qa1, 2d
section Release
Deploy :milestone, after qa2, 0dHow to sketch a quarterly product roadmap in Gantt form. Quarters become sections, workstreams become tasks with durations, and milestone entries mark the launches. Deliberately coarse-grained — it reads at a glance in a slide or README.
gantt
title Product Roadmap 2024
dateFormat YYYY-MM-DD
section Q1
Beta launch :done, 2024-01-15, 30d
User research :done, 2024-02-01, 20d
v1.0 release :milestone, 2024-03-01, 0d
section Q2
Mobile app :2024-04-01, 45d
API v2 :2024-04-15, 30d
section Q3
Enterprise tier :2024-07-01, 60d
Integrations :2024-08-01, 45dHow to chart an e-commerce order’s lifecycle as a Mermaid state diagram, from placement through payment, shipping, and delivery. Each transition is labeled with the event that causes it, and terminal states show where the flow can end.
stateDiagram-v2
[*] --> Pending
Pending --> Confirmed : payment_ok
Pending --> Cancelled : payment_failed
Confirmed --> Processing : warehouse_ack
Processing --> Shipped : dispatched
Shipped --> Delivered : delivery_confirmed
Shipped --> ReturnRequested : customer_return
ReturnRequested --> Refunded : return_received
Delivered --> [*]
Refunded --> [*]
Cancelled --> [*]How to write the textbook finite state machine — a traffic light — in Mermaid. Three states cycle on timed transitions, with [*] marking entry. The smallest useful template for modeling any cyclic process.
stateDiagram-v2
[*] --> Red
Red --> Green : timer
Green --> Yellow : timer
Yellow --> Red : timer
note right of Red
Stop — 30s
end note
note right of Green
Go — 25s
end note
note right of Yellow
Caution — 5s
end noteHow to draw a feature-branch workflow with Mermaid’s gitGraph: branch off main, commit work, merge back, then patch with a hotfix. The commit ids read as a story, which makes this ideal for documenting team branching conventions.
gitGraph
commit id: "initial commit"
commit id: "project setup"
branch feature/auth
checkout feature/auth
commit id: "add login form"
commit id: "add JWT handler"
commit id: "tests passing"
checkout main
branch hotfix/typo
commit id: "fix README typo"
checkout main
merge hotfix/typo
merge feature/auth id: "PR #42"
commit id: "bump v1.1.0" tag: "v1.1.0"How to tell a startup’s growth story on a Mermaid timeline: years as sections, milestones as colon-separated events. It stays readable in a README and updates with a single new line per milestone.
timeline
title Company Milestones
section 2021
Jan : Founded
Jun : Seed round \$1.2M
Dec : First 100 customers
section 2022
Mar : Series A \$8M
Sep : 10k users
section 2023
Feb : Product v2 launch
Nov : ProfitableHow to visualize a release process with gitGraph: a release branch cut from develop, stabilized, merged to main, then patched with a production hotfix. Close enough to git-flow to serve as living documentation for release engineering.
gitGraph
commit id: "init"
branch develop
commit id: "feature-a"
commit id: "feature-b"
branch release/1.0
commit id: "rc1"
checkout main
merge release/1.0 tag: "v1.0"
commit id: "hotfix"
checkout develop
merge mainHow to record version and infrastructure milestones on a Mermaid timeline. Years become sections, each entry pairs a period with its event, and repeated colon-events stack under the same period. Good for changelogs and retrospectives.
timeline
title Platform releases
section v1
2023 Q1 : MVP launch
2023 Q3 : Mobile app
section v2
2024 Q1 : API platform
2024 Q3 : SSO and audit logs
section v3
2025 Q2 : AI assistant
2025 Q4 : Multi-regionHow to score an online checkout as a Mermaid user journey. Each step carries a 1–5 experience score and an actor, and Mermaid colors the low points — instantly showing where shoppers feel friction.
journey
title Checkout experience
section Browse
Find product: 5: Shopper
Compare prices: 3: Shopper
section Purchase
Add to cart: 4: Shopper
Enter payment: 2: Shopper
Confirm order: 5: Shopper, SupportHow to map new-user onboarding from invite email to first success moment as a user journey diagram. Scores expose the rough steps, sections group the phases, and the diagram doubles as a UX review agenda.
journey
title First-week onboarding
section Day 1
Open invite: 4: User
Create account: 3: User
Setup wizard: 2: User, Support
section Week 1
Invite teammates: 4: User
First report: 5: UserHow to link security requirements to the system that satisfies them using a requirement diagram. Each requirement block records risk and verification method, and satisfies relations connect the auth service to its obligations — SysML in plain text.
requirementDiagram
requirement login_req {
id: 1
text: Users must authenticate before accessing data.
risk: high
verifymethod: test
}
requirement session_req {
id: 2
text: Sessions expire after 30 minutes idle.
risk: medium
verifymethod: analysis
}
element auth_service {
type: service
}
auth_service - satisfies -> login_req
auth_service - satisfies -> session_reqHow to snapshot sprint status as a Mermaid kanban board. Columns are top-level entries, cards are indented beneath them, and moving a card is a one-line edit — the whole board lives in a text block.
kanban
todo[Todo]
t1[Write API spec]
t2[Design schema]
doing[In progress]
t3[Build endpoints]
t4[Auth middleware]
review[In review]
t5[Rate limiting]
done[Done]
t6[Project setup]