State Diagram
Free Online State Diagram Maker
A state diagram, also called a state machine diagram, is a type of diagram that models the distinct states a system or object can be in, and the events that cause it to transition from one state to another — for example, an order moving from Draft to Approved to Published.
Model state machines, lifecycle flows, and system behavior with Mermaid state diagrams.
Last updated: · Mermaid v11
Try it live
When to use state diagram
UI/UX flows
Model component states like loading, error, success, and empty before building the frontend. Every labeled transition is an event handler you will need, which turns the diagram into an implementation checklist.
Order management
Visualize an order lifecycle from placed to delivered to refunded, each transition naming the event that causes it. Terminal states make the can-we-cancel-from-here questions answerable at a glance.
Auth workflows
Map authentication states — unauthenticated, authenticating, authenticated, expired — and the transitions between them. Edge cases like token refresh and retry loops become visible before they become bugs.
Key syntax
stateDiagram-v2Declare diagram type (use v2)[*] --> StateInitial transition from startState --> [*]Final transition to endA --> B : eventTransition with event labelstate Name { }Composite / nested statenote right of SAdd a note to a stateHow to create a state diagram with Mermaid
Open FlowViz and type stateDiagram-v2.
Define the initial state with [*] --> StateName.
Add states by simply using them in transitions: StateA --> StateB : event.
Label transitions with the event that causes them after the colon.
Define terminal states with StateName --> [*].
Create composite states with state CompositeName { ... } for nested flows.
Export your diagram as SVG.
Frequently asked questions
What is the difference between a state diagram and a flowchart?
A flowchart’s boxes are actions and its arrows are the order those actions happen in. A state diagram’s boxes are conditions the system sits in and its arrows are the events that move it between them. A quick test: if your boxes read as verbs — “validate card”, “send email” — you want a flowchart. If they read as modes the thing can be in — “Pending”, “Shipped”, “Cancelled” — you want a state diagram.
What is a state diagram used for?
Modeling finite state machines: the valid states of a system and the transitions between them — order lifecycles, UI modes, connection states.
How do I mark the start and end states?
[*] as a transition source is the start state; [*] as a target is the end state.
Can states be nested?
Yes — composite states wrap child states in a state Name { ... } block.
Start diagramming now
No signup. No install. Just open the editor and start writing.