State diagram maker
Show every state something can be in and what moves it from one to the next: an order, a document, a login. Write one transition per line.
How to use the State diagram maker
- Start from the state diagram template.
- Write one transition per line: Draft --> InReview : submit.
- Use [*] for the start and end points.
- Download a PNG, SVG, PDF or Word file.
What you get
- Start and end points
- Labelled transitions
- Nested (composite) states
- Notes and choice points
About the State diagram maker
Why a state machine
Listing states and transitions makes missing cases obvious: what happens if a published post is edited, or a cancelled order is paid? Teams use it to agree on behaviour before coding.
Nested states
Group states inside state Name { ... } to show a phase with its own steps, such as Payment with Pending, Authorised and Captured.
Frequently asked questions
- How do I mark the start?
- Use [*] --> FirstState. For the end, write LastState --> [*].
- Can a state name have spaces?
- Give it an id and a label: state "In review" as InReview.
- Is my diagram uploaded?
- No. It is drawn in your browser.