Någonstans hos er finns ett flödesschema som beskriver en process. Du vet vilket jag menar. Det där som ingen rört på två år, som bara en enda person kan redigera, och som ingen hittar när det väl behövs. Och det värsta: Det stämmer inte längre. Verkligheten har gått vidare, men diagrammet ligger kvar och ljuger.
Vi har alla varit där. Och felet är nästan aldrig latheten. Felet är att diagrammet är en bild. Det ligger i en separat Visio-fil i nåns OneDrive, långt ifrån dokumenten med processen det beskriver. När processen ändras måste någon leta upp filen, öppna Visio, dra om rutorna, exportera en ny bild och klistra in den på rätt ställe. Så ingen gör det. Och så börjar diagrammet ruttna.
Det finns ett annat sätt. Det heter Mermaid, och det vänder hela problemet upp och ner.
Du ritar inte diagrammet, du skriver det
Mermaid är ett sätt att skapa diagram genom att skriva text. Inga rutor att dra. Inga pilar att rikta in med musen. Du skriver några rader, och Mermaid ritar.
Och det fina är hur nära talspråket det ligger. Säg att du vill ha en liten beslutsruta: börjar dagen, har jag fikat, ja eller nej. Det du skriver är i princip exakt det: En nod pekar på nästa, och vid frågan delar den sig i “ja” och “nej”. Du beskriver diagrammet, och datorn gör resten. Det är hela trolleriet, och det sitter på fem minuter.
Varje diagram börjar med ett ord som säger vilken typ det är. flowchart, sequenceDiagram, classDiagram och så vidare. Sen bygger du upp innehållet med två saker: noder (rutorna) och kopplingar (pilarna mellan dem). Det är hela grundmodellen. Resten är varianter på de två.
flowchart TD
A[Börjar dagen] --> B{Har jag fikat?}
B -->|Ja| C[Produktiv]
B -->|Nej| D[Zombie]
flowchart TD A[Börjar dagen] --> B{Har jag fikat?} B -->|Ja| C[Produktiv] B -->|Nej| D[Zombie]
Parenteserna beskriver vilken slags form den skall rita .
[Rektangel] en vanlig ruta(Rundade hörn) mjukare, ofta start/aktivitet([Stadion]) rundade ändar, bra för start/slut[(Databas)] cylinder((Cirkel)) {Romb} beslut, ja/nej{{Hexagon}}
Piltyperna beskriver kopplingen
A --> B vanlig pilA --- B linje utan pilA -.-> B streckadA ==> B tjockA -->|text| B pil med etikett
Du har redan programvara som klarar det här
Här kommer grejen som brukar få polletten att trilla ner: du behöver inte installera nåt. Mermaid finns redan inbyggt på en massa ställen där du jobbar.
Skriver du i Microsoft Loop? Det renderas där. Använder ni Azure DevOps? Det har funnits i wikin i åratal, och sen december 2025 funkar det även i vanliga markdown-filer i repot. GitHub, Notion, Obsidian. Alla ritar Mermaid direkt ur en textsnutt utan ett enda tillägg. Och i Visual Studio och VS Code ritas diagrammet upp medan du skriver.
Det här är värt att lägga på minnet: där en yta redan talar Markdown brukar Mermaid följa med på köpet.
Men jag skall vara ärlig med undantagen. SharePoint är ett sånt. Den inbyggda Markdown-webbdelen renderar inte Mermaid — den visar bara koden rakt av. Vill du ha diagram på en SharePoint-sida får du ta in en community-byggd webbdel som kan rendera det. Samma sak med Confluence: inget inbyggt stöd, utan en app från marketplace. Bra att veta innan du lovar nåt på ett möte.
Stöd i Microsoft Office
Det finns inget inbyggt stöd i Microsoft Office ännu, och det är ärligt talat det största problemet just nu. Det finns tjänster online som kan konvertera till bildformat som png och pdf men då tappar vi lite av poängen. Som Microsoft MVP försöker jag göra mer än att hålla tummarna för att stödet, inte bara för Mermaid utan också för markdown, skall komma direkt i Office. Om Copilot kan ta mermaid och skapa det som diagram så vore det också okej.
Och så var det Copilot
Det här är delen jag tror flest kommer gilla just nu. För Mermaid och Copilot passar ihop nästan löjligt bra.
Be Copilot: “Rita ett flödesschema över vår onboarding.” Det du får tillbaka är ofta just Mermaid — den där texten. Du kopierar den, klistrar in den där du vill ha den, och diagrammet är klart. Om Copilot envisas med att skapa en bild så kan du uttryckligen be om just ett mermaid-diagram.
Och nu till skillnaden mot att be om en bild. En bild är jobbigare att ändra. Blev en ruta fel, eller ändrades processen? Stön… Men ett Mermaid-diagram är ju text. Du byter ett ord, lägger till en rad, och det ritas om. Nu kan du äga det på riktigt. Och eftersom det bor i texten, bredvid själva innehållet, behöver det inte ljuga längre för nu uppdaterar du det i samma andetag som du uppdaterar allt annat.
timeline
title Produktion av ett poddavsnitt
section Förarbete
Vecka 1 : Välj ämne : Research
Vecka 2 : Skriv manus
section Inspelning
Vecka 3 : Spela in : Redigera i Hindenburg
section Publicering
Vecka 4 : Skriv shownotes : Publicera på Podbean : Dela på LinkedIn
timeline title Produktion av ett poddavsnitt section Förarbete Vecka 1 : Välj ämne : Research Vecka 2 : Skriv manus section Inspelning Vecka 3 : Spela in : Redigera i Hindenburg section Publicering Vecka 4 : Skriv shownotes : Publicera på Podbean : Dela på LinkedIn
Testa ikväll
Öppna Copilot och be om ett flödesschema över en process du kan utantill. Onboarding, en attestkedja, vad som helst. Titta på texten du får. Klistra in den i ett mermaid-block i Loop, och ladda ner diagrammet som en PNG och klistra in i ditt dokument. Nu sitter du där med ett diagram du faktiskt kan ändra utan att vara duktig på att rita.
Lämna ett svar