Example state diagram code
This is the Mermaid source loaded in the editor above. Copy it into a Markdown file inside a ```mermaid block and GitHub, GitLab, Notion or Obsidian will render it.
stateDiagram-v2
[*] --> Draft
Draft --> InReview : submit
InReview --> Draft : request changes
InReview --> Approved : approve
Approved --> Published : publish
Published --> Archived : archive
Archived --> [*]
state InReview {
[*] --> Waiting
Waiting --> Reviewing : reviewer assigned
Reviewing --> [*]
}
note right of Approved
Only editors can publish
end noteState diagram syntax cheat sheet
| Syntax | What it does |
|---|---|
| stateDiagram-v2 | Start a state diagram (v2 renderer). |
| [*] --> A | Start state. A --> [*] marks an end state. |
| A --> B : event | Transition from A to B, labelled with the event. |
| state A { ... } | Composite state containing its own sub-states. |
| state c <<choice>> | Choice pseudo-state. Also <<fork>> and <<join>>. |
| note right of A ... end note | Attach a multi-line note to a state. |
| -- | Inside a composite state, separates concurrent regions. |
How to make a Mermaid state diagram
- 1Start the code with stateDiagram-v2.
- 2Mark the start with [*] --> Idle.
- 3Add transitions such as Idle --> Loading : fetch.
- 4Group nested states and add choice points.
- 5Export as SVG or PNG, or copy a share link.
States and transitions
Each line State1 --> State2 : event is a transition with an optional label. [*] stands for the start state when it is on the left and the end state when it is on the right.
Give a state a longer description with state "Waiting for payment" as Waiting, then use the short ID in transitions.
Composite states, choices and forks
Nest states with state Active { [*] --> Running ... }. The inner diagram has its own start and end.
Declare a branch point with state check <<choice>> and draw guarded transitions out of it. <<fork>> and <<join>> split and merge parallel flows, and -- inside a composite state separates concurrent regions.
Notes and direction
Add note right of Loading : Times out after 30s to explain a state. Notes can also go left of a state.
Add direction LR on its own line to lay the diagram out left to right, which often suits long linear workflows.