Mermaid State Diagram Syntax
A state diagram opens with stateDiagram-v2, then lists transitions between states as arrows, optionally labelled with the triggering event.
| Construct | Meaning | Example |
|---|---|---|
[*] --> State | The pseudo-state [*] marks the diagram's initial state when it is the arrow's source. | stateDiagram-v2
[*] --> Pending |
State --> [*] | [*] as the arrow's target marks a state that can terminate the machine. | stateDiagram-v2
[*] --> Done
Done --> [*] |
A --> B : event | A labelled transition, documenting the event or condition that triggers it. | stateDiagram-v2
[*] --> Pending
Pending --> Paid : payment received |
state Name { ... } | Declares a composite state containing its own nested states and its own [*] start marker. | stateDiagram-v2
[*] --> Connecting
state Connecting {
[*] --> Handshaking
Handshaking --> [*]
}
Connecting --> [*] |
note right of State : text | The v2 renderer supports attaching a free-text note to a state, shown here anchored to the right of Idle. | stateDiagram-v2
[*] --> Idle
Idle --> [*]
note right of Idle : Waiting for input |
Everything together
Mermaid source
stateDiagram-v2
[*] --> Pending
Pending --> Paid : payment received
Paid --> Shipped : warehouse ships
state Shipped {
[*] --> InTransit
InTransit --> Delivered
}
Shipped --> [*]
Pending --> Cancelled : customer cancels
Cancelled --> [*]