Mermaid Syntax Cheat Sheet

Quick reference for all Mermaid diagram types. Copy any snippet and paste it into the editor.

Flowchart

Full guide →
Top-down flow
flowchart TD
    A --> B --> C
Left-right flow
flowchart LR
    A --> B --> C
Rectangle node
A[Text]
Rounded node
A(Text)
Stadium node
A([Text])
Diamond (decision)
A{Text}
Hexagon
A{{Text}}
Circle
A((Text))
Arrow
A --> B
Arrow with label
A -->|label| B
Dotted arrow
A -.-> B
Thick arrow
A ==> B
Subgraph
subgraph Title
    A --> B
end

Sequence Diagram

Full guide →
Solid arrow
A->>B: Message
Dashed arrow
A-->>B: Response
Solid cross
A-xB: Failed
Participant alias
participant A as Alice
Actor
actor U as User
Activation
activate A
...
deactivate A
Note
Note over A,B: Text
Loop
loop Every minute
    A->>B: ping
end
Alt / else
alt Success
    A->>B: ok
else Error
    A->>B: fail
end
Parallel
par Task 1
    A->>B: msg
and Task 2
    A->>C: msg
end

ER Diagram

Full guide →
Entity with attrs
USER {
    uuid id PK
    string email UK
    string name
}
One to many
USER ||--o{ ORDER : "places"
One to one
USER ||--|| PROFILE : "has"
Many to many
STUDENT }o--o{ COURSE : "enrolls"
Primary key
string id PK
Foreign key
uuid user_id FK
Unique key
string email UK
Comment
string name "Display name"
Identifying rel
A ||--|{ B : contains
Non-identifying rel
A ||..o{ B : references

Class Diagram

Full guide →
Class
class Animal {
    +String name
    +makeSound() void
}
Inheritance
Animal <|-- Dog
Composition
Car *-- Engine
Aggregation
Library o-- Book
Association
Teacher --> Student
Dependency
Class1 ..> Class2
Interface
class Shape {
    <<interface>>
    +area() float
}
Abstract
class Animal {
    <<abstract>>
}

Gantt Chart

Full guide →
Header
gantt
    title Project Plan
    dateFormat YYYY-MM-DD
Section
section Design
Task
Design mockups :a1, 2024-01-01, 7d
After another
Build UI :after a1, 5d
Active task
Development :active, a2, 2024-01-08, 10d
Done task
Planning :done, 2024-01-01, 3d
Critical task
Deploy :crit, 2024-01-20, 2d
Milestone
Launch :milestone, 2024-01-22, 0d

State Diagram

Full guide →
State
stateDiagram-v2
    [*] --> Idle
Transition
Idle --> Processing : start
End state
Done --> [*]
Composite state
state Active {
    [*] --> Running
    Running --> Paused
}
Fork / join
state fork <<fork>>
fork --> State1
fork --> State2
Choice
state check <<choice>>
check --> Yes
check --> No
Note
note right of Idle : Waiting for input

Pie Chart

Full guide →
Basic pie
pie title Market Share
    "Chrome" : 65
    "Safari" : 19
    "Firefox" : 4
Show data
pie showData
    ...

Mind Map

Full guide →
Root
mindmap
    root((Topic))
Branch
        Child 1
            Grandchild
Cloud shape
    )Cloud node(
Bang shape
    ))Urgent((
Hexagon shape
    {{Hexagon}}

Git Graph

Full guide →
Commit
gitGraph
    commit id: "initial"
Branch
branch develop
commit id: "feat"
Checkout
checkout main
Merge
merge develop
Cherry-pick
cherry-pick id: "abc"
Tag
commit id: "release" tag: "v1.0"

Timeline

Full guide →
Basic
timeline
    title History
    2020 : Event A
    2021 : Event B : Event C
    2022 : Event D
Section
section Phase 1
    2020 : Milestone

Quadrant Chart

Full guide →
Setup
quadrantChart
    title Priority Matrix
    x-axis Low Effort --> High Effort
    y-axis Low Impact --> High Impact
Data point
    Quick wins: [0.2, 0.8]
Quadrant labels
    quadrant-1 Do First
    quadrant-2 Schedule
    quadrant-3 Delegate
    quadrant-4 Eliminate

XY Chart

Full guide →
Bar chart
xychart-beta
    title "Sales"
    x-axis [Jan, Feb, Mar]
    y-axis "Revenue" 0 --> 100
    bar [30, 60, 90]
Line chart
    line [20, 50, 80]

Try These Snippets Live

Open the editor with autocomplete, live preview, and export to PNG, SVG, or PDF.

Open Editor