Which diagram types does Mermaid support?

Flowcharts, sequence, class, state, ER and user journey diagrams, Gantt, pie, quadrant and XY charts, mind maps, timelines, Git graphs, Kanban boards and more. Mermaid Studio has a template for 14 of them.

Where can I use Mermaid?

GitHub, GitLab, Notion, Obsidian, Confluence (with an app) and many Markdown editors draw it. Anywhere else, export a picture here.

Why does my diagram not draw?

Usually a dangling arrow, a missing end, curly quotes or a label that needs quotes. The editor marks the line and explains the fix.

Mermaid cheat sheet

The Mermaid syntax you need most, with short examples. Paste any example into the editor above to see it drawn, then change it to fit your diagram.

How to use the cheat sheet

Find the diagram type below and copy its example.
Paste it into the editor above; the diagram draws as you type.
Change the words, then download SVG, PNG, PDF or Word.

What you get

Flowchart directions, shapes and arrows
Sequence messages, replies, loops and alternatives
Class, state and ER diagram relationships
Gantt, pie, mind map and timeline basics
Styling and comments

About the cheat sheet

Flowchart: direction and shapes

Start with flowchart and a direction: TD (top down), LR (left to right), BT or RL. The brackets around a label set the shape.

flowchart LR
  A[Box] --> B(Rounded)
  B --> C([Pill])
  C --> D{Decision}
  D --> E((Circle))
  D --> F[(Database)]

Flowchart: arrows and labels

Two dashes make an arrow. Dots make it dotted and equals signs make it thick. Put a label between pipes.

flowchart TD
  A --> B
  A --- C
  A -.-> D
  A ==> E
  A -->|yes| F

Flowchart: groups and quotes

Group nodes with subgraph ... end. Labels that contain brackets, colons or the word end need double quotes.

flowchart LR
  subgraph Shop
    A["Cart (3 items)"] --> B[Checkout]
  end
  B --> C["Payment: card"]

Sequence diagram: messages

->> is a solid arrow and -->> a dashed reply. actor draws a person, autonumber numbers the steps.

sequenceDiagram
  autonumber
  actor User
  User->>App: Sign in
  App->>API: POST /login
  API-->>App: 200 + token
  App-->>User: Welcome

Sequence diagram: alt, loop and notes

alt and else show alternatives, loop repeats, and Note adds a comment. Each block closes with end.

sequenceDiagram
  App->>API: Get order
  alt found
    API-->>App: 200
  else missing
    API-->>App: 404
  end
  loop every minute
    App->>API: Poll status
  end
  Note over App,API: Over HTTPS

Class diagram

List members inside braces; + is public and - private. <|-- is inheritance, *-- composition, --> association.

classDiagram
  class Order {
    +String id
    +total() Money
  }
  Customer "1" --> "*" Order : places
  Document <|-- Invoice

State diagram

[*] is the start or end point. Write one transition per line with an optional label after a colon.

stateDiagram-v2
  [*] --> Draft
  Draft --> Review : submit
  Review --> Published : approve
  Published --> [*]

ER diagram

The symbols at each end give the cardinality: || exactly one, o{ zero or more, |{ one or more. Attributes go inside braces.

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  CUSTOMER {
    int id PK
    string email
  }

Gantt chart

Set the date format, then list tasks with an id, a start (a date or after another id) and a length.

gantt
  dateFormat YYYY-MM-DD
  section Build
    Design  :d, 2026-11-02, 4d
    Develop :v, after d, 6d
    Launch  :milestone, after v, 0d

Pie chart, mind map and timeline

Pie charts take a label and a value per line. Mind maps and timelines use indentation and colons.

pie title Traffic
  "Search" : 52
  "Direct" : 21

mindmap
  root((Launch))
    Audience
    Channels

timeline
  2025 : Beta
  2026 : Launch

Styling

classDef defines a style and ::: applies it to a node. style changes a single node.

flowchart LR
  A:::done --> B
  classDef done fill:#dcfce7,stroke:#16a34a
  style B fill:#fee2e2

Comments and common mistakes

Lines starting with %% are comments. Most errors are an arrow with nothing after it, curly quotes pasted from a word processor, or a label that needs quotes. The editor above points to the line and suggests the fix.

%% This line is ignored
flowchart TD
  A["Total (incl. tax)"] --> B

Frequently asked questions

Which diagram types does Mermaid support?: Flowcharts, sequence, class, state, ER and user journey diagrams, Gantt, pie, quadrant and XY charts, mind maps, timelines, Git graphs, Kanban boards and more. Mermaid Studio has a template for 14 of them.
Where can I use Mermaid?: GitHub, GitLab, Notion, Obsidian, Confluence (with an app) and many Markdown editors draw it. Anywhere else, export a picture here.
Why does my diagram not draw?: Usually a dangling arrow, a missing end, curly quotes or a label that needs quotes. The editor marks the line and explains the fix.