Toestandsdiagram
Leg elke toestand en overgang van een systeem vast
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.
Toestandsdiagrammen horen in specificaties, waar “kan een bestelling van terugbetaald terug naar verzonden?” een antwoord moet krijgen. Ze zijn het enige diagram dat verboden overgangen zichtbaar maakt: wat niet getekend is, mag niet, en daarmee wordt de tekening een testplan. Hun grens is combinatoriek — twee onafhankelijke machines in één diagram leveren een kruisproduct op dat niemand meer leest. Splits ze, of nest ze in samengestelde toestanden.
Live voorbeeld
stateDiagram-v2
[*] --> Draft
Draft --> Review : submit
Review --> Draft : request changes
Review --> Approved : approve
Approved --> Published : publish
Published --> Archived : archive
Archived --> [*]Wanneer gebruik je het
Veelgemaakte fouten
Toestandsnamen met spaties vallen uiteen
Waiting for payment --> Paid maakt drie toestanden: Waiting, for en payment. Benoem de toestand één keer met state "Waiting for payment" as waiting, en gebruik daarna in elke overgang de korte id waiting.
Een geneste [*] is niet het begin
Een [*] binnen een samengestelde toestand markeert het instappunt van die samengestelde toestand, niet dat van het diagram. Staat elke [*] die je schreef genest, dan heeft het diagram zelf geen instappunt en weet de lezer niet waar te beginnen.
Overgangslabels zijn gebeurtenissen, geen code
De tekst na de dubbele punt is vrije tekst: score > 80 wordt getoond maar nooit geëvalueerd, en twee overgangen mogen zonder klacht tegenstrijdige voorwaarden dragen. Beoordeel die labels zoals je proza beoordeelt, niet zoals je logica beoordeelt.
Basissyntaxis
stateDiagram-v2
[*] --> Idle
Idle --> Active : start
Active --> [*] : stopstateDiagram-v2 direction LRGebruik de -v2-renderer, degene waarvoor de huidige syntaxis geschreven is. Met direction LR erbij passen lange lineaire levenscycli die anders onderaan de pagina uitlopen.
[*] --> Draft Draft --> Review : submit[*] is de startmarkering links van een pijl en de eindtoestand rechts ervan. De tekst na de dubbele punt benoemt de gebeurtenis die de overgang veroorzaakt.
state Payment { [*] --> Pending Pending --> Captured }Een samengestelde toestand verbergt een submachine achter één blok. Een overgang kan de samengestelde toestand zelf als doel hebben en komt er dan binnen via de eigen startmarkering.
state gate <<choice>> gate --> Approved : score > 80Een choice-pseudotoestand vertakt op een voorwaarde zonder dat je daar een neptoestand voor verzint. De markeringen <<fork>> en <<join>> doen hetzelfde voor parallelle paden.
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.
Kan een Mermaid-toestandsdiagram guards, entry- en exit-acties uitdrukken?
Niet formeel. Een overgang draagt één label in vrije tekst, dus een guard als score > 80 staat er als proza en niets dwingt hem af. Syntaxis voor entry- of exit-acties bestaat evenmin — zet die in een notitie naast de toestand.
Hoe toon ik een toestand die naar zichzelf terugkeert?
Zet dezelfde toestand aan beide kanten van de pijl: Draft --> Draft : edit. Mermaid tekent hem als een lus op het blok en behoudt het label, en meerdere overgangen tussen hetzelfde paar toestanden houden elk hun eigen label in plaats van samen te vallen.
Kan ik één toestand een andere kleur geven?
Ja. classDef bad fill:#fdd definieert een stijl en class Failed bad past hem toe, zodat fout- of eindtoestanden opvallen. De opmaak staat in de broncode en overleeft dus de export naar PNG en SVG.
Hoe exporteer ik een toestandsdiagram voor een presentatie?
Exporteer PNG op 2× of 4× voor slides die geprojecteerd worden, of SVG als de tool dat accepteert: SVG blijft scherp en houdt de tekst selecteerbaar. De Mermaid-broncode blijft de versie die je bewerkt en opnieuw exporteert.
Toestandsdiagram of een ander diagramtype?
Toestandsdiagram of sequentiediagram?
Een sequentiediagram toont één pad door meerdere deelnemers; een toestandsdiagram toont alle paden door één deelnemer. Is de interessante vraag “wat antwoordde de API”, neem dan een sequentiediagram. Is ze “kunnen we hier ooit terugkomen”, neem dan toestanden.
Toestandsdiagram of klassediagram?
Het klassediagram geeft een Order zijn velden en relaties; het toestandsdiagram geeft hem een leven. Schrijf het klassediagram als mensen vragen welke gegevens er bestaan, en het toestandsdiagram als ze vragen welke overgangen de code moet weigeren.
Maak nu je Toestandsdiagram
Beschrijf het in gewone taal — de AI schrijft de Mermaid-code voor je.
Mermaid Studio openen