Mermaid-syntaks jukselapp

Det korteste diagrammet som virker

Et flytskjema trenger én deklarasjonslinje og én pil. TD betyr ovenfra og ned; bruk LR for venstre-til-høyre, som passer bedre for brede prosesser.

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

A, B og C er node-IDer – interne navn, aldri tegnet. Teksten i klammer er etiketten, og klamme-stilen er det som velger formen.

Nodeformer

Formen velges av avgrensningsparet rundt etiketten. Dette er de verdt å huske:

💡Sett etiketten i anførselstegn når den inneholder klammer, kolon eller anførselstegn: A["Load (raw) data"]. Uten anførselstegn tolker parseren tegnsettingen din som syntaks.

Piler

Pillengde har også betydning: --> er ett nivå, ---> skyver målet ett nivå lenger ned. Det er den enkleste layoutkontrollen mermaid gir deg.

Gruppering med undergrafer

En subgraph tegner en merket boks rundt noder. Undergrafer kan nestes, og piler kan krysse grensene deres fritt.

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

Farge og styling

style fargelegger én node. classDef pluss class fargelegger et sett med dem, som er det du vil ha etter tre eller 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

Farger er en del av diagramkilden, så de overlever eksport og følger med filen. Ingenting her avhenger av en temainnstilling i verktøyet som gjengir det.

Ett eksempel per diagramtype

Sekvensdiagram

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

Klassediagram

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

Tilstandsdiagram

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

Entitetsrelasjonsdiagram

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 gjengis av seg selv

• GitHub — en avgrenset ```mermaid-blokk gjengis i issues, pull requests, kommentarer og README-filer.
• GitLab — samme avgrensede blokk, i issues, merge requests og wikien.
• Notion — en kodeblokk med språket satt til Mermaid gjengis ved siden av kilden.
• Obsidian — en avgrenset mermaid-blokk gjengis i forhåndsvisningsmodus.
• Dokumentasjonssider — Docusaurus, MkDocs Material og VitePress støtter alle mermaid-blokker.

Det er den egentlige grunnen til å holde diagrammer som mermaid i stedet for som bilder: diagrammet lever i samme tekstfil som det det beskriver, og en kodegjennomgang kan se hva som ble endret i det.