Gratis · Geen registratie · Werkt met .mmd-bestanden

Mermaid stroomdiagram-editor

Een stroomdiagram laat zien hoe een proces verloopt: welke stappen er zijn, waar het vertakt en waar de takken weer samenkomen. Het past wanneer de volgorde van beslissingen het onderwerp is — een uitrol, de route van een verzoek, een goedkeuringsstroom. Gaat het vooral om wie wanneer met wie praat, dan is een sequentiediagram beter.

Open dit in de editor →Lees de gids

Een uitrolstraat met twee foutpaden

Bijna alle stroomdiagrammen op deze site beginnen met deze vorm: een recht gelukkig pad met beslisruiten die eraf takken. Let op de aanhalingstekens in de op één na laatste knoop. Haakjes binnen een label moeten tussen aanhalingstekens, en dat vergeten is de allervaakst gemaakte fout.

flowchart TD
    Push[Push naar main] --> Lint[Statische analyse en typen]
    Lint --> Test{Tests geslaagd}
    Test -->|Nee| Melding[Waarschuw de committer]
    Test -->|Ja| Build[Bouw het image]
    Build --> Scan{Beveiligingsscan schoon}
    Scan -->|Nee| Stop["Blokkeer de release (handmatige controle)"]
    Scan -->|Ja| Deploy[Uitrollen naar productie]
    Deploy --> Rook[Rooktests]
    Rook --> Klaar[Release afgerond]
Open dit in de editor
Advertentie

Uitgewerkte voorbeelden

1. Het kleinste stroomdiagram

Twee knopen en een pijl. `TD` loopt van boven naar beneden, `LR` van links naar rechts; een diagram dat breder is dan hoog leest bijna altijd beter met `LR`.

flowchart TD
    Ontvangst[Ontvang het verzoek] --> Antwoord[Stuur het antwoord]
In de editor openen

2. Een vertakking met labels

Accolades tekenen een ruit. De tekst tussen de verticale strepen labelt de pijl, niet de knoop. Dat onderscheid komt hieronder bij de fouten terug.

flowchart TD
    Start[Ontvang het verzoek] --> Auth{Token geldig}
    Auth -->|Ja| Verwerk[Voer de handler uit]
    Auth -->|Nee| Weiger[Geef 401 terug]
    Verwerk --> Oke[Geef 200 terug]
In de editor openen

3. Laat de vorm iets zeggen

Vormen zijn de goedkoopste manier om informatie aan een stroomdiagram toe te voegen. Ronde uiteinden markeren begin en eind, de ruit een beslissing, de cilinder een gegevensopslag.

flowchart LR
    Start([Start de taak]) --> Lees[(Lees uit Postgres)]
    Lees --> Nieuw{Nieuwe rijen aanwezig}
    Nieuw -->|Nee| Stop([Stop zonder wijzigingen])
    Nieuw -->|Ja| Transformeer[/Transformeer de gegevens/]
    Transformeer --> Schrijf[(Schrijf naar S3)]
    Schrijf --> Stop
In de editor openen

4. Subgrafieken om per eigenaar te groeperen

Een subgrafiek zet samenhangende knopen in een kader. Het werkt het best om per eigenaar te groeperen, niet per fase: zodra zichtbaar wordt welk team of welke dienst waarvoor zorgt, springen de overdrachtsmomenten eruit.

flowchart TD
    subgraph client [Browser]
        UI[Verstuur het formulier]
    end
    subgraph api [Besteldienst]
        Valideer[Valideer de invoer]
        Bewaar[Bewaar de bestelling]
    end
    subgraph async [Achtergrondtaken]
        Mail[Stuur de bevestiging]
        Factuur[Maak de factuur]
    end
    UI --> Valideer
    Valideer --> Bewaar
    Bewaar --> Mail
    Bewaar --> Factuur
In de editor openen

5. Een herhaallus met een bovengrens

Stroomdiagrammen gaan goed om met lussen. De herhaallus is precies het geval waarin ze echt nut hebben, want uit de tekening zie je in één oogopslag of de lus een echte uitgang heeft.

flowchart TD
    Stuur[Verstuur de webhook] --> Uitslag{2xx ontvangen}
    Uitslag -->|Ja| Gelukt[Markeer als bezorgd]
    Uitslag -->|Nee| Pogingen{Minder dan 5 pogingen}
    Pogingen -->|Ja| Wacht[Exponentieel wachten]
    Wacht --> Stuur
    Pogingen -->|Nee| Wachtrij[Naar de mislukte-wachtrij]
In de editor openen

Overzicht van de stroomdiagram-syntaxis

Alles hier geldt alleen voor het stroomdiagram. Vooral de pijlen: die verhuizen niet naar andere typen. De `->>` uit het sequentiediagram is hier een syntaxisfout.

SyntaxisBetekenis
flowchart TDVan boven naar beneden. `TB` is hetzelfde. De gebruikelijke leesrichting van een proces.
flowchart LRVan links naar rechts. `RL` bestaat ook. Voor brede, ondiepe stromen.
A[Tekst]Rechthoek — een gewone stap.
A(Tekst)Rechthoek met afgeronde hoeken.
A([Tekst])Stadionvorm — traditioneel begin of eind.
A[(Tekst)]Cilinder — gegevensopslag.
A{Tekst}Ruit — beslissing.
A[/Tekst/]Parallellogram — invoer of uitvoer.
A --> BPijl.
A --- BLijn zonder punt.
A -.-> BStippellijn — traditioneel asynchroon of optioneel.
A ==> BDikke pijl — traditioneel het hoofdpad.
A -->|tekst| BGelabelde pijl. Met haakjes zijn aanhalingstekens nodig.
A["Tekst (met haakjes)"]Label tussen aanhalingstekens — nodig voor haakjes, aanhalingstekens en elk teken dat als vormsyntaxis wordt gelezen.
subgraph naam [Titel] ... endGroepeert knopen in een kader. Sluit af met `end`.
%% commentaarCommentaarregel. Wordt niet getekend.
Advertentie

De zes fouten die een stroomdiagram echt slopen

Allemaal nagemaakt op de motor die deze site gebruikt (Mermaid 11.12.2). Plak de foute versie in de editor en je krijgt precies de beschreven fout; de goede versie tekent. De snelste manier om een Mermaid-fout te lezen is naar het eind kijken: na het woord `got` staat het token waarop de parser vastliep.

Wat je ziet

Parse error die eindigt op: got 'PS'

Waarom

Er staat een openend rond haakje binnen een label met rechte haken. Ronde haakjes zijn vormsyntaxis — `A(tekst)` is een afgeronde knoop — dus een kaal haakje binnen de rechte haken wordt gelezen als het begin van een nieuwe vorm.

Oplossing

Zet het hele label tussen dubbele aanhalingstekens. Daarbinnen telt alles als tekst.

Fout
flowchart TD
    A[Probeer opnieuw (maximaal 5 keer)] --> B[Klaar]
Goed
flowchart TD
    A["Probeer opnieuw (maximaal 5 keer)"] --> B[Klaar]

Wat je ziet

Parse error op de regel waar je de knoop een naam gaf

Waarom

Er staat een spatie in de knoop-id. In het Nederlands gebeurt dat vooral bij losse schrijfwijzen: «authenticatie service» in plaats van «authenticatieservice». De id is het token vóór de pijl, en de spatie kapt hem af zodat er een woord overblijft dat nergens heen kan.

Oplossing

Geef de knoop een id van één woord en zet de leesbare tekst in het label. Samenstellingen aan elkaar schrijven lost het meteen op — en dat is toch al de juiste spelling.

Fout
flowchart TD
    authenticatie service --> gebruikers database
Goed
flowchart TD
    auth[Authenticatiedienst] --> db[(Gebruikersdatabase)]

Wat je ziet

Parse error die eindigt op: got 'end'

Waarom

Je hebt `end` als knoop-id gebruikt. Kleingeschreven `end` sluit een subgrafiek af, dus de parser ziet een blokeinde waar hij een knoop verwachtte. Het komt vaker voor dan je denkt: wie Engelse voorbeelden volgt, noemt de laatste knoop `end`, ook als de rest Nederlands is.

Oplossing

Schrijf het met een hoofdletter of geef de knoop een andere id en verplaats het woord naar het label. `Einde` geeft geen enkel probleem.

Fout
flowchart TD
    Start[Start] --> end
Goed
flowchart TD
    Start[Start] --> Einde[Afgerond]

Wat je ziet

Parse error in het pijllabel tussen de verticale strepen

Waarom

Er staan haakjes binnen het pijllabel. De tekst tussen `|…|` heeft dezelfde beperking als een knooplabel: ook daar zijn haakjes syntaxis en geen tekst.

Oplossing

Zet ook het pijllabel tussen aanhalingstekens.

Fout
flowchart TD
    A -->|ja (altijd)| B
Goed
flowchart TD
    A -->|"ja (altijd)"| B

Wat je ziet

Parse error die eindigt op: got 'STR'

Waarom

Er staat een recht dubbel aanhalingsteken binnen een knooplabel. De parser ziet het aan voor het begin van een string en komt daarna de rechte haak van het label tegen waar hij het sluitende aanhalingsteken verwachtte.

Oplossing

Zet het hele label tussen rechte aanhalingstekens en gebruik daarbinnen enkele of typografische aanhalingstekens, of schrijf het teken als HTML-entiteit #quot;.

Fout
flowchart TD
    A[Hij zei "akkoord"] --> B[Klaar]
Goed
flowchart TD
    A["Hij zei 'akkoord'"] --> B[Klaar]

Wat je ziet

Lexical error on line 1. Unrecognized text.

Waarom

De richting is ongeldig. Een stroomdiagram accepteert alleen TB, TD, BT, LR en RL; al het andere sneuvelt in de lexicale analyse voordat er ook maar één knoop gelezen is. Daarom wijst de fout naar regel 1 en niet naar de tikfout.

Oplossing

Gebruik er één van de vijf. TD en LR dekken vrijwel alles.

Fout
flowchart BOVENONDER
    A --> B
Goed
flowchart TD
    A --> B

Aantekeningen over het tekenen

Niets hiervan komt uit de documentatie: alles is gemeten op Mermaid 11.12.2, de versie die deze site gebruikt. Dit zijn de gedragingen die gaan tellen zodra het diagram geen speelgoed meer is.

Samenstellingen breken nooit af — en dat is hét Nederlandse probleem

Gemeten: een knooplabel groeit tot een grens van 276 pixels viewBox, breekt dan af en groeit met ongeveer 24 pixels per regel omhoog. Maar het breekt uitsluitend op spaties, en het Nederlands schrijft samenstellingen aan elkaar. Eén woord breekt dus nooit af: `Klantenbestellingsbevestigingsmailadres` meet 364 pixels op één regel en gaat dwars door het plafond heen, waarmee het de hele tekening scheeftrekt. Geen enkele andere taal op deze site loopt hier zo hard tegenaan. De oplossing is niet het diagram maar het woord: kies een kortere term voor het label en zet de lange vorm desnoods in een commentaarregel.

Nederlandse labels zijn de langste die hier gemeten zijn

Dezelfde betekenis als `A[Payment received] --> B[Ship the order]`, dat 204 pixels meet, komt in het Nederlands uit op 230 pixels — het breedst van alle op deze site gemeten talen, iets boven Indonesisch en ruim boven Italiaans. Dat komt niet door lange stammen maar door afleidingen en voorvoegsels. Praktisch betekent het dat je eerder tegen de 276-pixelgrens aanloopt dan een Engelstalig voorbeeld doet vermoeden.

De hoogte groeit met ongeveer 105 pixels per knoop, de breedte staat vrijwel stil

In een diagram van boven naar beneden geven drie knopen een viewBox van ongeveer 126×278. Bij veertig knopen wordt dat 135×4126: de breedte is met 9 pixels gegroeid, de hoogte is vijftien keer over. Een lang diagram is een smalle strook die op geen enkel scherm past. Daar dient de centreerknop in de weergave voor. Wordt het buitensporig, dan halveert overstappen op `flowchart LR` de verhouding vaak bijna.

De PNG-export was stuk omdat labels HTML zijn

De labels van een stroomdiagram worden als echte HTML in een `<foreignObject>` binnen de SVG getekend. Daarom werken `<br>` en wat Markdown in labels. Om dezelfde reden weigert de browser deze SVG op een canvas te tekenen: de PNG-export van deze site gaf lange tijd stilzwijgend een SVG-bestand terug. Nu wordt het diagram vóór het exporteren opnieuw getekend met gewone SVG-tekstlabels en komt de PNG goed uit. De prijs is dat de zetwijze van de geëxporteerde PNG heel licht afwijkt van die op het scherm.

Het thema verandert de kleuren, nooit de geometrie

Hetzelfde diagram in het lichte en het donkere thema levert een identieke viewBox op. Van thema wisselen zet niets opnieuw op en laat geen label uit zijn kader lopen. Wat er in het donkere thema scheef uitziet, is in het lichte thema precies even scheef.

Wanneer een ander diagram beter past

Gaat het erom wie wat naar wie stuurt, en weegt de tijdsvolgorde zwaarder dan de vertakkingen, dan leest een sequentiediagram beter en blijft het ook beter leesbaar naarmate het groeit. Een stroomdiagram met zes deelnemers als knoopnamen is een sequentiediagram dat dat nog niet heeft toegegeven.

Beschrijf je geen procedure maar de toestanden waarin iets kan verkeren, gebruik dan een toestandsdiagram. Het onderscheid is eenvoudig: zijn de knooplabels toestanden zoals «bestelling in afwachting» of «bestelling verzonden», dan is het een toestandsmachine; zijn het handelingen zoals «valideer de invoer» of «stuur de mail», dan is het een stroomdiagram.

Voorbij de veertig knopen redt eerlijk gezegd geen enkel diagram het meer. Of je splitst het in meerdere diagrammen met een gedeelde ingang, of je aanvaardt dat wat je wilt vertellen te ingewikkeld is voor één plaatje. Ook dat is op zichzelf nuttige informatie.

Andere diagramtypen

Geschreven door Dominik Malsch · Laatst bijgewerkt:

Editor openen →