2026-01-02

Mermaid.js Syntax Cheat Sheet — Quick Reference

Complete Mermaid.js syntax reference. Quick-lookup guide for flowcharts, sequence diagrams, Gantt charts, class diagrams, state diagrams, ER diagrams, and more.

Flowcharts

Direction

graph TD   %% Top to Bottom
graph LR   %% Left to Right
graph BT   %% Bottom to Top
graph RL   %% Right to Left

Try in Editor →

Use flowchart instead of graph for extended features.

Node Shapes

flowchart TD
    A[Rectangle]
    B(Rounded)
    C([Stadium])
    D[[Subroutine]]
    E[(Cylinder/DB)]
    F((Circle))
    G{Diamond}
    H{{Hexagon}}
    I>Flag/Asymmetric]
    J[/Parallelogram/]
    K[\Parallelogram Alt\]
    L[/Trapezoid\]

Try in Editor →

Edge Types

flowchart LR
    A --> B           %% Arrow
    A --- B           %% Line
    A -.-> B          %% Dotted arrow
    A ==> B           %% Thick arrow
    A --o B           %% Circle end
    A --x B           %% Cross end
    A -->|label| B    %% Labeled arrow
    A -- "label" --- B %% Labeled line

Try in Editor →

Subgraphs

flowchart TB
    subgraph Group Name
        A --> B
    end
    subgraph Another["Custom Title"]
        direction LR
        C --> D
    end
    Group Name --> Another

Try in Editor →

Styling

flowchart TD
    A:::myClass --> B
    classDef myClass fill:#f9f,stroke:#333,color:black
    style B fill:#bbf,stroke:#33f

Try in Editor →

Sequence Diagrams

Basics

sequenceDiagram
    participant A as Alice
    actor U as User
    A->>B: Solid arrow (sync)
    B-->>A: Dotted arrow (response)
    A-)B: Open arrow (async)
    A-xB: Cross (lost message)

Try in Editor →

Features

sequenceDiagram
    autonumber

    A->>+B: Request (activate)
    B-->>-A: Response (deactivate)

    Note over A,B: Spanning note
    Note right of B: Side note

    loop Every 5s
        A->>B: Ping
    end

    alt Success
        B-->>A: 200 OK
    else Failure
        B-->>A: 500 Error
    end

    opt Optional step
        A->>B: Maybe this happens
    end

    par Parallel
        A->>B: Request 1
    and
        A->>C: Request 2
    end

    critical Critical section
        A->>B: Important operation
    option Failure case
        B-->>A: Rollback
    end

    rect rgb(200, 220, 255)
        A->>B: Highlighted section
    end

Try in Editor →

Gantt Charts

gantt
    title Project Timeline
    dateFormat YYYY-MM-DD
    axisFormat %b %d
    excludes weekends

    section Phase 1
    Task 1          :done, t1, 2025-01-01, 7d
    Task 2          :active, t2, after t1, 5d
    Milestone       :milestone, m1, after t2, 0d

    section Phase 2
    Task 3          :t3, after m1, 10d
    Critical task   :crit, t4, after t3, 3d

Try in Editor →

Task States

- done — completed

- active — in progress

- crit — critical path

- Combine: crit, done or crit, active

Class Diagrams

Classes

classDiagram
    class ClassName {
        +String publicAttr
        -int privateAttr
        #bool protectedAttr
        ~float internalAttr
        +publicMethod() void
        -privateMethod(param) String
        +staticMethod()$ int
        +abstractMethod()* void
    }

Try in Editor →

Relationships

classDiagram
    A <|-- B    : Inheritance
    C *-- D     : Composition
    E o-- F     : Aggregation
    G --> H     : Association
    I ..> J     : Dependency
    K ..|> L    : Realization (implements)
    M "1" --> "*" N : Cardinality

Try in Editor →

Annotations

classDiagram
    class MyInterface {
        <<interface>>
    }
    class MyAbstract {
        <<abstract>>
    }
    class MyEnum {
        <<enumeration>>
        VALUE_A
        VALUE_B
    }
    class MyService {
        <<service>>
    }

Try in Editor →

Generics

classDiagram
    class List~T~ {
        +add(item T) void
    }

Try in Editor →

State Diagrams

stateDiagram-v2
    direction LR
    [*] --> Active
    Active --> Inactive : disable
    Inactive --> Active : enable
    Active --> [*] : delete

    state Active {
        [*] --> Running
        Running --> Paused : pause
        Paused --> Running : resume
    }

    state check <<choice>>
    Active --> check
    check --> Error : if failed
    check --> Success : if passed

    state fork_state <<fork>>
    state join_state <<join>>
    Active --> fork_state
    fork_state --> Task1
    fork_state --> Task2
    Task1 --> join_state
    Task2 --> join_state
    join_state --> Done

    note right of Active
        This is a note
    end note

Try in Editor →

ER Diagrams

erDiagram
    CUSTOMER {
        int id PK
        string name
        string email UK
    }
    ORDER {
        int id PK
        int customer_id FK
        date ordered_at
    }
    CUSTOMER ||--o{ ORDER : places

Try in Editor →

Cardinality

- || — exactly one

- o| — zero or one

- }| — one or more

- }o — zero or more

Relationship lines

- -- — solid (identifying)

- .. — dashed (non-identifying)

Pie Charts

pie title Distribution
    "Category A" : 40
    "Category B" : 30
    "Category C" : 20
    "Other" : 10

Try in Editor →

Add showData after pie to show raw values.

Mind Maps

mindmap
    root((Central Topic))
        Branch 1
            Sub-topic A
            Sub-topic B
        Branch 2
            Sub-topic C
                Detail 1
                Detail 2
        Branch 3

Try in Editor →

Git Graphs

gitGraph
    commit
    commit
    branch develop
    checkout develop
    commit
    commit
    checkout main
    merge develop
    commit

Try in Editor →

Timeline

timeline
    title History of Our Product
    2020 : Founded
         : MVP launched
    2021 : Series A funding
         : Reached 10k users
    2022 : Series B
         : International expansion
    2023 : 1M users milestone

Try in Editor →

Quadrant Charts

quadrantChart
    title Priority Matrix
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
    quadrant-1 Do First
    quadrant-2 Plan
    quadrant-3 Delegate
    quadrant-4 Eliminate
    Feature A: [0.8, 0.9]
    Feature B: [0.3, 0.7]
    Feature C: [0.6, 0.3]

Try in Editor →

Global Configuration

Theme

Set theme at the top of any diagram:

%%{init: {'theme': 'dark'}}%%
graph TD
    A --> B

Try in Editor →

Available themes: default, dark, forest, neutral, base.

Custom Theme Variables

%%{init: {'theme': 'base', 'themeVariables': {'primaryColor': '#ff6b6b', 'edgeLabelBackground':'#ffffff'}}}%%
graph TD
    A --> B

Try in Editor →

Tips

- Use %% for comments in any diagram

- Wrap special characters in quotes: A["Text with (parens)"]

- Use for line breaks in labels

- HTML entities work: #amp;, #lt;, #gt;

- Test diagrams in a live editor before committing

Resources

- Official Mermaid Documentation

- Mermaid GitHub Repository

Try all these diagrams in our free Mermaid Live Editor →

Try it now in our free Mermaid Live Editor →

← All Articles