Free Online State Diagram Maker
A state diagram models a thing that has a finite set of states and well-defined transitions between them — an order, a connection, a user session. Each transition is labelled with the event or condition that causes it, which makes the diagram double as a spec for what should and shouldn't be possible.
This editor turns a short list of states and arrows into the diagram, so a state machine can be reviewed as text in a pull request before it's implemented.
An order lifecycle
Mermaid source
stateDiagram-v2
[*] --> Pending
Pending --> Paid : payment received
Paid --> Shipped : warehouse ships
Shipped --> Delivered : courier confirms
Pending --> Cancelled : customer cancels
Paid --> Cancelled : refund issued
Delivered --> [*]
Cancelled --> [*][*] is the pseudo-state for start and end — the arrow into Pending marks the initial state, and the arrows out of Delivered and Cancelled mark where the machine terminates. Each transition's label after the colon documents the event that triggers it.
A connection state machine with a nested state
Mermaid source
stateDiagram-v2
[*] --> Disconnected
Disconnected --> Connecting : connect()
state Connecting {
[*] --> Handshaking
Handshaking --> Authenticating
Authenticating --> [*]
}
Connecting --> Connected : success
Connecting --> Disconnected : timeout
Connected --> Disconnected : disconnect()state Connecting { ... } declares a composite state with its own internal states and its own [*] start marker. From the outside, Connecting still behaves like a single state with incoming and outgoing transitions.
Questions
What does [*] mean in a state diagram?
It's the pseudo-state for start and end, not a real state. An arrow from [*] marks the diagram's initial state, and an arrow to [*] marks a state that can terminate the machine.
How do I show nested or composite states?
Wrap a group of states in state Name { ... }, with its own transitions and its own [*] inside the braces. Mermaid draws it as a box containing a mini state diagram, which is the standard way to hide detail that only matters once you're inside that state.
Should I use stateDiagram or stateDiagram-v2?
Use stateDiagram-v2 — it's the current renderer and supports composite states, concurrency, and notes. Plain stateDiagram still works for backward compatibility but has fewer features and is not where new development goes.