Mermaid cheat sheet

The Mermaid syntax you actually need, for every diagram type — each snippet is valid, copy-paste-ready, and rendered live. Click “Open in editor” on any example to keep working on it visually, in code, or with AI.

Flowchart — nodes, shapes & edges

Open in editor

A flowchart starts with `flowchart` plus a direction (TD = top-down, LR = left-right). Brackets pick the node shape; the arrow style sets the edge type, and |text| adds an edge label.

flowchart TD
    A[Rectangle] --> B(Rounded)
    B --> C{Decision}
    C -->|yes| D[[Subroutine]]
    C -->|no| E[(Database)]
    E --> F((Circle))
    F -.dotted.-> G>Flag]
    G ==thick==> H[End]

Flowchart — subgraphs & styling

Open in editor

subgraph groups nodes into a labelled box — ideal for systems and layers. `style` overrides a single node's fill and stroke.

flowchart LR
    subgraph Frontend
      UI[React app]
    end
    subgraph Backend
      API[REST API] --> DB[(Postgres)]
    end
    UI --> API
    style UI fill:#ede9fe,stroke:#7c3aed

Sequence diagram

Open in editor

Participants appear in declaration order. ->> is a solid arrow, -->> a dashed reply; activate/deactivate draw lifeline bars, and alt/else models branches.

sequenceDiagram
    participant U as User
    participant A as API
    participant D as DB
    U->>A: POST /login
    activate A
    A->>D: SELECT user
    D-->>A: row
    alt valid password
      A-->>U: 200 + token
    else invalid
      A-->>U: 401
    end
    deactivate A

Class diagram

Open in editor

Declare classes with members and methods inside braces; + and - mark visibility. <|-- is inheritance, --> an association with optional cardinalities.

classDiagram
    class Customer {
      +String name
      +String email
    }
    class Order {
      +String id
      +total() float
    }
    Customer "1" --> "*" Order : places
    Order <|-- SubscriptionOrder

Entity-relationship (ER) diagram

Open in editor

Relationships read left to right: || = exactly one, o{ = zero or more, |{ = one or more. Attribute blocks list column type then name.

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ ORDER_ITEM : contains
    PRODUCT ||--o{ ORDER_ITEM : "ordered in"
    CUSTOMER {
      string name
      string email
    }

State diagram

Open in editor

[*] is both the initial and final state. Arrows are transitions; the text after the colon is the triggering event.

stateDiagram-v2
    [*] --> Idle
    Idle --> Loading : fetch
    Loading --> Success
    Loading --> Error : timeout
    Error --> Idle : retry
    Success --> [*]

Gantt chart

Open in editor

Set dateFormat once, then list tasks per section as `name : id, start, duration`. `after <id>` chains tasks; `milestone` marks a point in time.

gantt
    title Release plan
    dateFormat YYYY-MM-DD
    section Build
      Design    :a1, 2026-06-01, 5d
      Implement :a2, after a1, 10d
    section Ship
      QA        :a3, after a2, 4d
      Launch    :milestone, after a3, 0d

Pie chart

Open in editor

One quoted label and a value per line — Mermaid computes the percentages for you.

pie title Traffic sources
    "Organic" : 52
    "Direct" : 28
    "Referral" : 20

Git graph

Open in editor

commit, branch, checkout, and merge mirror the real Git commands; Mermaid lays out the railway for you.

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

Comments, themes & direction

Open in editor

%% starts a comment. An %%{init: …}%% directive on the first line configures the renderer — for example the built-in themes default, neutral, dark, forest, and base.

%%{init: {'theme': 'forest'}}%%
flowchart LR
    %% this is a comment
    A[Themed] --> B[Diagram]

Keep this page closed next time

MermaidCreatorwrites Mermaid for you: drag nodes on a canvas, or describe the diagram in plain English and let AI draft it. The syntax stays clean and diffable — you just don't have to memorise it. Also see the ready-made templates and the free Mermaid to PNG, SVG, and PDF converters.

Open the free editor