Mermaid Cheat Sheet: Syntax Quick Reference
The Mermaid snippets you look up again and again, collected in one quick reference across every major diagram type.
Once you use Mermaid regularly, you stop needing tutorials and start needing a quick reference - the exact syntax for a decision node, the arrow for a response message, the marker for a foreign key. This cheat sheet collects the most-reached-for Mermaid syntax across all the major diagram types in one place, so you can look up what you need and get back to work. It is organized by diagram type, with the essential patterns for each.
Keep this alongside the live editor at /diagram-tools/mermaid-editor, where you can paste any of these snippets and see them render immediately, tweaking until they are exactly right. Every diagram starts with a type-declaration keyword on its own line, and the rest follows that type's grammar. Let us run through each type's essentials, from the flowcharts you will write most to the gantt charts you will write occasionally.
Flowcharts
Flowcharts start with `flowchart TD` (top-down) or `flowchart LR` (left-to-right). The building block is a connection: `A --> B` makes two nodes and an arrow. Node shapes come from bracket style - `A[Rectangle]`, `A(Rounded)`, `A{Decision diamond}`, `A((Circle))`, and `A[(Database)]`. Label an arrow with pipes: `A -->|Yes| B`. Chain nodes with `A --> B --> C`. Group related nodes in a `subgraph Title ... end` block.
The arrow variants cover most needs: `-->` solid arrow, `---` line with no arrowhead, `-.->` dashed arrow, and `==>` thick arrow. For a decision, the pattern is `B{Approved?}` with `B -->|Yes| C` and `B -->|No| D`. Style a node with `style A fill:#f9f,stroke:#333`, or define a reusable `classDef` and apply it to several nodes. That handful of patterns covers the vast majority of flowcharts you will ever write.
Sequence and class diagrams
Sequence diagrams start with `sequenceDiagram`. The essential message is `Alice->>John: Hello` (solid, synchronous), with `John-->>Alice: Hi` for a dashed response. Activate a lifeline with `+` and `-`: `Alice->>+John: Ask` and `John-->>-Alice: Answer`. Wrap repeated messages in `loop Label ... end`, branch with `alt Condition ... else ... end`, and annotate with `Note over Alice,John: text`. Declare participants explicitly with `participant A as Alice` to control order.
Class diagrams start with `classDiagram`. Define a class with `class Animal` and a brace block of members like `+String name` and `+eat()`, where `+` is public, `-` private, `#` protected. Relationships: `Animal <|-- Dog` for inheritance, `Car *-- Engine` for composition, `Team o-- Player` for aggregation, `Driver --> Car` for association, and `Order ..> Product` for dependency. Add multiplicity in quotes: `Customer "1" --> "*" Order : places`. Mark an interface with `<<interface>>` inside the class block.
The snippets you reach for most
Here are the highest-frequency patterns across types, the ones worth committing to memory because you use them constantly.
- Flowchart decision: `A{Question?} -->|Yes| B` and `A -->|No| C`.
- Sequence call and response: `Alice->>John: Request` then `John-->>Alice: Response`.
- Sequence conditional: `alt Success ... else Failure ... end`.
- Class inheritance: `Parent <|-- Child`.
- ER relationship: `CUSTOMER ||--o{ ORDER : places` (one to zero-or-more).
- State transition: `[*] --> Idle` and `Idle --> Active : start`.
- Gantt dependency: `Build :dev1, after spec1, 10d`.
- Direction switch: change `TD` to `LR` to flip any flowchart's layout.
ER, state, and gantt
ER diagrams start with `erDiagram`. Define an entity with a name and a brace block of `type name` attribute lines, marking keys with `PK` and `FK` (like `int id PK`). Relationships use crow's foot cardinality: `||` exactly one, `o|` zero or one, `}|` one or more, `}o` zero or more. A full relationship reads `CUSTOMER ||--o{ ORDER : places`. Read each end toward the other entity to interpret the cardinality.
State diagrams start with `stateDiagram-v2`. The start and end are both `[*]`: `[*] --> Idle` begins and `Done --> [*]` ends. A transition with an event is `Idle --> Active : start`. Nest sub-states in `state Name { ... }`, and use a descriptive label with `state "Long label" as short`. Gantt charts start with `gantt`, need a `dateFormat YYYY-MM-DD`, group tasks under `section Name`, and define tasks like `Task :id1, 2026-08-01, 5d` or with a dependency `Task :id2, after id1, 4d`. Mark a milestone with the `milestone` keyword and `0d`.
That covers the essentials of every major Mermaid diagram type. When you want to go beyond quick reference and refine a diagram's layout precisely - or turn a text diagram into a polished export - import it into Atlas Diagram Studio and edit visually on the canvas at /diagrams, or generate a first draft from a description with the AI diagram generator at /diagram-tools/ai-diagram-generator. Bookmark this page and the live editor at /diagram-tools/mermaid-editor, and you will rarely need to look further for everyday Mermaid work.