Mermaid Syntax Cheat Sheet — Quick Reference for All Diagram Types

Mermaid Syntax Quick Reference

This cheat sheet provides copy-paste snippets for every Mermaid diagram type. Bookmark this page as your go-to reference.

Flowchart

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

Key: TD/TB top-down, LR left-right, [] rectangle, {} diamond, () rounded, (()) circle.

Sequence Diagram

sequenceDiagram
    participant A as Alice
    participant B as Bob
    A->>B: Hello
    B-->>A: Hi back
    A->>B: How are you?
    Note over A,B: Small talk

Key: ->> solid arrow, -->> dashed, +/- activate/deactivate.

Class Diagram

classDiagram
    class Animal {
        +String name
        +makeSound() void
    }
    Animal <|-- Dog
    Animal <|-- Cat

Key: + public, - private, # protected, <|-- inheritance, *-- composition.

State Diagram

stateDiagram-v2
    [*] --> Idle
    Idle --> Active : start
    Active --> Idle : stop
    Active --> [*] : finish

Key: [*] start/end, --> transition, state {} nested.

ER Diagram

erDiagram
    USER ||--o{ POST : writes
    POST }|--|| CATEGORY : "belongs to"
    USER {
        int id PK
        string name
    }

Key: || exactly one, o{ zero or more, |{ one or more.

Gantt Chart

gantt
    dateFormat YYYY-MM-DD
    title Sprint Plan
    section Dev
    Task A :a1, 2024-01-01, 7d
    Task B :after a1, 5d

Key: done, active, crit status tags. after id for dependencies.

Pie Chart

pie title Distribution
    "Category A" : 40
    "Category B" : 35
    "Category C" : 25

Mindmap

mindmap
  root((Topic))
    Branch 1
      Leaf A
      Leaf B
    Branch 2
      Leaf C

Timeline

timeline
    title History
    2022 : Event A
    2023 : Event B : Event C
    2024 : Event D

Global Directives

%%{init: {'theme': 'dark'}}%%
%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#4f46e5'}}}%%

Useful Patterns

• Comments: %% This is a comment
• Click events: click A href "https://example.com" _blank
• Tooltips: click A callback "Tooltip text"
• Node styling: style A fill:#f00,color:#fff
• CSS classes: A:::className with classDef className fill:#f00