🔄 Mermaid

Toestandsdiagram

Leg elke toestand en overgang van een systeem vast

Open dit voorbeeld in de editor Genereer er een met AI

Wat is een Toestandsdiagram?

Een toestandsdiagram toont de toestanden waarin een object zich kan bevinden en de gebeurtenissen die het van de ene naar de andere brengen: levenscycli van bestellingen, documentworkflows, UI-toestanden, verbindingsbeheer. Onmisbaar zodra “in welke toestand zitten we?” ertoe doet.

Live voorbeeld

Mermaid-code

stateDiagram-v2
    [*] --> Draft
    Draft --> Review : submit
    Review --> Draft : request changes
    Review --> Approved : approve
    Approved --> Published : publish
    Published --> Archived : archive
    Archived --> [*]

Live voorbeeld

Wanneer gebruik je het

Levenscycli van bestellingen, tickets of documenten modelleren

Toestanden van UI-componenten en verbindingen ontwerpen

Bedrijfsregels rond statusovergangen specificeren

Basissyntaxis

.mmd

stateDiagram-v2
    [*] --> Idle
    Idle --> Active : start
    Active --> [*] : stop

Vragen over dit diagram

Wat is het verschil met een flowchart?

Een flowchart volgt een proces van begin tot eind. Een toestandsdiagram beschrijft alle mogelijke toestanden van één ding en welke gebeurtenissen overgangen veroorzaken — inclusief cycli en fouttoestanden.

Ondersteunt Mermaid geneste toestanden?

Ja — stateDiagram-v2 ondersteunt samengestelde (geneste) toestanden, forks, joins, keuzes en notities voor realistische toestandsmachines.

Verken de andere diagramtypen

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

Maak nu je Toestandsdiagram

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

Mermaid Studio openen