Mermaid syntax cheatsheet

Het kortste diagram dat werkt

Een flowchart heeft één declaratieregel en één pijl nodig. TD betekent van boven naar beneden; gebruik LR voor links naar rechts, wat beter past bij brede processen.

flowchart TD
  A[Start] --> B{Ready?}
  B -->|Yes| C[Ship it]
  B -->|No| A

A, B en C zijn knoop-id's — interne namen, nooit getekend. De tekst tussen haakjes is het label, en de stijl van de haakjes bepaalt de vorm.

Knoopvormen

De vorm wordt bepaald door het scheidingsteken rond het label. Dit zijn de vormen die het onthouden waard zijn:

💡Zet het label tussen aanhalingstekens als het haakjes, dubbele punten of aanhalingstekens bevat: A["Load (raw) data"]. Zonder aanhalingstekens ziet de parser je leestekens aan voor syntax.

Pijlen

De lengte van een pijl is ook betekenisvol: --> is één rang, ---> duwt het doel één rang verder naar beneden. Het is de eenvoudigste layoutcontrole die mermaid biedt.

Groeperen met subgraphs

Een subgraph tekent een gelabeld kader rond knopen. Subgraphs kunnen genest worden, en pijlen mogen vrij hun grenzen kruisen.

flowchart LR
  subgraph api["API"]
    H[Handler] --> S[(Postgres)]
  end
  subgraph worker["Worker"]
    Q[Queue] --> W[Job]
  end
  H --> Q

Kleur en styling

style kleurt één knoop. classDef plus class kleurt een hele set, wat handig is vanaf een stuk of drie, vier knopen.

flowchart TD
  A[OK] --> B[Failed]
  style A fill:#16a34a,stroke:#333,color:#fff
  classDef bad fill:#dc2626,stroke:#333,color:#fff
  class B bad

Kleuren maken deel uit van de diagrambron, dus ze overleven export en reizen mee met het bestand. Niets hier hangt af van een themainstelling in de tool die het rendert.

Eén voorbeeld per diagramtype

Sequence diagram

sequenceDiagram
  participant User
  participant API
  participant DB
  User->>API: request
  API->>DB: query
  DB-->>API: rows
  API-->>User: response

Class diagram

classDiagram
  class Animal {
    +String name
    +move()
  }
  class Dog {
    +bark()
  }
  Animal <|-- Dog

State diagram

stateDiagram-v2
  [*] --> Idle
  Idle --> Running: start
  Running --> Idle: stop
  Running --> [*]: finish

Entity relationship diagram

erDiagram
  CUSTOMER ||--o{ ORDER : places
  ORDER ||--|{ LINE_ITEM : contains
  CUSTOMER {
    string name
    string email
  }

Gantt-diagram

gantt
  title Project
  dateFormat YYYY-MM-DD
  section Phase 1
  Task 1 :a1, 2026-01-01, 5d
  Task 2 :after a1, 5d

Waar mermaid vanzelf rendert

• GitHub — een fenced ```mermaid-blok rendert in issues, pull requests, reacties en README-bestanden.
• GitLab — hetzelfde fenced blok, in issues, merge requests en de wiki.
• Notion — een codeblok met de taal ingesteld op Mermaid rendert naast de bron.
• Obsidian — een fenced mermaid-blok rendert in voorbeeldmodus.
• Docs-sites — Docusaurus, MkDocs Material en VitePress ondersteunen allemaal mermaid-blokken.

Dat is de echte reden om diagrammen als mermaid te bewaren in plaats van als afbeelding: het diagram staat in hetzelfde tekstbestand als wat het beschrijft, en een code review kan zien wat erin veranderd is.