Mermaid syntaks cheat sheet

Det korteste diagram, der virker

Et flowchart kræver én deklarationslinje og én pil. TD betyder top-down; brug LR til venstre-til-højre, hvilket passer bedre til brede processer.

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

A, B og C er node-id'er — interne navne, der aldrig tegnes. Teksten i parenteserne er labelen, og parentes-stilen er det, der bestemmer formen.

Node-former

Formen vælges af parret af afgrænsere omkring labelen. Her er dem, det er værd at huske:

💡Sæt labelen i citationstegn, når den indeholder parenteser, kolon eller citationstegn: A["Load (raw) data"]. Uden citationstegn opfatter parseren din tegnsætning som syntaks.

Pile

Pilens længde betyder også noget: --> er ét niveau, ---> skubber målet ét niveau længere ned. Det er den simpleste layoutkontrol, mermaid giver dig.

Gruppering med subgrafer

En subgraph tegner en mærket boks omkring noder. Subgrafer kan indlejres, og pile kan frit krydse deres grænser.

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

Farve og styling

style farver én node. classDef plus class farver et sæt af dem, hvilket er det, du vil have, når du kommer over tre-fire noder.

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

Farver er en del af diagramkilden, så de overlever eksport og følger med filen. Intet her afhænger af en temaindstilling i det værktøj, der gengiver det.

Ét eksempel pr. 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

Hvor mermaid gengives af sig selv

• GitHub — en indrammet ```mermaid-blok gengives i issues, pull requests, kommentarer og README-filer.
• GitLab — samme indrammede blok, i issues, merge requests og wikien.
• Notion — en kodeblok med sproget sat til Mermaid gengives ved siden af kilden.
• Obsidian — en indrammet mermaid-blok gengives i preview-tilstand.
• Dokumentationssider — Docusaurus, MkDocs Material og VitePress understøtter alle mermaid-blokke.

Det er den egentlige grund til at holde diagrammer som mermaid frem for som billeder: diagrammet lever i samme tekstfil som det, det beskriver, og en kodegennemgang kan se, hvad der er ændret i det.