State diagram generator
Model a state machine as text and watch it render. Define states, transitions and events with Mermaid’s stateDiagram-v2 — order lifecycles, connection states, approval flows — all on your device.
One step per line. Indent two spaces to branch beneath the line above.
States, transitions and the events between them
A state diagram answers “what can this thing be, and how does it move between those states?” Mermaid’s stateDiagram-v2 maps directly onto that: "[*]" marks the start and end, every "A --> B: event" is a labelled transition, and a composite "state Name { … }" nests sub-states for richer behaviour. It is the clearest way to pin down an order lifecycle, a connection protocol, or a document’s approval path.
Writing it as text means the model stays honest. Add a state, name the event that reaches it, re-render — the layout reflows automatically and the diagram never drifts from the rules it documents.
From a status enum to a picture
If your code already has a status field — pending, paid, shipped, cancelled — a state diagram turns that enum into something a whole team can reason about, including the transitions your code allows and the ones it forbids. Label each arrow with the event or method that triggers it so the diagram reads like the spec.
Drop the Mermaid block into a design doc or pull request and reviewers can spot a missing transition or an impossible path before it becomes a bug.
Frequently asked questions
How do I make a state diagram from text?
Start with "stateDiagram-v2", mark the start with "[*] --> First", then add transitions like "Pending --> Paid: payment confirmed". End states use "Last --> [*]". It renders live and exports to SVG or PNG.
How do I label a transition with its event?
Put the trigger after a colon on the arrow, for example "Draft --> Submitted: submit". The label shows the event, method or condition that causes the state change.
Can I nest states (composite states)?
Yes — wrap sub-states in "state Name { … }" with their own "[*] --> …" start. The cheatsheet above shows the syntax; the media-player example demonstrates a composite Playing state.
What is the difference between a state diagram and a flowchart?
A flowchart shows a process — steps and decisions executed once. A state diagram shows the states an object can occupy over its lifetime and the events that move it between them, so loops back to earlier states are normal.
Is my state diagram uploaded anywhere?
No. It renders in your browser with Mermaid, so your states, events and internal logic never leave your device.