Mermaid syntax in two minutes
Every diagram starts with its type on the first line, then one statement per line. Indentation is for readability only.
| Diagram | First line | Core syntax |
|---|---|---|
| Flowchart | flowchart TD (or LR) | A[Box] --> B{Decision}, B -- label --> C, (round), ((circle)) |
| Sequence | sequenceDiagram | Alice->>Bob: request, Bob-->>Alice: reply, loop/alt … end |
| Class | classDiagram | Animal <|-- Dog, members in class X { } |
| State | stateDiagram-v2 | [*] --> Idle, Idle --> Busy: event |
| ER | erDiagram | A ||--o{ B : has (crow’s foot cardinality) |
| Gantt | gantt | dateFormat, section, Task :id, 2026-10-01, 5d |
| Pie | pie title … | "Label" : 42 |
Common errors
- Parentheses or quotes in labels: wrap the label in double quotes,
A["Call API (v2)"]. - The word
endas a node id breaks flowcharts; capitalise it or quote it. - Wrong arrow for the type:
-->is a flowchart arrow,->>is a sequence message. - Gantt dates must match the
dateFormatyou declared.
Using diagrams in Markdown
Put the code in a fenced block tagged mermaid. GitHub has rendered these in READMEs, issues and wikis since 2022; GitLab, Azure DevOps, Obsidian, Notion and Docusaurus do as well. The Markdown editor here previews them too.