Mermaid-syntax: referensblad

Det kortaste diagrammet som fungerar

Ett flödesdiagram behöver en deklarationsrad och en pil. TD betyder uppifrån och ner; använd LR för vänster-till-höger, vilket passar breda processer bättre.

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

A, B och C är nod-id:n — interna namn, som aldrig ritas ut. Texten i hakparenteserna är etiketten, och det är parentesens stil som avgör formen.

Nodformer

Formen väljs av avgränsarparet runt etiketten. Dessa är värda att komma ihåg:

💡Citera etiketten när den innehåller hakparenteser, kolon eller citattecken: A["Load (raw) data"]. Utan citattecken tolkar parsern din interpunktion som syntax.

Pilar

Pilens längd har också betydelse: --> är en rang, ---> skjuter målet en rang längre ner. Det är den enklaste layoutkontrollen mermaid ger dig.

Gruppering med undergrafer

En subgraph ritar en märkt ruta runt noder. Undergrafer kan nästlas, och pilar får korsa deras gränser fritt.

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

Färg och styling

style målar en nod. classDef plus class målar en grupp av dem, vilket är vad du vill ha efter tre eller fyra 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

Färger är en del av diagrammets källkod, så de överlever export och följer med filen. Inget här beror på en temainställning i verktyget som renderar det.

Ett exempel per diagramtyp

Sekvensdiagram

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

Klassdiagram

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

Tillståndsdiagram

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

ER-diagram

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

Gantt-schema

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

Var mermaid renderas av sig själv

• GitHub — ett inramat ```mermaid-block renderas i issues, pull requests, kommentarer och README-filer.
• GitLab — samma inramade block, i issues, merge requests och wikin.
• Notion — ett kodblock med språket inställt på Mermaid renderas bredvid källkoden.
• Obsidian — ett inramat mermaid-block renderas i förhandsgranskningsläge.
• Dokumentationssajter — Docusaurus, MkDocs Material och VitePress stödjer alla mermaid-block.

Det är den verkliga anledningen till att hålla diagram som mermaid snarare än som bilder: diagrammet lever i samma textfil som det den beskriver, och en kodgranskning kan se vad som ändrats i det.