🔀 Mermaid

Flowchart

Breng elk proces, elke beslissing of elk algoritme in kaart

Open dit voorbeeld in de editor Genereer er een met AI

Wat is een Flowchart?

Een flowchart toont de stappen van een proces en de beslissingen ertussen. Het is het meest universele diagram: onboardingflows, algoritmen, goedkeuringsketens, troubleshootinggidsen — als het stappen en keuzes heeft, kan een flowchart het tonen.

Flowcharts duiken op overal waar een proces eerst afgestemd moet worden voordat het gebouwd wordt: RFC’s, runbooks, onboardingdocumentatie, supportscripts. Hun kracht zijn de vertakkingen — elk pad dat een aanvraag kan nemen, ook de paden waar niemand op had gerekend. Hun zwakte is tijd en verantwoordelijkheid: een flowchart zegt wat er daarna gebeurt, nooit wie het doet of hoe lang het duurt. Voeg een subgraph per team toe, of kies een ander diagramtype.

Live voorbeeld

Mermaid-code

flowchart TD
    A([Start]) --> B{Payment valid?}
    B -->|Yes| C[Reserve stock]
    B -->|No| D[Show error]
    C --> E{In stock?}
    E -->|Yes| F[Confirm order]
    E -->|No| G[Notify customer]
    F --> H([Done])
    D --> H
    G --> H

Live voorbeeld

Wanneer gebruik je het

Bedrijfsprocessen en goedkeuringsworkflows documenteren

Algoritmen en foutafhandelingslogica ontwerpen vóór het coderen

Troubleshooting en beslisbomen uitleggen aan supportteams

Veelgemaakte fouten

Een knoop die end heet

Het woord end sluit een subgraph af, dus een knoop die het als identifier gebruikt levert een parsefout op in plaats van een waarschuwing. Geef de knoop een andere id en zet het woord in het label: done([End]).

Haakjes in een label zonder aanhalingstekens

A[Pay (card)] mislukt, omdat Mermaid het binnenste haakje leest als een nieuwe vormbegrenzing. Zet het hele label tussen dubbele aanhalingstekens — A["Pay (card)"] — wat meteen ook aanhalingstekens, hekjes en puntkomma’s afdekt.

Een kruisende pijl negeert de subgraph-richting

direction LR binnen een subgraph wordt genegeerd zodra een pijl op een van zijn knopen begint of eindigt: het kader valt terug op de richting van de ouder. Richt de pijl op de id van de subgraph, dan blijft de binnenrichting behouden.

Basissyntaxis

.mmd

flowchart TD
    A[Rectangle] --> B{Decision}
    B -->|Yes| C([Rounded])
    B -->|No| D[(Database)]

flowchart LR
De eerste regel bepaalt de lay-outrichting: TD of TB voor van boven naar beneden, LR van links naar rechts, BT en RL omgekeerd. Lange ketens lezen prettiger als LR.
B -->|Yes| C B -.->|timeout| D
Een label tussen pipes legt uit waarom een tak gekozen wordt. Gestippelde pijlen markeren uitzonderlijke paden; dikke pijlen, geschreven als ==>, markeren het nominale pad.
A["Pay (card)"] --> B{{Route}}
De haakjes bepalen de vorm: [] rechthoek, {} beslissing, () afgerond, {{}} zeshoek, [()] database. Zet een label met haakjes of andere Mermaid-leestekens tussen aanhalingstekens.
subgraph payments [Payment service] direction LR P1 --> P2 end
Een subgraph tekent een gelabeld kader om samenhangende knopen — één service, team of fase. Een eigen direction-regel laat dat kader zijwaarts lopen terwijl de pagina naar beneden loopt.

Vragen over dit diagram

Wanneer gebruik ik een flowchart in plaats van een sequentiediagram?

Gebruik een flowchart voor de logica van één proces (stappen en beslissingen). Gebruik een sequentiediagram wanneer meerdere actoren of systemen in de tijd berichten uitwisselen.

Kan de AI een flowchart genereren uit een tekstbeschrijving?

Ja — beschrijf het proces in gewone taal (“gebruiker registreert zich, verifieert e-mail, daarna …”) en Mermaid Studio genereert de complete flowchart, klaar om te bewerken.

Rendert GitHub Mermaid-flowcharts in een README?

Ja. Zet de code in een codeblok met de taalaanduiding mermaid en GitHub rendert hem in README’s, issues en pull requests; GitLab en Notion doen hetzelfde. Voor tools zonder native ondersteuning exporteer je SVG of PNG.

Waarom plaatst Mermaid mijn knopen in een volgorde die ik niet heb gekozen?

De lay-out wordt berekend, niet geschreven — er staan geen coördinaten in de syntaxis. Je beïnvloedt hem via de richting, het groeperen in subgraphs, de volgorde van je pijldeclaraties, of een onzichtbare link (A ~~~ B) die een knoop lager plaatst.

Wat is het verschil tussen graph en flowchart in Mermaid?

Beide worden in v11 nog geparseerd. graph is het oorspronkelijke sleutelwoord; flowchart richt zich op de nieuwere renderer en is waar de documentatie en de recente vormen op geschreven zijn. Gebruik flowchart voor alles wat nieuw is.

Hoe geef ik specifieke blokken in een flowchart een kleur?

Twee manieren: style A fill:#eef,stroke:#66f voor één knoop, of classDef warn fill:#fee gevolgd door class B,C warn om één stijl over meerdere knopen te hergebruiken. Beide staan in de broncode, dus de kleuren overleven export naar PNG en SVG.

Flowchart of een ander diagramtype?

Flowchart of toestandsdiagram?

Vraag je af wat de blokken zijn. Zijn het acties — werkwoorden die iemand uitvoert — dan is een flowchart juist. Zijn het condities waarin hetzelfde object verkeert, wachtend op een gebeurtenis, gebruik dan een toestandsdiagram. De levenscyclus van een bestelling zijn toestanden; het goedkeuringsproces eromheen is een flowchart.

Flowchart of mindmap?

Een mindmap is een strikte boom: één root, één ouder per knoop, geen labels op de takken, geen lussen. Zodra twee takken samen moeten komen, of er een voorwaarde op een pijl moet staan, ben je de mindmap ontgroeid en wil je een flowchart.

Verken de andere diagramtypen

💬 Sequentiediagram 🧩 Klassediagram 🗄️ Entiteit-relatiediagram 🔄 Toestandsdiagram 📅 Gantt-grafiek 🥧 Cirkeldiagram 🧠 Mindmap 🌿 Git-graaf 🕰️ Tijdlijn 🚶 User journey 🎯 Kwadrantgrafiek

Maak nu je Flowchart

Beschrijf het in gewone taal — de AI schrijft de Mermaid-code voor je.

Mermaid Studio openen