Agentic Mermaid

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

This example moved to the complete corpus page.

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.

Hero

Hero

Agentic Mermaid

Mermaid rendering, made beautiful.

Open in editor
stateDiagram-v2
    direction LR
    [*] --> Input
    Input --> Parse: DSL
    Parse --> Layout: AST
    Layout --> SVG: Vector
    Layout --> ASCII: Text
    SVG --> Theme
    ASCII --> Theme
    Theme --> Output
    Output --> [*]
Agentic Mermaid diagramBuild-time render of the shared Hero corpus example. DSL AST Vector Text Input Parse Layout SVG ASCII Theme Output
Build-time proof from the shared examples corpus.

Flowchart

Flowchart

Simple Flow

Basic linear flow with three nodes connected by solid arrows.

Open in editor
graph TD
  A[Start] --> B[Process] --> C[End]
Simple Flow diagramBuild-time render of the shared Flowchart corpus example. Start Process End
Build-time proof from the shared examples corpus.

Flowchart

Fan-in Grouping

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).

Open in editor
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
Fan-in Grouping diagramBuild-time render of the shared Flowchart corpus example. Ingest A Ingest B Queue A Stream A Stream B Queue B Merge
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).

Open in editor
flowchart LR
  Dispatcher -->|email| E[Email Worker]
  Dispatcher -->|sms| S[SMS Worker]
  Dispatcher -->|push| P[Push Worker]
Labeled Fan-out diagramBuild-time render of the shared Flowchart corpus example. email sms push Dispatcher Email Worker SMS Worker Push Worker
Build-time proof from the shared examples corpus.

Flowchart

Subgraph Direction Override

direction LR inside a TD flowchart lays the inner pipeline out horizontally — honored even though Mermaid itself ignores it in many cases (mermaid#2509).

Open in editor
flowchart TD
  subgraph Pipeline
    direction LR
    Fetch --> Parse --> Transform --> Store
  end
Subgraph Direction Override diagramBuild-time render of the shared Flowchart corpus example. Pipeline Fetch Parse Transform Store
Build-time proof from the shared examples corpus.

Flowchart

Original Node Shapes

Rectangle, rounded, diamond, stadium, and circle.

Open in editor
graph LR
  A[Rectangle] --> B(Rounded)
  B --> C{Diamond}
  C --> D([Stadium])
  D --> E((Circle))
Original Node Shapes diagramBuild-time render of the shared Flowchart corpus example. Rectangle Rounded Diamond Stadium Circle
Build-time proof from the shared examples corpus.

Flowchart

Batch 1 Shapes

Subroutine `[[text]]`, double circle `(((text)))`, and hexagon `{{text}}`.

Open in editor
graph LR
  A[[Subroutine]] --> B(((Double Circle)))
  B --> C{{Hexagon}}
Batch 1 Shapes diagramBuild-time render of the shared Flowchart corpus example. Subroutine Double Circle Hexagon
Build-time proof from the shared examples corpus.

Flowchart

Batch 2 Shapes

Cylinder `[(text)]`, asymmetric `>text]`, trapezoid `[/text\]`, and inverse trapezoid `[\text/]`.

Open in editor
graph LR
  A[(Database)] --> B>Flag Shape]
  B --> C[/Wider Bottom\]
  C --> D[\Wider Top/]
Batch 2 Shapes diagramBuild-time render of the shared Flowchart corpus example. Database Flag Shape Wider Bottom Wider Top
Build-time proof from the shared examples corpus.

Flowchart

All 12 Flowchart Shapes

Every supported flowchart shape in a single diagram.

Open in editor
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/]
All 12 Flowchart Shapes diagramBuild-time render of the shared Flowchart corpus example. Rectangle Rounded Diamond Stadium Circle Subroutine Double Circle Hexagon Database Flag Trapezoid Inverse Trap
Build-time proof from the shared examples corpus.

Flowchart

All Edge Styles

Solid, dotted, and thick arrows with labels.

Open in editor
graph TD
  A[Source] -->|solid| B[Target 1]
  A -.->|dotted| C[Target 2]
  A ==>|thick| D[Target 3]
All Edge Styles diagramBuild-time render of the shared Flowchart corpus example. solid dotted thick Source Target 1 Target 2 Target 3
Build-time proof from the shared examples corpus.

Flowchart

No-Arrow Edges

Lines without arrowheads: solid `---`, dotted `-.-`, thick `===`.

Open in editor
graph TD
  A[Node 1] ---|related| B[Node 2]
  B -.- C[Node 3]
  C === D[Node 4]
No-Arrow Edges diagramBuild-time render of the shared Flowchart corpus example. related Node 1 Node 2 Node 3 Node 4
Build-time proof from the shared examples corpus.

Flowchart

Text-Embedded Labels

Using `-- label -->` syntax instead of `-->|label|` for edge labels.

Open in editor
flowchart TD
  A(Start) --> B{Is it sunny?}
  B -- Yes --> C[Go to the park]
  B -- No --> D[Stay indoors]
  C --> E[Finish]
  D --> E
Text-Embedded Labels diagramBuild-time render of the shared Flowchart corpus example. Yes No Start Is it sunny? Go to the park Stay indoors Finish
Build-time proof from the shared examples corpus.

Flowchart

Bidirectional Arrows

Arrows in both directions: `<-->`, `<-.->`, `<==>`.

Open in editor
graph LR
  A[Client] <-->|sync| B[Server]
  B <-.->|heartbeat| C[Monitor]
  C <==>|data| D[Storage]
Bidirectional Arrows diagramBuild-time render of the shared Flowchart corpus example. sync heartbeat data Client Server Monitor Storage
Build-time proof from the shared examples corpus.

Flowchart

Chained Edges

A long chain of nodes demonstrating edge chaining syntax.

Open in editor
graph LR
  A[Step 1] --> B[Step 2] --> C[Step 3] --> D[Step 4] --> E[Step 5]
Chained Edges diagramBuild-time render of the shared Flowchart corpus example. Step 1 Step 2 Step 3 Step 4 Step 5
Build-time proof from the shared examples corpus.

Flowchart

linkStyle: Color-Coded Edges

Using `linkStyle` to color specific edges by index (0-based).

Open in editor
graph TD
  A[Start] --> B{Decision}
  B -->|Yes| C[Accept]
  B -->|No| D[Reject]
  C --> E[Done]
  D --> E
  linkStyle 0 stroke:#7aa2f7,stroke-width:3px
  linkStyle 1 stroke:#9ece6a,stroke-width:2px
  linkStyle 2 stroke:#f7768e,stroke-width:2px
  linkStyle default stroke:#565f89
linkStyle: Color-Coded Edges diagramBuild-time render of the shared Flowchart corpus example. Yes No Start Decision Accept Reject Done
Build-time proof from the shared examples corpus.

Flowchart

linkStyle: Default + Override

Default edge style with index-specific overrides for critical paths.

Open in editor
graph LR
  A[Request] --> B[Auth]
  B --> C[Process]
  C --> D[Response]
  B --> E[Reject]
  linkStyle default stroke:#6b7280,stroke-width:1px
  linkStyle 0,1,2 stroke:#22c55e,stroke-width:2px
  linkStyle 3 stroke:#ef4444,stroke-width:3px
linkStyle: Default + Override diagramBuild-time render of the shared Flowchart corpus example. Request Auth Process Response Reject
Build-time proof from the shared examples corpus.

Flowchart

Direction: Left-Right (LR)

Horizontal layout flowing left to right.

Open in editor
graph LR
  A[Input] --> B[Transform] --> C[Output]
Direction: Left-Right (LR) diagramBuild-time render of the shared Flowchart corpus example. Input Transform Output
Build-time proof from the shared examples corpus.

Flowchart

Direction: Bottom-Top (BT)

Vertical layout flowing from bottom to top.

Open in editor
graph BT
  A[Foundation] --> B[Layer 2] --> C[Top]
Direction: Bottom-Top (BT) diagramBuild-time render of the shared Flowchart corpus example. Foundation Layer 2 Top
Build-time proof from the shared examples corpus.

Flowchart

Subgraphs

Grouped nodes inside labeled subgraph containers.

Open in editor
graph TD
  subgraph Frontend
    A[React App] --> B[State Manager]
  end
  subgraph Backend
    C[API Server] --> D[Database]
  end
  B --> C
Subgraphs diagramBuild-time render of the shared Flowchart corpus example. Frontend Backend React App State Manager API Server Database
Build-time proof from the shared examples corpus.

Flowchart

Nested Subgraphs

Subgraphs inside subgraphs for hierarchical grouping.

Open in editor
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
Nested Subgraphs diagramBuild-time render of the shared Flowchart corpus example. Cloud US East Region US West Region Load Balancer Web Server App Server Web Server App Server
Build-time proof from the shared examples corpus.

Flowchart

Subgraph Direction Override

Using `direction LR` inside a subgraph while the outer graph flows TD.

Open in editor
graph TD
  subgraph pipeline [Processing Pipeline]
    direction LR
    A[Input] --> B[Parse] --> C[Transform] --> D[Output]
  end
  E[Source] --> A
  D --> F[Sink]
Subgraph Direction Override diagramBuild-time render of the shared Flowchart corpus example. Processing Pipeline Source Input Parse Transform Output Sink
Build-time proof from the shared examples corpus.

Flowchart

::: Class Shorthand

Assigning classes with `:::` syntax directly on node definitions.

Open in editor
graph TD
  A[Normal]:::default --> B[Highlighted]:::highlight --> C[Error]:::error
  classDef default fill:#f4f4f5,stroke:#a1a1aa
  classDef highlight fill:#fbbf24,stroke:#d97706
  classDef error fill:#ef4444,stroke:#dc2626
::: Class Shorthand diagramBuild-time render of the shared Flowchart corpus example. Normal Highlighted Error
Build-time proof from the shared examples corpus.

Flowchart

Inline Style Overrides

Using `style` statements to override node fill and stroke colors.

Open in editor
graph TD
  A[Default] --> B[Custom Colors] --> C[Another Custom]
  style B fill:#3b82f6,stroke:#1d4ed8,color:#ffffff
  style C fill:#10b981,stroke:#059669
Inline Style Overrides diagramBuild-time render of the shared Flowchart corpus example. Default Custom Colors Another Custom
Build-time proof from the shared examples corpus.

Flowchart

CI/CD Pipeline

A realistic CI/CD pipeline with decision points, feedback loops, and deployment stages.

Open in editor
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
CI/CD Pipeline diagramBuild-time render of the shared Flowchart corpus example. CI Pipeline Yes No Yes No Push Code Tests Pass? Build Image Fix & Retry Deploy Staging QA Approved? Production
Build-time proof from the shared examples corpus.

Flowchart

System Architecture

A microservices architecture with multiple services and data stores.

Open in editor
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
System Architecture diagramBuild-time render of the shared Flowchart corpus example. Client Layer Service Layer Data Layer Web App Mobile App API Gateway Auth Service User Service Order Service Auth DB User DB Order DB Message Queue
Build-time proof from the shared examples corpus.

Flowchart

Decision Tree

A branching decision flowchart with multiple outcomes.

Open in editor
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])
Decision Tree diagramBuild-time render of the shared Flowchart corpus example. Yes No Yes No Yes No Is it raining? Have umbrella? Go outside Go with umbrella Is it heavy? Stay inside 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.

Open in editor
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
Git Branching Workflow diagramBuild-time render of the shared Flowchart corpus example. approved pass fail main develop feature/auth feature/ui PR Review release/1.0 Tests?
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.

Open in editor
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
Architecture: Edge Platform diagramBuild-time render of the shared Architecture corpus example. EU West Edge Layer Core Services stores invoices reads session Global CDN API Gateway Auth Service Billing Service 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.

Open in editor
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}
Architecture: Event Spine diagramBuild-time render of the shared Architecture corpus example. Application Zone Data Zone fans out reads profiles persists events private link Public API Async Workers Hot Cache Event Store
Build-time proof from the shared examples corpus.

Architecture

Architecture: Regional Failover

Two regions with replicated data paths and warm standby ingress.

Open in editor
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}
Architecture: Regional Failover diagramBuild-time render of the shared Architecture corpus example. Primary Region Standby Region streams replica Internet Ingress App Cluster Primary DB Warm Ingress Warm App Replica DB
Build-time proof from the shared examples corpus.

State

State

Basic State Diagram

A simple `stateDiagram-v2` with start/end pseudostates and transitions.

Open in editor
stateDiagram-v2
  [*] --> Idle
  Idle --> Active : start
  Active --> Idle : cancel
  Active --> Done : complete
  Done --> [*]
Basic State Diagram diagramBuild-time render of the shared State corpus example. start cancel complete Idle Active Done
Build-time proof from the shared examples corpus.

State

State: Composite States

Nested composite states with inner transitions.

Open in editor
stateDiagram-v2
  [*] --> Idle
  Idle --> Processing : submit
  state Processing {
    parse --> validate
    validate --> execute
  }
  Processing --> Complete : done
  Processing --> Error : fail
  Error --> Idle : retry
  Complete --> [*]
State: Composite States diagramBuild-time render of the shared State corpus example. Processing submit done fail retry Idle parse validate execute Complete Error
Build-time proof from the shared examples corpus.

State

State: Connection Lifecycle

TCP-like connection state machine with multiple states.

Open in editor
stateDiagram-v2
  [*] --> Closed
  Closed --> Connecting : connect
  Connecting --> Connected : success
  Connecting --> Closed : timeout
  Connected --> Disconnecting : close
  Connected --> Reconnecting : error
  Reconnecting --> Connected : success
  Reconnecting --> Closed : max_retries
  Disconnecting --> Closed : done
  Closed --> [*]
State: Connection Lifecycle diagramBuild-time render of the shared State corpus example. connect success timeout close error success max_retries done Closed Connecting Connected Disconnecting Reconnecting
Build-time proof from the shared examples corpus.

State

State: CJK State Names

State diagram using Chinese characters for state names.

Open in editor
stateDiagram-v2
  [*] --> 空闲
  空闲 --> 处理中 : 提交
  处理中 --> 完成 : 成功
  处理中 --> 错误 : 失败
  错误 --> 空闲 : 重试
  完成 --> [*]
State: CJK State Names diagramBuild-time render of the shared State corpus example. 提交 成功 失败 重试 空闲 处理中 完成 错误
Build-time proof from the shared examples corpus.

Sequence

Sequence

Sequence: Basic Messages

Simple request/response between two participants.

Open in editor
sequenceDiagram
  Alice->>Bob: Hello Bob!
  Bob-->>Alice: Hi Alice!
Sequence: Basic Messages diagramBuild-time render of the shared Sequence corpus example. Hello Bob! Hi Alice! Alice Bob
Build-time proof from the shared examples corpus.

Sequence

Sequence: Participant Aliases

Using `participant ... as ...` for compact diagram IDs with readable labels.

Open in editor
sequenceDiagram
  participant A as Alice
  participant B as Bob
  participant C as Charlie
  A->>B: Hello
  B->>C: Forward
  C-->>A: Reply
Sequence: Participant Aliases diagramBuild-time render of the shared Sequence corpus example. Hello Forward Reply Alice Bob Charlie
Build-time proof from the shared examples corpus.

Sequence

Sequence: Actor Stick Figures

Using `actor` instead of `participant` renders stick figures instead of boxes.

Open in editor
sequenceDiagram
  actor U as User
  participant S as System
  participant DB as Database
  U->>S: Click button
  S->>DB: Query
  DB-->>S: Results
  S-->>U: Display
Sequence: Actor Stick Figures diagramBuild-time render of the shared Sequence corpus example. Click button Query Results Display User System Database
Build-time proof from the shared examples corpus.

Sequence

Sequence: Arrow Types

All arrow types: solid `->>` and dashed `-->>` with filled arrowheads, open arrows `-)` .

Open in editor
sequenceDiagram
  A->>B: Solid arrow (sync)
  B-->>A: Dashed arrow (return)
  A-)B: Open arrow (async)
  B--)A: Open dashed arrow
Sequence: Arrow Types diagramBuild-time render of the shared Sequence corpus example. Solid arrow (sync) Dashed arrow (return) Open arrow (async) Open dashed arrow A B
Build-time proof from the shared examples corpus.

Sequence

Sequence: Activation Boxes

Using `+` and `-` to show when participants are active.

Open in editor
sequenceDiagram
  participant C as Client
  participant S as Server
  C->>+S: Request
  S->>+S: Process
  S->>-S: Done
  S-->>-C: Response
Sequence: Activation Boxes diagramBuild-time render of the shared Sequence corpus example. Request Process Done Response Client Server
Build-time proof from the shared examples corpus.

Sequence

Sequence: Self-Messages

A participant sending a message to itself (displayed as a loop arrow).

Open in editor
sequenceDiagram
  participant S as Server
  S->>S: Internal process
  S->>S: Validate
  S-->>S: Log
Sequence: Self-Messages diagramBuild-time render of the shared Sequence corpus example. Internal process Validate Log Server
Build-time proof from the shared examples corpus.

Sequence

Sequence: Loop Block

A `loop` construct wrapping repeated message exchanges.

Open in editor
sequenceDiagram
  participant C as Client
  participant S as Server
  C->>S: Connect
  loop Every 30s
    C->>S: Heartbeat
    S-->>C: Ack
  end
  C->>S: Disconnect
Sequence: Loop Block diagramBuild-time render of the shared Sequence corpus example. Connect Heartbeat Ack Disconnect Client Server
Build-time proof from the shared examples corpus.

Sequence

Sequence: Alt/Else Block

Conditional branching with `alt` (if) and `else` blocks.

Open in editor
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
Sequence: Alt/Else Block diagramBuild-time render of the shared Sequence corpus example. [Invalid] [Account locked] Login 200 OK 401 Unauthorized 403 Forbidden Client Server
Build-time proof from the shared examples corpus.

Sequence

Sequence: Opt Block

Optional block — executes only if condition is met.

Open in editor
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
Sequence: Opt Block diagramBuild-time render of the shared Sequence corpus example. Get data Cache miss Query Results Store in cache App Cache Database
Build-time proof from the shared examples corpus.

Sequence

Sequence: Par Block

Parallel execution with `par`/`and` constructs.

Open in editor
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
Sequence: Par Block diagramBuild-time render of the shared Sequence corpus example. [Fetch orders] Authenticate Get profile Get orders Combined response Client AuthService UserService OrderService
Build-time proof from the shared examples corpus.

Sequence

Sequence: Critical Block

Critical section that must complete atomically.

Open in editor
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
Sequence: Critical Block diagramBuild-time render of the shared Sequence corpus example. BEGIN UPDATE accounts INSERT log COMMIT App Database
Build-time proof from the shared examples corpus.

Sequence

Sequence: Notes (Right/Left/Over)

Notes positioned to the right, left, or over participants.

Open in editor
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
Sequence: Notes (Right/Left/Over) diagramBuild-time render of the shared Sequence corpus example. Hello Reply Alice prepares Bob thinks Conversation complete Alice Bob
Build-time proof from the shared examples corpus.

Sequence

Sequence: OAuth 2.0 Flow

Full OAuth 2.0 authorization code flow with token exchange.

Open in editor
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
Sequence: OAuth 2.0 Flow diagramBuild-time render of the shared Sequence corpus example. Click Login Authorization request Login page Credentials Authorization code Exchange code for token Access token Request + token Protected resource Display data User Client App Auth Server Resource API
Build-time proof from the shared examples corpus.

Sequence

Sequence: Database Transaction

Multi-step database transaction with rollback handling.

Open in editor
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
Sequence: Database Transaction diagramBuild-time render of the shared Sequence corpus example. [Insufficient funds] POST /transfer BEGIN Debit account A Credit account B INSERT audit_log COMMIT 200 OK ROLLBACK 400 Bad Request Client Server Database
Build-time proof from the shared examples corpus.

Sequence

Sequence: Microservice Orchestration

Complex multi-service flow with parallel calls and error handling.

Open in editor
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
Sequence: Microservice Orchestration diagramBuild-time render of the shared Sequence corpus example. Validate token Valid Get user User data Get orders Order list Send notification Queued Aggregate response Gateway Auth Users Orders Notify
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.

Open in editor
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
Sequence: Self-Messages with Notes diagramBuild-time render of the shared Sequence corpus example. [Single panel] CMD+W event.preventDefault() WINDOW_CLOSE_REQUESTED Start 3s timer closePanel(focusedId) 3s elapsed → window.destroy() closePanel(lastId) Auto-select fires → new panel created! 3s elapsed → window.destroy() Panel removed No confirmCloseWindow! Stack becomes [] Panel reopens User Main Process Renderer 3s Fallback Timer
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.

Open in editor
classDiagram
  class Animal {
    +String name
    +int age
    +eat() void
    +sleep() void
  }
Class: Basic Class diagramBuild-time render of the shared Class corpus example. Animal + name: String + age: int + eat(): void + sleep(): void
Build-time proof from the shared examples corpus.

Class

Class: Visibility Markers

All four visibility levels: `+` (public), `-` (private), `#` (protected), `~` (package).

Open in editor
classDiagram
  class User {
    +String name
    -String password
    #int internalId
    ~String packageField
    +login() bool
    -hashPassword() String
    #validate() void
    ~notify() void
  }
Class: Visibility Markers diagramBuild-time render of the shared Class corpus example. User + name: String - password: String # internalId: int ~ packageField: String + login(): bool - hashPassword(): String # validate(): void ~ notify(): void
Build-time proof from the shared examples corpus.

Class

Class: Interface Annotation

Using `<<interface>>` annotation above the class name.

Open in editor
classDiagram
  class Serializable {
    <<interface>>
    +serialize() String
    +deserialize(data) void
  }
Class: Interface Annotation diagramBuild-time render of the shared Class corpus example. <<interface>> Serializable + serialize(): String + deserialize(data): void
Build-time proof from the shared examples corpus.

Class

Class: Abstract Annotation

Using `<<abstract>>` annotation for abstract classes.

Open in editor
classDiagram
  class Shape {
    <<abstract>>
    +String color
    +area() double
    +draw() void
  }
Class: Abstract Annotation diagramBuild-time render of the shared Class corpus example. <<abstract>> Shape + color: String + area(): double + draw(): void
Build-time proof from the shared examples corpus.

Class

Class: Enum Annotation

Using `<<enumeration>>` annotation for enum types.

Open in editor
classDiagram
  class Status {
    <<enumeration>>
    ACTIVE
    INACTIVE
    PENDING
    DELETED
  }
Class: Enum Annotation diagramBuild-time render of the shared Class corpus example. <<enumeration>> Status ACTIVE INACTIVE PENDING DELETED
Build-time proof from the shared examples corpus.

Class

Class: Inheritance (<|--)

Inheritance relationship rendered with a hollow triangle marker.

Open in editor
classDiagram
  class Animal {
    +String name
    +eat() void
  }
  class Dog {
    +String breed
    +bark() void
  }
  class Cat {
    +bool isIndoor
    +meow() void
  }
  Animal <|-- Dog
  Animal <|-- Cat
Class: Inheritance (<|--) diagramBuild-time render of the shared Class corpus example. Animal + name: String + eat(): void Dog + breed: String + bark(): void Cat + isIndoor: bool + meow(): void
Build-time proof from the shared examples corpus.

Class

Class: Composition (*--)

Composition — "owns" relationship with filled diamond marker.

Open in editor
classDiagram
  class Car {
    +String model
    +start() void
  }
  class Engine {
    +int horsepower
    +rev() void
  }
  Car *-- Engine
Class: Composition (*--) diagramBuild-time render of the shared Class corpus example. Car + model: String + start(): void Engine + horsepower: int + rev(): void
Build-time proof from the shared examples corpus.

Class

Class: Aggregation (o--)

Aggregation — "has" relationship with hollow diamond marker.

Open in editor
classDiagram
  class University {
    +String name
  }
  class Department {
    +String faculty
  }
  University o-- Department
Class: Aggregation (o--) diagramBuild-time render of the shared Class corpus example. University + name: String Department + faculty: String
Build-time proof from the shared examples corpus.

Class

Class: Association (-->)

Basic association — simple directed arrow.

Open in editor
classDiagram
  class Customer {
    +String name
  }
  class Order {
    +int orderId
  }
  Customer --> Order
Class: Association (-->) diagramBuild-time render of the shared Class corpus example. Customer + name: String Order + orderId: int
Build-time proof from the shared examples corpus.

Class

Class: Dependency (..>)

Dependency — dashed line with open arrow.

Open in editor
classDiagram
  class Service {
    +process() void
  }
  class Repository {
    +find() Object
  }
  Service ..> Repository
Class: Dependency (..>) diagramBuild-time render of the shared Class corpus example. Service + process(): void Repository + find(): Object
Build-time proof from the shared examples corpus.

Class

Class: Realization (..|>)

Realization — dashed line with hollow triangle (implements interface).

Open in editor
classDiagram
  class Flyable {
    <<interface>>
    +fly() void
  }
  class Bird {
    +fly() void
    +sing() void
  }
  Bird ..|> Flyable
Class: Realization (..|>) diagramBuild-time render of the shared Class corpus example. <<interface>> Flyable + fly(): void Bird + fly(): void + sing(): void
Build-time proof from the shared examples corpus.

Class

Class: All 6 Relationship Types

Every relationship type in a single diagram for comparison.

Open in editor
classDiagram
  A <|-- B : inheritance
  C *-- D : composition
  E o-- F : aggregation
  G --> H : association
  I ..> J : dependency
  K ..|> L : realization
Class: All 6 Relationship Types diagramBuild-time render of the shared Class corpus example. A B C D E F G H I J K L inheritance composition aggregation association dependency realization
Build-time proof from the shared examples corpus.

Class

Class: Relationship Labels

Labeled relationships between classes with descriptive text.

Open in editor
classDiagram
  class Teacher {
    +String name
  }
  class Student {
    +String name
  }
  class Course {
    +String title
  }
  Teacher --> Course : teaches
  Student --> Course : enrolled in
Class: Relationship Labels diagramBuild-time render of the shared Class corpus example. Teacher + name: String Student + name: String Course + title: String teaches 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.

Open in editor
classDiagram
  class Subject {
    <<interface>>
    +attach(Observer) void
    +detach(Observer) void
    +notify() void
  }
  class Observer {
    <<interface>>
    +update() void
  }
  class EventEmitter {
    -List~Observer~ observers
    +attach(Observer) void
    +detach(Observer) void
    +notify() void
  }
  class Logger {
    +update() void
  }
  class Alerter {
    +update() void
  }
  Subject <|.. EventEmitter
  Observer <|.. Logger
  Observer <|.. Alerter
  EventEmitter --> Observer
Class: Design Pattern — Observer diagramBuild-time render of the shared Class corpus example. <<interface>> Subject + attach(Observer): void + detach(Observer): void + notify(): void <<interface>> Observer + update(): void EventEmitter - observers: List~Observer~ + attach(Observer): void + detach(Observer): void + notify(): void Logger + update(): void Alerter + update(): void
Build-time proof from the shared examples corpus.

Class

Class: MVC Architecture

Model-View-Controller pattern showing relationships between layers.

Open in editor
classDiagram
  class Model {
    -data Map
    +getData() Map
    +setData(key, val) void
    +notify() void
  }
  class View {
    -model Model
    +render() void
    +update() void
  }
  class Controller {
    -model Model
    -view View
    +handleInput(event) void
    +updateModel(data) void
  }
  Controller --> Model : updates
  Controller --> View : refreshes
  View --> Model : reads
  Model ..> View : notifies
Class: MVC Architecture diagramBuild-time render of the shared Class corpus example. Model - Map: data + getData(): Map + setData(key, val): void + notify(): void View - Model: model + render(): void + update(): void Controller - Model: model - View: view + handleInput(event): void + updateModel(data): void updates refreshes reads notifies
Build-time proof from the shared examples corpus.

Class

Class: Full Hierarchy

A complete class hierarchy with abstract base, interfaces, and concrete classes.

Open in editor
classDiagram
  class Animal {
    <<abstract>>
    +String name
    +int age
    +eat() void
    +sleep() void
  }
  class Mammal {
    +bool warmBlooded
    +nurse() void
  }
  class Bird {
    +bool canFly
    +layEggs() void
  }
  class Dog {
    +String breed
    +bark() void
  }
  class Cat {
    +bool isIndoor
    +purr() void
  }
  class Parrot {
    +String vocabulary
    +speak() void
  }
  Animal <|-- Mammal
  Animal <|-- Bird
  Mammal <|-- Dog
  Mammal <|-- Cat
  Bird <|-- Parrot
Class: Full Hierarchy diagramBuild-time render of the shared Class corpus example. <<abstract>> Animal + name: String + age: int + eat(): void + sleep(): void Mammal + warmBlooded: bool + nurse(): void Bird + canFly: bool + layEggs(): void Dog + breed: String + bark(): void Cat + isIndoor: bool + purr(): void Parrot + vocabulary: String + speak(): void
Build-time proof from the shared examples corpus.

ER

ER

ER: Basic Relationship

A simple one-to-many relationship between two entities.

Open in editor
erDiagram
  CUSTOMER ||--o{ ORDER : places
ER: Basic Relationship diagramBuild-time render of the shared ER corpus example. CUSTOMER (no attributes) ORDER (no attributes) places
Build-time proof from the shared examples corpus.

ER

ER: Entity with Attributes

An entity with typed attributes and `PK`/`FK`/`UK` key badges.

Open in editor
erDiagram
  CUSTOMER {
    int id PK
    string name
    string email UK
    date created_at
  }
ER: Entity with Attributes diagramBuild-time render of the shared ER corpus example. CUSTOMER PK int id string name UK string email date created_at
Build-time proof from the shared examples corpus.

ER

ER: Attribute Keys (PK, FK, UK)

All three key constraint types rendered as badges.

Open in editor
erDiagram
  ORDER {
    int id PK
    int customer_id FK
    string invoice_number UK
    decimal total
    date order_date
    string status
  }
ER: Attribute Keys (PK, FK, UK) diagramBuild-time render of the shared ER corpus example. ORDER PK int id FK int customer_id UK string invoice_number decimal total date order_date string status
Build-time proof from the shared examples corpus.

ER

ER: Exactly One to Exactly One (||--||)

One-to-one mandatory relationship.

Open in editor
erDiagram
  PERSON ||--|| PASSPORT : has
ER: Exactly One to Exactly One (||--||) diagramBuild-time render of the shared ER corpus example. PERSON (no attributes) PASSPORT (no attributes) has
Build-time proof from the shared examples corpus.

ER

ER: Exactly One to Zero-or-Many (||--o{)

Classic one-to-many optional relationship (crow's foot).

Open in editor
erDiagram
  CUSTOMER ||--o{ ORDER : places
ER: Exactly One to Zero-or-Many (||--o{) diagramBuild-time render of the shared ER corpus example. CUSTOMER (no attributes) ORDER (no attributes) places
Build-time proof from the shared examples corpus.

ER

ER: Zero-or-One to One-or-Many (|o--|{)

Optional on one side, at-least-one on the other.

Open in editor
erDiagram
  SUPERVISOR |o--|{ EMPLOYEE : manages
ER: Zero-or-One to One-or-Many (|o--|{) diagramBuild-time render of the shared ER corpus example. SUPERVISOR (no attributes) EMPLOYEE (no attributes) manages
Build-time proof from the shared examples corpus.

ER

ER: One-or-More to Zero-or-Many (}|--o{)

At-least-one to zero-or-many relationship.

Open in editor
erDiagram
  TEACHER }|--o{ COURSE : teaches
ER: One-or-More to Zero-or-Many (}|--o{) diagramBuild-time render of the shared ER corpus example. TEACHER (no attributes) COURSE (no attributes) teaches
Build-time proof from the shared examples corpus.

ER

ER: All Cardinality Types

Every cardinality combination in one diagram.

Open in editor
erDiagram
  A ||--|| B : one-to-one
  C ||--o{ D : one-to-many
  E |o--|{ F : opt-to-many
  G }|--o{ H : many-to-many
ER: All Cardinality Types diagramBuild-time render of the shared ER corpus example. A (no attributes) B (no attributes) C (no attributes) D (no attributes) E (no attributes) F (no attributes) G (no attributes) H (no attributes) one-to-one one-to-many opt-to-many many-to-many
Build-time proof from the shared examples corpus.

ER

ER: Identifying (Solid) Relationship

Solid line indicating an identifying relationship (child depends on parent for identity).

Open in editor
erDiagram
  ORDER ||--|{ LINE_ITEM : contains
ER: Identifying (Solid) Relationship diagramBuild-time render of the shared ER corpus example. ORDER (no attributes) LINE_ITEM (no attributes) contains
Build-time proof from the shared examples corpus.

ER

ER: Non-Identifying (Dashed) Relationship

Dashed line indicating a non-identifying relationship.

Open in editor
erDiagram
  USER ||..o{ LOG_ENTRY : generates
  USER ||..o{ SESSION : opens
ER: Non-Identifying (Dashed) Relationship diagramBuild-time render of the shared ER corpus example. USER (no attributes) LOG_ENTRY (no attributes) SESSION (no attributes) generates opens
Build-time proof from the shared examples corpus.

ER

ER: Mixed Identifying & Non-Identifying

Both solid and dashed lines in the same diagram.

Open in editor
erDiagram
  ORDER ||--|{ LINE_ITEM : contains
  ORDER ||..o{ SHIPMENT : ships-via
  PRODUCT ||--o{ LINE_ITEM : includes
  PRODUCT ||..o{ REVIEW : receives
ER: Mixed Identifying & Non-Identifying diagramBuild-time render of the shared ER corpus example. ORDER (no attributes) LINE_ITEM (no attributes) SHIPMENT (no attributes) PRODUCT (no attributes) REVIEW (no attributes) contains ships-via includes receives
Build-time proof from the shared examples corpus.

ER

ER: E-Commerce Schema

Full e-commerce database schema with customers, orders, products, and line items.

Open in editor
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
ER: E-Commerce Schema diagramBuild-time render of the shared ER corpus example. CUSTOMER PK int id string name UK string email ORDER PK int id date created FK int customer_id PRODUCT PK int id string name float price LINE_ITEM PK int id FK int order_id FK int product_id int quantity places contains includes
Build-time proof from the shared examples corpus.

ER

ER: Blog Platform Schema

Blog system with users, posts, comments, and tags.

Open in editor
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
ER: Blog Platform Schema diagramBuild-time render of the shared ER corpus example. USER PK int id UK string username UK string email date joined POST PK int id string title text content FK int author_id date published COMMENT PK int id text body FK int post_id FK int user_id date created TAG PK int id UK string name writes authors has tagged-with
Build-time proof from the shared examples corpus.

ER

ER: School Management Schema

School system with students, teachers, courses, and enrollments.

Open in editor
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
ER: School Management Schema diagramBuild-time render of the shared ER corpus example. STUDENT PK int id string name date dob string grade TEACHER PK int id string name string department COURSE PK int id string title FK int teacher_id int credits ENROLLMENT PK int id FK int student_id FK int course_id string semester float grade teaches enrolled 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.

Open in editor
timeline
  title History of Social Media Platform
  2002 : LinkedIn
  2004 : Facebook : Google
  2005 : YouTube
  2006 : Twitter
Timeline: Social Media History diagramBuild-time render of the shared Timeline corpus example. History of Social Media Platform 2002 LinkedIn 2004 Facebook Google 2005 YouTube 2006 Twitter History of Social Media Platform
Build-time proof from the shared examples corpus.

Timeline

Timeline: Product Delivery Plan

Sectioned timeline with continuation events, matching the more advanced Mermaid Timeline examples.

Open in editor
timeline
  title Product Delivery Plan
  section Foundation
  2022 Q4 : Research
  2023 Q1 : Prototype
  section Launch
  2023 Q3 : Private beta
          : Design system rollout
  2024 Q1 : Public launch
Timeline: Product Delivery Plan diagramBuild-time render of the shared Timeline corpus example. Product Delivery Plan 2022 Q4 Research 2023 Q1 Prototype 2023 Q3 Private beta Design system rollout 2024 Q1 Public launch Product Delivery Plan
Build-time proof from the shared examples corpus.

Timeline

Timeline: Multiline Platform Milestones

Exercises <br> labels in the title, section labels, periods, and event cards.

Open in editor
timeline
  title Platform<br>Milestones
  section Core<br>platform
  2024<br>Q1 : Soft<br>launch
  2024<br>Q2 : Mobile<br>support
  section Adoption
  2024<br>Q4 : Team<br>rollout
Timeline: Multiline Platform Milestones diagramBuild-time render of the shared Timeline corpus example. Platform Milestones 2024Q1 Softlaunch 2024Q2 Mobilesupport 2024Q4 Teamrollout PlatformMilestones
Build-time proof from the shared examples corpus.

Journey

Journey

Journey: My Working Day

Scored tasks grouped into sections with actor tags and accessibility metadata.

Open in editor
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
Journey: My Working Day diagramBuild-time render of the shared Journey corpus example. My working day journey A compact user journey showing commute and workday tasks 5 4 3 2 1 Actors Me Cat Team Make tea Go upstairs Do work Review PRs My working day
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.

Open in editor
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
Journey: Mermaid Docs Example diagramBuild-time render of the shared Journey corpus example. My working day 5 4 3 2 1 Actors Me Cat Make tea Go upstairs Do work Go downstairs Sit down My working day
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.

Palette proof: 10 peer actors

Open in editor
journey
    title Cross-functional release readiness
    section Plan
      Scope launch: 5: Product, Design
    section Build
      Ship product: 4: Web, API
      Instrument events: 4: Data, Mobile
    section Validate
      Prove release: 5: QA, Security
    section Release
      Publish rollout: 5: Docs, Support
Journey: Cross-functional Release Readiness diagramBuild-time render of the shared Journey corpus example. Cross-functional release readiness 5 4 3 2 1 Actors Product Design Web API Data Mobile QA Security Docs Support Scope launch Ship product Instrument events Prove release Publish rollout Cross-functional release readiness
High-cardinality proof at intrinsic size; scroll to inspect every peer.

XY Chart

XY Chart

XY: Simple Bar Chart

Basic bar chart with categorical x-axis.

Open in editor
xychart-beta
    title "Product Sales"
    x-axis [Widgets, Gadgets, Gizmos, Doodads, Thingamajigs]
    bar [150, 230, 180, 95, 310]
XY: Simple Bar Chart diagramBuild-time render of the shared XY Chart corpus example. Widgets Gadgets Gizmos Doodads Thingamajigs 0 50 100 150 200 250 300 Product Sales Widgets: 150150Gadgets: 230230Gizmos: 180180Doodads: 9595Thingamajigs: 310310
Build-time proof from the shared examples corpus.

XY Chart

XY: Line Chart

Line chart showing revenue growth over years.

Open in editor
xychart-beta
    title "Revenue Growth"
    x-axis [2018, 2019, 2020, 2021, 2022, 2023, 2024, 2025]
    line [320, 420, 540, 680, 820, 950, 1080, 1200]
XY: Line Chart diagramBuild-time render of the shared XY Chart corpus example. 2018 2019 2020 2021 2022 2023 2024 2025 0 100 200 300 400 500 600 700 800 900 1000 1100 1200 Revenue Growth 2018: 3203202019: 4204202020: 5405402021: 6806802022: 8208202023: 9509502024: 108010802025: 12001200
Build-time proof from the shared examples corpus.

XY Chart

XY: Bar and Line Overlay

Bars with a line overlay and both axis titles.

Open in editor
xychart-beta
    title "Monthly Revenue"
    x-axis "Month" [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
    y-axis "Revenue (USD)" 0 --> 10000
    bar [4200, 5000, 5800, 6200, 5500, 7000, 7800, 7200, 8400, 8100, 9000, 9200]
    line [4200, 5000, 5800, 6200, 5500, 7000, 7800, 7200, 8400, 8100, 9000, 9200]
XY: Bar and Line Overlay diagramBuild-time render of the shared XY Chart corpus example. Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 0 1000 2000 3000 4000 5000 6000 7000 8000 9000 10000 Month Revenue (USD) Monthly Revenue Bar 1 Line 1 Jan: 42004200Feb: 50005000Mar: 58005800Apr: 62006200May: 55005500Jun: 70007000Jul: 78007800Aug: 72007200Sep: 84008400Oct: 81008100Nov: 90009000Dec: 92009200Jan: 42004200Feb: 50005000Mar: 58005800Apr: 62006200May: 55005500Jun: 70007000Jul: 78007800Aug: 72007200Sep: 84008400Oct: 81008100Nov: 90009000Dec: 92009200
Build-time proof from the shared examples corpus.

XY Chart

XY: Horizontal Bars

Horizontal bar chart showing language popularity.

Open in editor
xychart-beta horizontal
    title "Language Popularity"
    x-axis [Python, JavaScript, Java, Go, Rust]
    bar [30, 25, 20, 12, 8]
XY: Horizontal Bars diagramBuild-time render of the shared XY Chart corpus example. Python JavaScript Java Go Rust 0 5 10 15 20 25 30 Language Popularity Python: 3030JavaScript: 2525Java: 2020Go: 1212Rust: 88
Build-time proof from the shared examples corpus.

XY Chart

XY: Multiple Bar Series

Two bar series comparing years side by side.

Open in editor
xychart-beta
    title "2023 vs 2024 Sales"
    x-axis [Q1, Q2, Q3, Q4]
    bar [200, 250, 300, 280]
    bar [230, 280, 320, 350]
XY: Multiple Bar Series diagramBuild-time render of the shared XY Chart corpus example. Q1 Q2 Q3 Q4 200 220 240 260 280 300 320 340 360 2023 vs 2024 Sales Bar 1 Bar 2 Q1: 200200Q2: 250250Q3: 300300Q4: 280280Q1: 230230Q2: 280280Q3: 320320Q4: 350350
Build-time proof from the shared examples corpus.

XY Chart

XY: Dual Lines

Two lines comparing planned vs actual values.

Open in editor
xychart-beta
    title "Planned vs Actual"
    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug]
    line [100, 145, 190, 240, 280, 320, 360, 400]
    line [90, 130, 185, 235, 275, 340, 380, 420]
XY: Dual Lines diagramBuild-time render of the shared XY Chart corpus example. Jan Feb Mar Apr May Jun Jul Aug 0 50 100 150 200 250 300 350 400 450 Planned vs Actual Line 1 Line 2 Jan: 100100Feb: 145145Mar: 190190Apr: 240240May: 280280Jun: 320320Jul: 360360Aug: 400400Jan: 9090Feb: 130130Mar: 185185Apr: 235235May: 275275Jun: 340340Jul: 380380Aug: 420420
Build-time proof from the shared examples corpus.

XY Chart

XY: Numeric X-Axis

Line chart using a numeric x-axis range.

Open in editor
xychart-beta
    title "Distribution Curve"
    x-axis 0 --> 100
    line [4, 7, 13, 21, 31, 43, 58, 71, 84, 91, 95, 91, 84, 71, 58, 43, 31, 21, 13, 7, 4]
XY: Numeric X-Axis diagramBuild-time render of the shared XY Chart corpus example. 0 10 20 30 40 50 60 70 80 90 100 0 10 20 30 40 50 60 70 80 90 100 Distribution Curve 0: 445: 7710: 131315: 212120: 313125: 434330: 585835: 717140: 848445: 919150: 959555: 919160: 848465: 717170: 585875: 434380: 313185: 212190: 131395: 77100: 44
Build-time proof from the shared examples corpus.

XY Chart

XY: 12-Month Dataset

Full year monthly data with bar and trend line.

Open in editor
xychart-beta
    title "Monthly Active Users (2024)"
    x-axis [Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec]
    y-axis "Users" 0 --> 30000
    bar [12000, 13500, 15200, 16800, 18500, 20100, 19800, 21500, 23000, 24200, 25800, 28000]
    line [12000, 13500, 15200, 16800, 18500, 20100, 19800, 21500, 23000, 24200, 25800, 28000]
XY: 12-Month Dataset diagramBuild-time render of the shared XY Chart corpus example. Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec 0 2000 4000 6000 8000 10000 12000 14000 16000 18000 20000 22000 24000 26000 28000 30000 Users Monthly Active Users (2024) Bar 1 Line 1 Jan: 1200012000Feb: 1350013500Mar: 1520015200Apr: 1680016800May: 1850018500Jun: 2010020100Jul: 1980019800Aug: 2150021500Sep: 2300023000Oct: 2420024200Nov: 2580025800Dec: 2800028000Jan: 1200012000Feb: 1350013500Mar: 1520015200Apr: 1680016800May: 1850018500Jun: 2010020100Jul: 1980019800Aug: 2150021500Sep: 2300023000Oct: 2420024200Nov: 2580025800Dec: 2800028000
Build-time proof from the shared examples corpus.

XY Chart

XY: Horizontal Combined

Horizontal chart with both bars and a trend line.

Open in editor
xychart-beta horizontal
    title "Budget vs Actual"
    x-axis [Eng, Sales, Marketing, Product, Ops, HR, Finance, Legal]
    bar [500, 350, 250, 200, 150, 120, 100, 80]
    line [480, 380, 230, 180, 160, 110, 95, 75]
XY: Horizontal Combined diagramBuild-time render of the shared XY Chart corpus example. Eng Sales Marketing Product Ops HR Finance Legal 0 50 100 150 200 250 300 350 400 450 500 Budget vs Actual Bar 1 Line 1 Eng: 500500Sales: 350350Marketing: 250250Product: 200200Ops: 150150HR: 120120Finance: 100100Legal: 8080Eng: 480480Sales: 380380Marketing: 230230Product: 180180Ops: 160160HR: 110110Finance: 9595Legal: 7575
Build-time proof from the shared examples corpus.

XY Chart

XY: Sprint Burndown

Sprint burndown chart with actual and ideal lines.

Open in editor
xychart-beta
    title "Sprint Burndown"
    x-axis [D1, D2, D3, D4, D5, D6, D7, D8, D9, D10]
    y-axis "Story Points" 0 --> 80
    line [72, 65, 58, 50, 45, 38, 30, 22, 12, 0]
    line [72, 65, 58, 50, 43, 36, 29, 22, 14, 0]
XY: Sprint Burndown diagramBuild-time render of the shared XY Chart corpus example. D1 D2 D3 D4 D5 D6 D7 D8 D9 D10 0 10 20 30 40 50 60 70 80 Story Points Sprint Burndown Line 1 Line 2 D1: 7272D2: 6565D3: 5858D4: 5050D5: 4545D6: 3838D7: 3030D8: 2222D9: 1212D10: 00D1: 7272D2: 6565D3: 5858D4: 5050D5: 4343D6: 3636D7: 2929D8: 2222D9: 1414D10: 00
Build-time proof from the shared examples corpus.

XY Chart

XY: Service Health Portfolio

Eight peer service series share one operational scale, exposing whether line and legend colors remain distinguishable above the legacy six-series boundary.

Palette proof: 8 peer series

Open in editor
xychart-beta
    title "Service Health Portfolio"
    x-axis [Mon, Tue, Wed, Thu, Fri, Sat]
    y-axis "Availability (%)" 80 --> 100
    line Web [99, 98, 99, 99, 100, 99]
    line API [96, 97, 98, 97, 99, 98]
    line Data [93, 95, 94, 96, 97, 96]
    line Mobile [89, 92, 93, 91, 95, 94]
    line Identity [98, 96, 95, 97, 96, 98]
    line Search [86, 88, 91, 93, 92, 95]
    line Billing [94, 93, 96, 95, 98, 97]
    line Notifications [82, 87, 85, 90, 89, 93]
XY: Service Health Portfolio diagramBuild-time render of the shared XY Chart corpus example. Mon Tue Wed Thu Fri Sat 80 82 84 86 88 90 92 94 96 98 100 Availability (%) Service Health Portfolio Web API Data Mobile Identity Search Billing Notifications Mon: 9999Tue: 9898Wed: 9999Thu: 9999Fri: 100100Sat: 9999Mon: 9696Tue: 9797Wed: 9898Thu: 9797Fri: 9999Sat: 9898Mon: 9393Tue: 9595Wed: 9494Thu: 9696Fri: 9797Sat: 9696Mon: 8989Tue: 9292Wed: 9393Thu: 9191Fri: 9595Sat: 9494Mon: 9898Tue: 9696Wed: 9595Thu: 9797Fri: 9696Sat: 9898Mon: 8686Tue: 8888Wed: 9191Thu: 9393Fri: 9292Sat: 9595Mon: 9494Tue: 9393Wed: 9696Thu: 9595Fri: 9898Sat: 9797Mon: 8282Tue: 8787Wed: 8585Thu: 9090Fri: 8989Sat: 9393
High-cardinality proof at intrinsic size; scroll to inspect every peer.

Pie

Pie

Pie: Pets Adopted

A basic pie chart with a title and three labelled slices.

Open in editor
pie title Pets adopted by volunteers
    "Dogs" : 386
    "Cats" : 85
    "Rats" : 15
Pie: Pets Adopted diagramBuild-time render of the shared Pie corpus example. 79% 17% Dogs (79.4%) Cats (17.5%) Rats (3.1%) Pets adopted by volunteers
Build-time proof from the shared examples corpus.

Pie

Pie: Product Elements (showData)

A pie chart using `showData` to surface the raw value beside each legend label, with decimal slice values.

Open in editor
pie showData
    title Key elements in Product X
    "Calcium" : 42.96
    "Potassium" : 50.05
    "Magnesium" : 10.01
    "Iron" : 5
Pie: Product Elements (showData) diagramBuild-time render of the shared Pie corpus example. 40% 46% 9% Calcium [42.96] (39.8%) Potassium [50.05] (46.3%) Magnesium [10.01] (9.3%) Iron [5] (4.6%) Key elements in Product X
Build-time proof from the shared examples corpus.

Pie

Pie: Platform Workload Portfolio

Ten peer workload categories exercise high-cardinality slice and legend identity while preserving the values and source order authored by the user.

Palette proof: 10 peer slices

Open in editor
pie showData
    title Platform workload portfolio
    "Web" : 24
    "API" : 18
    "Data" : 14
    "Mobile" : 11
    "Security" : 9
    "Infrastructure" : 8
    "Documentation" : 6
    "Support" : 5
    "Quality" : 3
    "Research" : 2
Pie: Platform Workload Portfolio diagramBuild-time render of the shared Pie corpus example. 24% 18% 14% 11% 9% 8% 6% 5% Web [24] (24.0%) API [18] (18.0%) Data [14] (14.0%) Mobile [11] (11.0%) Security [9] (9.0%) Infrastructure [8] (8.0%) Documentation [6] (6.0%) Support [5] (5.0%) Quality [3] (3.0%) Research [2] (2.0%) Platform workload portfolio
High-cardinality proof at intrinsic size; scroll to inspect every peer.

Quadrant

Quadrant

Quadrant: Reach & Engagement

The classic quadrant chart: campaigns plotted by reach (x) and engagement (y), with a label in each of the four quadrants.

Open in editor
quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]
Quadrant: Reach & Engagement diagramBuild-time render of the shared Quadrant corpus example. Reach and engagement of campaigns Need to promote We should expand Re-evaluate May be improved Campaign A Campaign B Campaign C Campaign D Campaign E Campaign F Low Reach High Reach Low Engagement High Engagement Reach and engagement of campaigns
Build-time proof from the shared examples corpus.

Quadrant

Quadrant: Effort vs Value

A prioritization matrix — tasks plotted by effort and value to decide what to do, plan, delegate, or drop.

Open in editor
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]
Quadrant: Effort vs Value diagramBuild-time render of the shared Quadrant corpus example. Prioritization matrix Plan Do now Drop Delegate Onboarding revamp Platform migration Legacy cleanup Vendor swap Low Effort High Effort Low Value High Value Prioritization matrix
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.

Open in editor
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
Gantt: A Gantt Diagram diagramBuild-time render of the shared Gantt corpus example. 01-05 01-12 01-19 01-26 02-02 02-09 02-16 A task Another task Task in Another another task A Gantt Diagram
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.

Open in editor
gantt
    title Release train
    dateFormat YYYY-MM-DD
    excludes weekends
    section Build
        Completed task :done, des1, 2024-01-08, 2024-01-10
        Active task    :active, des2, 2024-01-11, 3d
        Future task    :des3, after des2, 5d
    section Ship
        Crit review    :crit, rev1, after des3, 2d
        Code freeze    :vert, v1, 2024-01-19, 0d
        Release        :milestone, m1, after rev1, 0d
Gantt: Status & Milestones diagramBuild-time render of the shared Gantt corpus example. 01-14 01-21 Completed task Active task Future task Crit review Release Code freeze Release train
Build-time proof from the shared examples corpus.

Gantt

Gantt: Compact Display Mode

Dense overlapping tasks packed into shared rows with `displayMode: compact` — deterministic first-fit lanes per section.

Open in editor
---
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
Gantt: Compact Display Mode diagramBuild-time render of the shared Gantt corpus example. 01-07 One Three Two Four Compact packing
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.

Palette proof: 13 first-level branches

Open in editor
mindmap
  accTitle: Incident response command map
  accDescr: A broad operational map with more than eleven second-level nodes
  root((Production incident))
    Detection
      Alerts
      Customer reports
    Triage
      Severity
      Scope
    Containment
      Feature flags
      Traffic shift
    Investigation
      Logs
      Traces
    Communications
      Status page
      Stakeholders
    Recovery
      Rollback
      Data repair
    Validation
      Synthetic checks
      Error budget
    Follow-up
      Timeline
      Action items
    Security
      Credentials
      Audit trail
    Vendors
      Cloud provider
      Payment processor
    Legal
      Notification duties
      Evidence hold
    Support
      Response macros
      Escalations
    Analytics
      Impact estimate
      Cohort analysis
Mindmap: Incident Response Command Map diagramBuild-time render of the shared Mindmap corpus example. Incident response command map A broad operational map with more than eleven second-level nodes Production incident Detection Alerts Customer reports Triage Severity Scope Containment Feature flags Traffic shift Investigation Logs Traces Communications Status page Stakeholders Recovery Rollback Data repair Validation Synthetic checks Error budget Follow-up Timeline Action items Security Credentials Audit trail Vendors Cloud provider Payment processor Legal Notification duties Evidence hold Support Response macros Escalations Analytics Impact estimate Cohort analysis
High-cardinality proof at intrinsic size; scroll to inspect every peer.

Mindmap

Mindmap: Multilingual Global Launch

Long wrapped Markdown with CJK, Arabic, emoji grapheme clusters, ampersands, and comparison characters.

Open in editor
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
Mindmap: Multilingual Global Launch diagramBuild-time render of the shared Mindmap corpus example. Global launch knowledge map Global launch 🌍 Research findings thatinclude a deliberately longsentence requiringdeterministic wrapping withoutlosing words or graphemeclusters 東京の利用者インタビューと製品フィードバック ملاحظات المستخدمين وخطةالإطلاق Families 👨‍👩‍👧‍👦 and flags🇳🇬 🇯🇵 Content & localization A < B & C > D naïve café — résumé 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.

Open in editor
---
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
Mindmap: Explicit Tidy Tree diagramBuild-time render of the shared Mindmap corpus example. Explicit one-sided dependency tree 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.

Palette proof: 12 delivery lanes

Open in editor
---
title: Monorepo delivery lanes
config:
  gitGraph:
    mainBranchOrder: 6
---
gitGraph LR:
  commit id:"root" msg:"Monorepo baseline"
  branch docs order:12
  commit id:"docs" msg:"Documentation"
  checkout main
  branch api order:1
  commit id:"api" msg:"Public API"
  checkout main
  branch web order:2
  commit id:"web" msg:"Web client"
  checkout main
  branch mobile order:3
  commit id:"mobile" msg:"Mobile client"
  checkout main
  branch data order:4
  commit id:"data" msg:"Data pipeline"
  checkout main
  branch infra order:5
  commit id:"infra" msg:"Infrastructure"
  checkout main
  branch security order:7
  commit id:"security" msg:"Security review"
  checkout main
  branch qa order:8
  commit id:"qa" msg:"Quality gates"
  checkout main
  branch release order:9
  commit id:"release" msg:"Release train"
  checkout main
  branch support order:10
  commit id:"support" msg:"Support readiness"
  checkout main
  branch analytics order:11
  commit id:"analytics" msg:"Usage analytics"
  checkout main
  commit id:"ship" type:HIGHLIGHT tag:"train-ready" msg:"Coordinate delivery"
GitGraph: Monorepo Delivery Lanes diagramBuild-time render of the shared GitGraph corpus example. Git graph Monorepo delivery lanes api web mobile data infra main security qa release support analytics docs Monorepo baseline Documentation Public API Web client Mobile client Data pipeline Infrastructure Security review Quality gates Release train Support readiness Usage analytics Coordinate delivery train-ready
High-cardinality proof at intrinsic size; scroll to inspect every peer.

GitGraph

GitGraph: Merge Backports

A merge commit backported to a maintenance line with explicit immediate-parent ancestry.

Open in editor
---
title: Merge commit backports
---
gitGraph LR:
  accTitle: Merge and cherry pick ancestry
  accDescr: A merge is backported using an immediate parent explicitly
  commit id:"ROOT" tag:"v1"
  branch develop order:2
  branch release/1.x order:3
  commit id:"release-base" msg:"Maintain version one"
  checkout main
  commit id:"main-work" msg:"Prepare version two"
  checkout develop
  commit id:"feature-a" msg:"Feature A"
  commit id:"feature-b" msg:"Feature B"
  checkout main
  merge develop id:"MERGE" type:HIGHLIGHT tag:"v2"
  checkout release/1.x
  cherry-pick id:"MERGE" parent:"feature-b" tag:"selected-backport"
  commit id:"verify-backport" msg:"Verify maintenance release"
GitGraph: Merge Backports diagramBuild-time render of the shared GitGraph corpus example. Merge and cherry pick ancestry A merge is backported using an immediate parent explicitly Merge commit backports main develop release/1.x ROOT v1 Maintain version one Prepare version two Feature A Feature B merged branch develop into main v2 cherry-picked merged branch develop into main into release/1.x selected-backport Verify maintenance release
Build-time proof from the shared examples corpus.

GitGraph

GitGraph: CI/CD Promotion

Build, test, canary, and production promotion modeled through ordered branches, typed commits, tags, and merges.

Open in editor
---
title: CI/CD promotion history
---
gitGraph LR:
  accTitle: Build, test, canary, and production promotion
  commit id:"source" msg:"Source accepted"
  branch build order:2
  commit id:"compile" msg:"Compile and package"
  commit id:"scan" type:REVERSE msg:"Supply-chain scan"
  checkout main
  merge build id:"artifact" tag:"sha-7f31"
  branch staging order:3
  commit id:"integration" msg:"Integration suite"
  commit id:"load" msg:"Load test"
  checkout main
  merge staging id:"candidate" type:HIGHLIGHT tag:"rc.4"
  branch canary order:4
  commit id:"one-percent" msg:"One percent traffic"
  commit id:"ten-percent" msg:"Ten percent traffic"
  checkout main
  merge canary id:"production" type:HIGHLIGHT tag:"v4.2.0"
GitGraph: CI/CD Promotion diagramBuild-time render of the shared GitGraph corpus example. Build, test, canary, and production promotion CI/CD promotion history main build staging canary Source accepted Compile and package Supply-chain scan merged branch build into main sha-7f31 Integration suite Load test merged branch staging into main rc.4 One percent traffic Ten percent traffic merged branch canary into main v4.2.0
Build-time proof from the shared examples corpus.

Style + Palette

Style + Palette

Style + Palette: Flowchart

One Mermaid source rendered with a named style and palette stack; appearance stays outside the source.

Open in editor
flowchart TD
  subgraph product [Product Loop]
    A[Capture request] --> B{Ready?}
    B -->|yes| C[Ship]
    B -.->|needs work| D[Refine]
  end
Style + Palette: Flowchart diagramBuild-time render of the shared Style + Palette corpus example. PRODUCT LOOP yes needs work Capture request Ready? Ship Refine
Build-time proof from the shared examples corpus.

Style + Palette

Style + Palette: Architecture

Architecture services, groups, and connectors use the same Style + Palette render options.

Open in editor
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
Style + Palette: Architecture diagramBuild-time render of the shared Style + Palette corpus example. EDGE LAYER CORE SERVICES Web App API Postgres
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.

Open in editor
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
Style + Palette: Sequence diagramBuild-time render of the shared Style + Palette corpus example. Pick style and palette render(source, options) SVG User Editor Renderer
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.

Open in editor
classDiagram
  class Renderer {
    +renderSVG(source) string
    +renderASCII(source) string
  }
  class StyleStack {
    +style string
    +palette string
  }
  Renderer --> StyleStack : uses
Style + Palette: Class diagramBuild-time render of the shared Style + Palette corpus example. Renderer + renderSVG(source): string + renderASCII(source): string StyleStack + string: style + string: palette uses
Build-time proof from the shared examples corpus.

Style + Palette

Style + Palette: ER

ER entities and relationships get a publication-ready treatment from render options.

Open in editor
erDiagram
  USER {
    string id PK
    string email
  }
  DIAGRAM {
    string id PK
    string source
  }
  EXPORT {
    string id PK
    string format
  }
  USER ||--o{ DIAGRAM : creates
  DIAGRAM ||--o{ EXPORT : renders
Style + Palette: ER diagramBuild-time render of the shared Style + Palette corpus example. USER PK string id string email DIAGRAM PK string id string source EXPORT PK string id string format creates renders
Build-time proof from the shared examples corpus.

Style + Palette

Style + Palette: Timeline

Timeline periods and events reuse the same style stack as the other families.

Open in editor
timeline
  title Fork Roadmap
  section Discover
  2024 Q2 : Audit forks
          : Extract small PRs
  section Ship
  2024 Q3 : Style + Palette
          : Live editor examples
Style + Palette: Timeline diagramBuild-time render of the shared Style + Palette corpus example. FORK ROADMAP 2024 Q2 Audit forks Extract small PRs 2024 Q3 Style + Palette Live editorexamples FORK ROADMAP
Build-time proof from the shared examples corpus.

Style + Palette

Style + Palette: Journey

Journey task cards, sections, actors, and scores inherit the named look through render options.

Open in editor
journey
  title Editor adoption
  section Try
    Open preset: 5: User
    Choose palette: 4: Designer, Developer
  section Share
    Copy URL: 5: User
    Export SVG: 4: Developer
Style + Palette: Journey diagramBuild-time render of the shared Style + Palette corpus example. EDITOR ADOPTION 5 4 3 2 1 ACTORS User Designer Developer Open preset Choose palette Copy URL Export SVG EDITOR ADOPTION
Build-time proof from the shared examples corpus.

Style + Palette

Style + Palette: XY Chart

XY chart labels, axes, grid, and series render with the same style stack while chart config still controls axes.

Open in editor
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]
Style + Palette: XY Chart diagramBuild-time render of the shared Style + Palette corpus example. Mon Tue Wed Thu Fri 0 10 20 30 40 50 60 70 80 90 100 Renders STYLED ADOPTION Bar 1 Line 1 Mon: 2525Tue: 4242Wed: 5858Thu: 7474Fri: 8888Mon: 1818Tue: 3535Wed: 5252Thu: 7070Fri: 9595
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.

Open in editor
radar-beta
  title Model comparison
  axis speed["Speed"], accuracy["Accuracy"], cost["Cost"]
  axis latency["Latency"], context["Context"], safety["Safety"]
  curve a["Model A"]{4, 5, 3, 4, 4, 5}
  curve b["Model B"]{5, 3, 4, 3, 5, 3}
  max 5
Radar: Model comparison (circle) diagramBuild-time render of the shared Radar corpus example. Model comparison Speed Accuracy Cost Latency Context Safety Model A Model B Model comparison
Build-time proof from the shared examples corpus.

Radar

Radar: Student grades (keyed values)

Keyed curve values (`{ english: 4, math: 5, … }`, colon optional) are reordered to axis order, so authoring order does not matter.

Open in editor
radar-beta
  title Student grades
  axis math["Math"], science["Science"], english["English"], history["History"]
  curve alice["Alice"]{ english: 4, math: 5, history: 3, science: 4 }
  curve bob["Bob"]{ math: 3, science: 5, english: 4, history: 5 }
  max 5
Radar: Student grades (keyed values) diagramBuild-time render of the shared Radar corpus example. Student grades Math Science English History Alice Bob Student grades
Build-time proof from the shared examples corpus.

Radar

Radar: Incident response (polygon triangle)

`graticule polygon` with three axes draws a triangular graticule and straight polygon edges.

Open in editor
radar-beta
  title Incident response
  axis detect["Detect"], respond["Respond"], recover["Recover"]
  curve q3["Q3"]{3, 2, 4}
  curve q4["Q4"]{4, 4, 3}
  graticule polygon
  max 5
Radar: Incident response (polygon triangle) diagramBuild-time render of the shared Radar corpus example. Incident response Detect Respond Recover Q3 Q4 Incident response
Build-time proof from the shared examples corpus.

Radar

Radar: Restaurant (polygon square)

Four axes under `graticule polygon` draw a square (diamond) graticule.

Open in editor
radar-beta
  title Restaurant comparison
  axis food["Food Quality"], service["Service"], price["Price"], ambiance["Ambiance"]
  curve a["Restaurant A"]{4, 3, 2, 4}
  curve b["Restaurant B"]{3, 4, 3, 3}
  graticule polygon
  max 5
Radar: Restaurant (polygon square) diagramBuild-time render of the shared Radar corpus example. Restaurant comparison Food Quality Service Price Ambiance Restaurant A Restaurant B Restaurant comparison
Build-time proof from the shared examples corpus.

Radar

Radar: Team skills (polygon pentagon)

Five axes under `graticule polygon` draw a pentagonal graticule — the polygon shape always follows the axis count.

Open in editor
radar-beta
  title Team skills
  axis design["Design"], code["Code"], comms["Comms"], ops["Ops"], data["Data"]
  curve alice["Alice"]{4, 5, 3, 2, 4}
  curve bob["Bob"]{3, 3, 5, 4, 3}
  graticule polygon
  max 5
Radar: Team skills (polygon pentagon) diagramBuild-time render of the shared Radar corpus example. Team skills Design Code Comms Ops Data Alice Bob Team skills
Build-time proof from the shared examples corpus.

Radar

Radar: Seasonal wind rose (polygon octagon)

Eight compass axes under `graticule polygon` draw an octagonal graticule — a natural fit for directional data.

Open in editor
radar-beta
  title Seasonal wind rose
  axis n["N"], ne["NE"], e["E"], se["SE"], s["S"], sw["SW"], w["W"], nw["NW"]
  curve winter["Winter"]{5, 3, 2, 1, 2, 4, 5, 4}
  curve summer["Summer"]{2, 4, 5, 4, 3, 2, 1, 2}
  graticule polygon
  max 5
Radar: Seasonal wind rose (polygon octagon) diagramBuild-time render of the shared Radar corpus example. Seasonal wind rose N NE E SE S SW W NW Winter Summer Seasonal wind rose
Build-time proof from the shared examples corpus.

Radar

Radar: Delivery Team Profiles

Eight peer team profiles share six delivery axes, stress-testing curve, point, fill, and legend identity above the legacy six-color boundary.

Palette proof: 8 peer curves

Open in editor
radar-beta
  title Delivery team profiles
  axis speed["Speed"], quality["Quality"], reliability["Reliability"]
  axis security["Security"], docs["Docs"], support["Support"]
  curve product["Product"]{4, 4, 3, 3, 4, 5}
  curve web["Web"]{5, 4, 4, 3, 3, 4}
  curve api["API"]{4, 5, 5, 4, 3, 3}
  curve data["Data"]{3, 4, 5, 4, 3, 3}
  curve mobile["Mobile"]{4, 4, 3, 4, 3, 4}
  curve security["Security"]{2, 4, 4, 5, 3, 3}
  curve qa["QA"]{3, 5, 4, 4, 3, 4}
  curve docs["Docs"]{3, 4, 3, 3, 5, 5}
  max 5
Radar: Delivery Team Profiles diagramBuild-time render of the shared Radar corpus example. Delivery team profiles Speed Quality Reliability Security Docs Support Product Web API Data Mobile Security QA Docs Delivery team profiles
High-cardinality proof at intrinsic size; scroll to inspect every peer.