Mermaid-diagram i Markdown: flödesscheman, sekvensdiagram med mera

Diagram förklarar processer, arkitekturer och tidslinjer bättre än stycken av text. Men att rita dem i ett grafikprogram innebär att exportera bilder, lagra dem bredvid dokumentationen och rita om allt när något ändras.

Mermaid löser det: du beskriver diagrammet med några rader text i din Markdown-fil, och förhandsvisningsverktyget ritar det. Diagrammet ligger i samma fil, syns i diffar och uppdateras lika lätt som en mening. GitHub, GitLab, Obsidian, många dokumentationsgeneratorer och Markdown Preview Editor renderar Mermaid direkt.

Så lägger du till ett Mermaid-diagram

Skapa ett kodblock och ange språket mermaid:

markdown```mermaid
flowchart LR
  A[Skriv] --> B[Granska]
  B --> C{Klart?}
  C -- ja --> D[Exportera]
  C -- nej --> A
```

Förhandsvisningen gör om det till:

Den första raden anger diagramtypen. Allt efter den beskriver noder och kopplingar.

Flödesscheman

Flödesscheman är den mest använda diagramtypen. Riktningen anges efter nyckelordet: TD eller TB (uppifrån och ned), BT, LR (vänster till höger) eller RL.

mermaidflowchart TD
  start([Start]) --> input[/Läs filen/]
  input --> valid{Är den giltig?}
  valid -- Ja --> save[(Spara i databasen)]
  valid -- Nej --> error[Visa ett fel]
  error --> input

Parenteserna runt en etikett bestämmer nodens form:

Kopplingar: --> är en pil, --- en linje utan pil, -.-> en prickad pil och ==> en tjock pil. Lägg till en etikett med -- text --> eller -->|text|.

Gruppera noder som hör ihop med subgraph:

mermaidflowchart LR
  subgraph Browser
    editor[Redigerare] --> preview[Förhandsvisning]
  end
  preview --> export[HTML / PDF]

Sekvensdiagram

Sekvensdiagram visar hur deltagare utbyter meddelanden över tid – perfekt för API:er, inloggningsflöden och användarresor.

mermaidsequenceDiagram
  participant U as Användare
  participant A as App
  participant S as Server
  U->>A: Klickar på "Logga in"
  A->>S: POST /login
  S-->>A: 200 OK + token
  A-->>U: Visar översikten
  Note over A,S: Token går ut efter 1 timme

->> är en heldragen pil (en förfrågan), -->> en streckad pil (ett svar). Note over, Note left of och Note right of lägger till kommentarer. Använd blocken loop, alt/else och opt för att visa upprepning och förgreningar.

Gantt-scheman

Ett Gantt-schema gör en lista med uppgifter till en tidslinje. Uppgifter kan starta på ett datum eller after en annan uppgift.

mermaidgantt
  title Dokumentationssprint
  dateFormat YYYY-MM-DD
  section Skrivande
  Disposition       :done,   a1, 2026-10-01, 2d
  Första utkast     :active, a2, after a1, 4d
  section Granskning
  Kollegagranskning :        a3, after a2, 3d
  Publicering       :milestone, after a3, 0d

Tillståndsdiagram

Tillståndsdiagram beskriver hur något rör sig mellan olika tillstånd – en beställning, ett dokument, en UI-komponent.

mermaidstateDiagram-v2
  [*] --> Utkast
  Utkast --> Granskning : skicka in
  Granskning --> Utkast : ändringar begärs
  Granskning --> Publicerad : godkänn
  Publicerad --> [*]

Cirkeldiagram

För en snabb bild av andelar tar ett cirkeldiagram en rad per sektor:

mermaidpie title Vart dokumentationstiden tar vägen
  "Skriva" : 45
  "Formatera" : 15
  "Hålla diagrammen uppdaterade" : 40

Mermaid stöder också klassdiagram, ER-diagram, tankekartor, tidslinjer, Git-grafer, kvadrantdiagram med mera. Syntaxen för varje typ finns dokumenterad på Mermaids officiella webbplats.

Tips för tydliga diagram

• Håll dem små. Ett diagram med fler än 15–20 noder blir svårläst. Dela upp det i flera diagram, ett per idé.
• Välj riktning medvetet. LR passar processer med få steg; TD passar hierarkier och långa flöden, särskilt på smala skärmar.
• Använd korta ID:n och läsbara etiketter. Skriv auth[Kontrollera sessionen] i stället för att använda etiketten som ID – då blir kopplingarna korta.
• Sätt etiketter med specialtecken inom citattecken: A["Pris: $5 (inkl. moms)"].
• Lägg till kommentarer med %% i början av en rad. De ignoreras när diagrammet ritas.
• Förhandsvisa medan du skriver. En saknad pil eller parentes förstör hela diagrammet, så en förhandsvisning i realtid sparar mycket gissande. I Markdown Preview Editor ritas diagrammet om medan du redigerar, och knappen Mermaid-diagram i det avancerade verktygsfältet infogar en startmall.

Dela dokument med diagram

När du exporterar ett dokument till HTML eller PDF följer diagrammen med som bilder, så läsaren behöver inte ha Mermaid installerat. För formler bredvid dina diagram, se hur du skriver matematik i Markdown, och för allt annat – tabeller, uppgiftslistor, informationsrutor – ha Markdown-fusklappen nära till hands.