Mermaid flowchart cheat sheet

Quick start

Keep ids stable and put display labels in quotes. The shape carries meaning; edges connect the ids.

flowchart LR
  D["Draft guide"] --> R{"Approved?"}
  R -->|Yes| P["Publish guide"]
  R -->|No| D

Syntax reference

Expanded shapes and quoted labels

The catalog covers every standard flowchart shape in the installed 11.15 renderer, including aliases. Use @{ shape: ... } for new shapes; older bracket notation remains valid. Quote labels containing punctuation.

flowchart TB
  A@{ shape: sl-rect, label: "Enter title" }
  B@{ shape: doc, label: "Draft document" }
  C@{ shape: diam, label: "Complete?" }
  D@{ shape: cyl, label: "Archive" }
  A --> B --> C
  C -->|Yes| D
  C -->|No| A

Link styles, lengths and text

Extra dashes request a longer minimum layout span. Circle and cross ends can communicate different meanings, but Mermaid does not enforce those semantics. Invisible links influence layout without drawing an edge.

flowchart LR
  A["Outline"] -->|Ready| B["Draft"]
  B -.-> C["Review"]
  C ==> D["Release"]
  A ----> D
  B o--o E["Checklist"]
  E x--x D
  C ~~~ E

Grouping with a local direction

Direction inside a subgraph works only where the global layout can respect it. When nodes connect outside their subgraph, Mermaid may inherit the parent direction. Use subgraph-to-subgraph edges when preserving local direction matters.

flowchart LR
  subgraph prep ["Preparation"]
    direction TB
    A["Outline"] --> B["Draft"]
  end
  subgraph review ["Review"]
    direction TB
    C["Check"] --> D["Approve"]
  end
  prep --> review

Classes, edge ids and markdown labels

ClassDef makes a reusable style. Apply it with class or :::; direct style targets one node. LinkStyle uses declaration order starting at zero, while a named edge can receive a class. Markdown labels provide emphasis without HTML labels.

flowchart LR
  A["`**Guide** draft`"]:::focus e1@--> B["Review"]
  B --> C["Publish"]
  classDef focus fill:#d3e5ff,stroke:#0070f3,color:#171717
  class B focus
  style C stroke-width:2px
  linkStyle 1 stroke:#0070f3,stroke-width:2px
  classDef edge stroke:#0070f3
  class e1 edge

Spacing and renderer selection

Node and rank spacing tune the default layout. Large graphs may benefit from ELK, but a host must supply the optional renderer. Icon packs also need host registration; ordinary shapes work without either extension.

---
config:
  flowchart:
    nodeSpacing: 35
    rankSpacing: 60
---
flowchart LR
  A["Write"] --> B["Review"] --> C["Publish"]

Common mistakes

flowchart LR
  A[Draft

flowchart LR
  A["Draft"] --> B["Review"]

Limitations

• Automatic layout determines exact positions; longer links request rank spans rather than fixed pixel lengths.
• External edges can override a subgraph’s direction.
• Icons require a registered pack, images require reachable assets, and ELK requires host registration.

Related cheat sheets

• Mermaid swimlane diagram cheat sheet →
• Mermaid class diagram cheat sheet →
• Mermaid Cheat Sheet →