Generate state machine diagrams with states, transitions, and triggers. Part of the DevTools Surf developer suite. Browse more tools in the Diagrams & Workflows collection.
Use Cases
Document the lifecycle of an order (Created, Paid, Shipped, Delivered, Refunded) in an e-commerce system.
Design a UI component's state machine before implementation to prevent inconsistent UI states.
Model a workflow approval process with branching paths and rejection states.
Communicate protocol state transitions to engineers implementing a distributed system.
Tips
Name states with nouns or noun phrases (Idle, Processing, Approved), not verbs — state names describe what the system IS, not what it is doing.
Mark the initial state with a filled circle and terminal states with a circle-with-border — these conventions from UML prevent ambiguity about flow entry and exit points.
Limit the number of states to what is meaningful for the observer — internal implementation states that have no externally visible difference can be merged.
Fun Facts
Finite state machines (FSMs) were formalized by Stephen Kleene in 1951 (the same mathematician who invented regular expressions). They underpin everything from vending machine logic to TCP connection management.
The TCP protocol's state machine (CLOSED, LISTEN, SYN-SENT, ESTABLISHED, etc.) has 11 states and is defined in RFC 793 (1981) — essentially unchanged for over 40 years.
UML state diagrams (statecharts) were introduced by David Harel in 1987 to handle the complexity of nested and concurrent states that flat FSMs cannot represent cleanly.
FAQ
When should I use a state diagram vs. a flowchart?
Use a state diagram when the system has a defined set of discrete states that persist over time and transitions triggered by events. Use a flowchart for sequential process logic where the system does not maintain persistent state.
What are nested states (hierarchical state machines)?
A state that contains sub-states — for example, an 'Active' state that can be either 'Playing' or 'Paused'. The parent state captures behavior shared by all sub-states, reducing the total number of transitions needed.
