Mermaid Cheat Sheet

Complete quick reference for all Mermaid.js diagram syntax. Bookmark this page for fast access to every diagram type.

Flowchart Syntax Sequence Diagram Syntax Class Diagram Syntax State Diagram Syntax Gantt Chart Syntax ER Diagram Syntax Journey Map Syntax Git Graph Syntax Mindmap Syntax Pie Chart Syntax Timeline Syntax Kanban Syntax Quadrant Chart Syntax Sankey Diagram Syntax XY Chart Syntax Block Diagram Syntax Architecture Diagram Syntax Packet Diagram Syntax

Flowchart Syntax

Visualize processes, workflows, and algorithms with nodes and directional arrows. Perfect for business processes and decision trees.

Basic top-down flow

Try in Editor

graph TD
    A[Start] --> B[End]

Decision branching

Try in Editor

graph TD
    A{Decision} -->|Yes| B[OK]
    A -->|No| C[Cancel]

Subgraph grouping

Try in Editor

graph LR
    subgraph Group
        A --> B
    end

Node shapes

Try in Editor

graph TD
    A[Rectangle] --> B(Rounded)
    B --> C{Diamond}
    C --> D((Circle))
    C --> E([Stadium])

Sequence Diagram Syntax

Document interactions between different actors or systems over time. Ideal for API documentation and system design.

Basic message exchange

Try in Editor

sequenceDiagram
    Alice->>Bob: Hello
    Bob-->>Alice: Hi

Loop block

Try in Editor

sequenceDiagram
    loop Every minute
        Alice->>Bob: Ping
    end

Alternative flows

Try in Editor

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

Activation boxes

Try in Editor

sequenceDiagram
    Alice->>+Bob: Request
    Bob-->>-Alice: Response

Class Diagram Syntax

Model object-oriented systems with classes, attributes, and relationships. Essential for software architecture planning.

Class with members

Try in Editor

classDiagram
    class Animal {
        +String name
        +makeSound()
    }

Inheritance relationships

Try in Editor

classDiagram
    Animal <|-- Dog
    Animal <|-- Cat
    Animal : +String name

Cardinality notation

Try in Editor

classDiagram
    Customer "1" --> "*" Order

State Diagram Syntax

Represent state transitions in systems or applications. Great for modeling lifecycle states and workflows.

Basic state transitions

Try in Editor

stateDiagram-v2
    [*] --> Active
    Active --> [*]

Labeled transitions

Try in Editor

stateDiagram-v2
    Idle --> Running: start
    Running --> Idle: stop

Nested composite state

Try in Editor

stateDiagram-v2
    state Active {
        [*] --> Working
        Working --> Paused
    }

Gantt Chart Syntax

Plan and track project timelines with tasks and dependencies. Perfect for project management and scheduling.

Basic project schedule

Try in Editor

gantt
    title Project
    dateFormat YYYY-MM-DD
    section Phase 1
    Task A :a1, 2024-01-01, 30d
    Task B :after a1, 20d

Task status markers

Try in Editor

gantt
    Task Done :done, d1, 2024-01-01, 10d
    Task Active :active, 2024-01-11, 10d
    Task Crit :crit, 2024-01-21, 10d

ER Diagram Syntax

Design database schemas with entities and relationships. Ideal for database modeling and documentation.

Entity relationships

Try in Editor

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE_ITEM : contains

Entity with attributes

Try in Editor

erDiagram
    CUSTOMER {
        int id PK
        string name
        string email
    }

Journey Map Syntax

Map user experiences and interactions across touchpoints. Excellent for UX design and customer journey mapping.

User experience journey

Try in Editor

journey
    title User Flow
    section Login
      Visit site: 5: User
      Enter credentials: 3: User
      Dashboard: 4: User

Git Graph Syntax

Visualize Git branching strategies and commit histories. Helpful for explaining version control workflows.

Basic branch and merge

Try in Editor

gitGraph
    commit
    branch develop
    commit
    checkout main
    merge develop

Feature branch workflow

Try in Editor

gitGraph
    commit
    branch feature
    commit
    commit
    checkout main
    merge feature
    commit

Mindmap Syntax

Organize ideas, brainstorm concepts, and create hierarchical visual structures. Perfect for planning and knowledge mapping.

Central topic with branches

Try in Editor

mindmap
  root((Central))
    Topic A
      Detail 1
      Detail 2
    Topic B
      Detail 3

Pie Chart Syntax

Display proportional data distributions with circular charts. Ideal for showing percentages and market share breakdowns.

Budget distribution

Try in Editor

pie title Budget
    "Engineering" : 45
    "Marketing" : 25
    "Operations" : 30

Timeline Syntax

Visualize chronological events and milestones along a time axis. Great for project histories and roadmaps.

Chronological events

Try in Editor

timeline
    title History
    2020 : Event A
    2021 : Event B
         : Event C
    2022 : Event D

Kanban Syntax

Organize tasks into columns representing workflow stages. Perfect for agile project management and task tracking.

Task board columns

Try in Editor

kanban
  Todo
    Task 1
    Task 2
  In Progress
    Task 3
  Done
    Task 4

Quadrant Chart Syntax

Plot items on a two-axis grid to compare and prioritize. Ideal for feature prioritization and strategic analysis.

Priority matrix

Try in Editor

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

Sankey Diagram Syntax

Visualize flow quantities between nodes with proportional arrows. Perfect for energy flows, budget allocation, and conversion funnels.

Flow quantities between nodes

Try in Editor

sankey-beta

Source,Target,Value
A,X,5
A,Y,3
B,X,2
B,Y,8

XY Chart Syntax

Create bar charts and line charts with customizable axes. Ideal for data visualization and trend analysis.

Bar and line chart

Try in Editor

xychart-beta
    title "Sales"
    x-axis [Jan, Feb, Mar, Apr]
    y-axis "Revenue" 0 --> 100
    bar [30, 50, 70, 90]
    line [30, 50, 70, 90]

Block Diagram Syntax

Build structured layouts with blocks arranged in columns and rows. Great for system architecture and component overviews.

Columnar block layout

Try in Editor

block-beta
columns 3
  a["A"]:3
  b["B"] c["C"] d["D"]

Architecture Diagram Syntax

Design cloud and system architecture with service icons and connections. Perfect for infrastructure documentation.

Cloud service topology

Try in Editor

architecture-beta
    group api(cloud)[API]
    service web(internet)[Web] in api
    service db(database)[DB]
    web:R --> L:db

Packet Diagram Syntax

Visualize network protocol packet structures with bit-level field layouts. Essential for network protocol documentation.

Network packet field layout

Try in Editor

packet-beta
  0-15: "Source Port"
  16-31: "Dest Port"
  32-63: "Sequence Number"

Try in Editor