These examples are reused by benchmark and layout-evaluation tooling, then rendered here at build time. They cover feature syntax, larger real-world shapes, and Style + Palette combinations beyond the small editor starters.
Roots feeding the same target sit contiguously and each target aligns under its own group, so the two fan-in trunks stay separate (most visible in the ASCII panel).
graph TD
A1[Ingest A] --> A[Queue A]
A2[Ingest B] --> A
B1[Stream A] --> B[Queue B]
B2[Stream B] --> B
A --> C[Merge]
B --> C
Build-time proof from the shared examples corpus.
Flowchart
Labeled Fan-out
Sibling edges with labels share a trunk and the box-start connector sits flush on the source border even when a label widens a column (most visible in the ASCII panel).
direction LR inside a TD flowchart lays the inner pipeline out horizontally — honored even though Mermaid itself ignores it in many cases (mermaid#2509).
graph LR
A[Rectangle] --> B(Rounded)
B --> C{Diamond}
C --> D([Stadium])
D --> E((Circle))
E --> F[[Subroutine]]
F --> G(((Double Circle)))
G --> H{{Hexagon}}
H --> I[(Database)]
I --> J>Flag]
J --> K[/Trapezoid\]
K --> L[\Inverse Trap/]
graph TD
subgraph Cloud
subgraph us-east [US East Region]
A[Web Server] --> B[App Server]
end
subgraph us-west [US West Region]
C[Web Server] --> D[App Server]
end
end
E[Load Balancer] --> A
E --> C
Build-time proof from the shared examples corpus.
Flowchart
Subgraph Direction Override
Using `direction LR` inside a subgraph while the outer graph flows TD.
graph TD
subgraph ci [CI Pipeline]
A[Push Code] --> B{Tests Pass?}
B -->|Yes| C[Build Image]
B -->|No| D[Fix & Retry]
D -.-> A
end
C --> E([Deploy Staging])
E --> F{QA Approved?}
F -->|Yes| G((Production))
F -->|No| D
Build-time proof from the shared examples corpus.
Flowchart
System Architecture
A microservices architecture with multiple services and data stores.
graph LR
subgraph clients [Client Layer]
A([Web App]) --> B[API Gateway]
C([Mobile App]) --> B
end
subgraph services [Service Layer]
B --> D[Auth Service]
B --> E[User Service]
B --> F[Order Service]
end
subgraph data [Data Layer]
D --> G[(Auth DB)]
E --> H[(User DB)]
F --> I[(Order DB)]
F --> J([Message Queue])
end
Build-time proof from the shared examples corpus.
Flowchart
Decision Tree
A branching decision flowchart with multiple outcomes.
graph TD
A{Is it raining?} -->|Yes| B{Have umbrella?}
A -->|No| C([Go outside])
B -->|Yes| D([Go with umbrella])
B -->|No| E{Is it heavy?}
E -->|Yes| F([Stay inside])
E -->|No| G([Run for it])
Build-time proof from the shared examples corpus.
Flowchart
Git Branching Workflow
A git flow showing feature branches, PRs, and release cycle.
graph LR
A[main] --> B[develop]
B --> C[feature/auth]
B --> D[feature/ui]
C --> E{PR Review}
D --> E
E -->|approved| B
B --> F[release/1.0]
F --> G{Tests?}
G -->|pass| A
G -->|fail| F
Build-time proof from the shared examples corpus.
Architecture
Architecture
Architecture: Edge Platform
Nested groups, service cards, and storage links for a regional edge platform.
architecture-beta
group region(cloud)[EU West]
group edge(server)[Edge Layer] in region
group core(cloud)[Core Services] in region
service ingress(internet)[Global CDN] in edge
service gateway(server)[API Gateway] in edge
service auth(server)[Auth Service] in core
service billing(server)[Billing Service] in core
service ledger(database)[Ledger] in core
ingress:R --> L:gateway
gateway:B --> T:auth
gateway:R --> L:billing
billing:B -[stores invoices]-> T:ledger
auth:B -[reads session]-> T:ledger
Build-time proof from the shared examples corpus.
Architecture
Architecture: Event Spine
Boundary-aware edges, a junction fan-out, and data services separated into zones.
architecture-beta
group app(cloud)[Application Zone]
group data(cloud)[Data Zone]
service api(server)[Public API] in app
service workers(server)[Async Workers] in app
junction bus in app
service cache(disk)[Hot Cache] in data
service stream(database)[Event Store] in data
api:B --> T:bus
bus:B -[fans out]-> T:workers
api:B -[reads profiles]-> T:cache
workers:B -[persists events]-> T:stream
api{group}:B -[private link]-> T:stream{group}
Build-time proof from the shared examples corpus.
Architecture
Architecture: Regional Failover
Two regions with replicated data paths and warm standby ingress.
architecture-beta
group primary(cloud)[Primary Region]
group standby(cloud)[Standby Region]
service edge1(server)[Ingress] in primary
service app1(server)[App Cluster] in primary
service db1(database)[Primary DB] in primary
service edge2(server)[Warm Ingress] in standby
service app2(server)[Warm App] in standby
service db2(database)[Replica DB] in standby
service wan(internet)[Internet]
wan:R --> L:edge1
edge1:B --> T:app1
app1:B --> T:db1
edge2:B --> T:app2
app2:B --> T:db2
db1{group}:B -[streams replica]-> T:db2{group}
Build-time proof from the shared examples corpus.
State
State
Basic State Diagram
A simple `stateDiagram-v2` with start/end pseudostates and transitions.
sequenceDiagram
participant C as Client
participant S as Server
C->>S: Login
alt Valid credentials
S-->>C: 200 OK
else Invalid
S-->>C: 401 Unauthorized
else Account locked
S-->>C: 403 Forbidden
end
Build-time proof from the shared examples corpus.
Sequence
Sequence: Opt Block
Optional block — executes only if condition is met.
sequenceDiagram
participant A as App
participant C as Cache
participant DB as Database
A->>C: Get data
C-->>A: Cache miss
opt Cache miss
A->>DB: Query
DB-->>A: Results
A->>C: Store in cache
end
sequenceDiagram
participant C as Client
participant A as AuthService
participant U as UserService
participant O as OrderService
C->>A: Authenticate
par Fetch user data
A->>U: Get profile
and Fetch orders
A->>O: Get orders
end
A-->>C: Combined response
sequenceDiagram
participant A as App
participant DB as Database
A->>DB: BEGIN
critical Transaction
A->>DB: UPDATE accounts
A->>DB: INSERT log
end
A->>DB: COMMIT
Build-time proof from the shared examples corpus.
Sequence
Sequence: Notes (Right/Left/Over)
Notes positioned to the right, left, or over participants.
sequenceDiagram
participant A as Alice
participant B as Bob
Note left of A: Alice prepares
A->>B: Hello
Note right of B: Bob thinks
B-->>A: Reply
Note over A,B: Conversation complete
Build-time proof from the shared examples corpus.
Sequence
Sequence: OAuth 2.0 Flow
Full OAuth 2.0 authorization code flow with token exchange.
sequenceDiagram
actor U as User
participant App as Client App
participant Auth as Auth Server
participant API as Resource API
U->>App: Click Login
App->>Auth: Authorization request
Auth->>U: Login page
U->>Auth: Credentials
Auth-->>App: Authorization code
App->>Auth: Exchange code for token
Auth-->>App: Access token
App->>API: Request + token
API-->>App: Protected resource
App-->>U: Display data
Build-time proof from the shared examples corpus.
Sequence
Sequence: Database Transaction
Multi-step database transaction with rollback handling.
sequenceDiagram
participant C as Client
participant S as Server
participant DB as Database
C->>S: POST /transfer
S->>DB: BEGIN
S->>DB: Debit account A
alt Success
S->>DB: Credit account B
S->>DB: INSERT audit_log
S->>DB: COMMIT
S-->>C: 200 OK
else Insufficient funds
S->>DB: ROLLBACK
S-->>C: 400 Bad Request
end
Build-time proof from the shared examples corpus.
Sequence
Sequence: Microservice Orchestration
Complex multi-service flow with parallel calls and error handling.
sequenceDiagram
participant G as Gateway
participant A as Auth
participant U as Users
participant O as Orders
participant N as Notify
G->>A: Validate token
A-->>G: Valid
par Fetch data
G->>U: Get user
U-->>G: User data
and
G->>O: Get orders
O-->>G: Order list
end
G->>N: Send notification
N-->>G: Queued
Note over G: Aggregate response
Build-time proof from the shared examples corpus.
Sequence
Sequence: Self-Messages with Notes
Self-referencing messages inside alt blocks with notes — tests that notes clear self-message loops and stack without overlapping.
sequenceDiagram
participant User
participant Main as Main Process
participant Renderer
participant Timer as 3s Fallback Timer
User->>Main: CMD+W
Main->>Main: event.preventDefault()
Main->>Renderer: WINDOW_CLOSE_REQUESTED
Main->>Timer: Start 3s timer
alt Multiple panels
Renderer->>Renderer: closePanel(focusedId)
Note over Renderer: Panel removed
Note over Renderer: No confirmCloseWindow!
Timer-->>Main: 3s elapsed → window.destroy()
else Single panel
Renderer->>Renderer: closePanel(lastId)
Note over Renderer: Stack becomes []
Renderer->>Renderer: Auto-select fires → new panel created!
Note over Renderer: Panel reopens
Timer-->>Main: 3s elapsed → window.destroy()
end
Build-time proof from the shared examples corpus.
Class
Class
Class: Basic Class
A single class with attributes and methods, rendered as a 3-compartment box.
classDiagram
class Teacher {
+String name
}
class Student {
+String name
}
class Course {
+String title
}
Teacher --> Course : teaches
Student --> Course : enrolled in
Build-time proof from the shared examples corpus.
Class
Class: Design Pattern — Observer
The Observer (publish-subscribe) design pattern with interface + concrete implementations.
erDiagram
CUSTOMER {
int id PK
string name
string email UK
}
ORDER {
int id PK
date created
int customer_id FK
}
PRODUCT {
int id PK
string name
float price
}
LINE_ITEM {
int id PK
int order_id FK
int product_id FK
int quantity
}
CUSTOMER ||--o{ ORDER : places
ORDER ||--|{ LINE_ITEM : contains
PRODUCT ||--o{ LINE_ITEM : includes
Build-time proof from the shared examples corpus.
ER
ER: Blog Platform Schema
Blog system with users, posts, comments, and tags.
erDiagram
USER {
int id PK
string username UK
string email UK
date joined
}
POST {
int id PK
string title
text content
int author_id FK
date published
}
COMMENT {
int id PK
text body
int post_id FK
int user_id FK
date created
}
TAG {
int id PK
string name UK
}
USER ||--o{ POST : writes
USER ||--o{ COMMENT : authors
POST ||--o{ COMMENT : has
POST }|--o{ TAG : tagged-with
Build-time proof from the shared examples corpus.
ER
ER: School Management Schema
School system with students, teachers, courses, and enrollments.
erDiagram
STUDENT {
int id PK
string name
date dob
string grade
}
TEACHER {
int id PK
string name
string department
}
COURSE {
int id PK
string title
int teacher_id FK
int credits
}
ENROLLMENT {
int id PK
int student_id FK
int course_id FK
string semester
float grade
}
TEACHER ||--o{ COURSE : teaches
STUDENT ||--o{ ENROLLMENT : enrolled
COURSE ||--o{ ENROLLMENT : has
Build-time proof from the shared examples corpus.
Timeline
Timeline
Timeline: Social Media History
Mirrors Mermaid’s official introductory timeline example, with each period carrying its own color family.
journey
accTitle: My working day journey
accDescr: A compact user journey showing commute and workday tasks
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
section Workday
Do work: 1: Me, Cat
Review PRs: 4: Me, Team
Build-time proof from the shared examples corpus.
Journey
Journey: Mermaid Docs Example
Official Mermaid user journey example, matching the docs structure and scoring pattern.
journey
title My working day
section Go to work
Make tea: 5: Me
Go upstairs: 3: Me
Do work: 1: Me, Cat
section Go home
Go downstairs: 5: Me
Sit down: 3: Me
Build-time proof from the shared examples corpus.
Journey
Journey: Cross-functional Release Readiness
Ten peer actors coordinate a four-stage launch, making the high-cardinality actor palette visible without changing authored status or score semantics.
Eight peer service series share one operational scale, exposing whether line and legend colors remain distinguishable above the legacy six-series boundary.
quadrantChart
title Prioritization matrix
x-axis Low Effort --> High Effort
y-axis Low Value --> High Value
quadrant-1 Do now
quadrant-2 Plan
quadrant-3 Drop
quadrant-4 Delegate
Onboarding revamp: [0.2, 0.9]
Platform migration: [0.8, 0.8]
Legacy cleanup: [0.25, 0.2]
Vendor swap: [0.7, 0.3]
Build-time proof from the shared examples corpus.
Gantt
Gantt
Gantt: A Gantt Diagram
The classic Mermaid docs Gantt: sections, explicit dates, `after` dependencies, and inherited starts.
gantt
title A Gantt Diagram
dateFormat YYYY-MM-DD
section Section
A task :a1, 2014-01-01, 30d
Another task :after a1, 20d
section Another
Task in Another :2014-01-12, 12d
another task :24d
Build-time proof from the shared examples corpus.
Gantt
Gantt: Status & Milestones
Status tags (`done`, `active`, `crit`), a milestone diamond, a `vert` marker that consumes no row, and weekends excluded from working durations.
---
displayMode: compact
---
gantt
title Compact packing
dateFormat YYYY-MM-DD
section Stream
One :a, 2024-01-01, 5d
Two :b, 2024-01-03, 6d
Three :c, 2024-01-08, 4d
Four :d, 2024-01-10, 3d
Build-time proof from the shared examples corpus.
Mindmap
Mindmap
Mindmap: Incident Response Command Map
A 40-node operational map with thirteen first-level branches for testing broad, real-world incident coordination.
mindmap
accTitle: Global launch knowledge map
root((Global launch 🌍))
research["`**Research findings** that include a deliberately long sentence requiring deterministic wrapping without losing words or grapheme clusters`"]
japanese["東京の利用者インタビューと製品フィードバック"]
arabic["ملاحظات المستخدمين وخطة الإطلاق"]
emoji["Families 👨👩👧👦 and flags 🇳🇬 🇯🇵"]
content[Content & localization]
symbols["A < B & C > D"]
combining["naïve café — résumé"]
delivery{{Regional delivery}}
Americas
Europe
Asia Pacific
Build-time proof from the shared examples corpus.
Mindmap
Mindmap: Explicit Tidy Tree
A one-sided compiler dependency hierarchy using explicit tidy-tree layout instead of the central bilateral default.
---
config:
layout: tidy-tree
---
mindmap
accTitle: Explicit one-sided dependency tree
root((Compiler))
Front end
Lexer
Parser
Type checker
Middle end
Intermediate representation
Optimizer
Constant folding
Dead code elimination
Back end
Instruction selection
Register allocation
Machine code
Build-time proof from the shared examples corpus.
GitGraph
GitGraph
GitGraph: Monorepo Delivery Lanes
Twelve delivery lanes with explicit main placement, double-digit branch orders, and a tagged coordination commit.
architecture-beta
group edge(cloud)[Edge Layer]
group core(server)[Core Services]
service web(server)[Web App] in edge
service api(server)[API] in core
service db(database)[Postgres] in core
web:R --> L:api
api:R --> L:db
Build-time proof from the shared examples corpus.
Style + Palette
Style + Palette: Sequence
Sequence participants and messages keep their Mermaid meaning while the render call changes presentation.
sequenceDiagram
participant U as User
participant E as Editor
participant R as Renderer
U->>E: Pick style and palette
E->>R: render(source, options)
R-->>E: SVG
Build-time proof from the shared examples corpus.
Style + Palette
Style + Palette: Class
Class boxes and relationships share the same named look without source-level styling directives.
xychart
title "Styled Adoption"
x-axis [Mon, Tue, Wed, Thu, Fri]
y-axis "Renders" 0 --> 100
bar [25, 42, 58, 74, 88]
line [18, 35, 52, 70, 95]
Build-time proof from the shared examples corpus.
Radar
Radar
Radar: Model comparison (circle)
The default `graticule circle`: circular rings and smooth closed Catmull-Rom curves. Two model profiles compared across six shared axes — the silhouette is the message.