Mermaid State Diagram Maker
Write state diagrams in Mermaid code and watch them render as you type. Start from the example below, then export PNG or SVG, share a link or embed the diagram.
Updated · Code editor with live preview
State diagram example
Rendering preview…
stateDiagram-v2
[*] --> Draft
Draft --> Review : submit
Review --> Draft : request changes
Review --> Published : approve
Published --> Archived : archive
Archived --> [*]What is a state diagram?
A state diagram shows the states something can be in and the events that move it from one state to another. It is often used to describe a state machine, such as the lifecycle of an order or a UI component. In Mermaid it starts with the stateDiagram-v2 keyword.
When to use a state diagram
- Modelling order, ticket or document lifecycles
- Designing UI component states such as loading, error and success
- Documenting a state machine in code
- Agreeing which transitions are allowed
How to make a state diagram in Mermaid
- Step 1
Open the editor
Open TryMermaid with the example on this page, or start a new diagram with stateDiagram-v2 on the first line.
- Step 2
Add the start and end
Use [*] --> Draft to mark where the machine starts and Archived --> [*] to mark where it ends.
- Step 3
Add transitions
Write one transition per line, such as Draft --> Review : submit. The text after the colon is the event that causes the change.
- Step 4
Group states and export
Nest related states inside a composite state block, check the live preview, then export PNG or SVG or share a link.
State diagram syntax cheat sheet
| Element | Syntax | What it does |
|---|---|---|
| Start or end | [*] | Filled start or end point |
| Transition | A --> B | Arrow between states |
| Event | A --> B : submit | Label on a transition |
| Composite state | state Checkout { … } | States nested inside a state |
| Choice | state check <<choice>> | Branch on a condition |
| Fork and join | state split <<fork>> | Split into or merge parallel paths |
| Note | note right of A : Text | Note beside a state |
| Concurrency | -- | Parallel regions in a composite state |
State diagram FAQ
What is the difference between stateDiagram and stateDiagram-v2?
Both keywords draw state diagrams. stateDiagram-v2 uses Mermaid's newer renderer and is recommended for new diagrams; the older keyword is kept so existing diagrams keep working.
How do I show a decision in a state diagram?
Declare a choice state with state isValid <<choice>>, point a transition at it, and add one outgoing transition per outcome, for example isValid --> Approved : yes and isValid --> Rejected : no.