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.

State Diagram Generator | DevTools Surf

DevTools Surf

Example: State Diagram Generator

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

Order Processing
Created -> Processing:checkout_confirmed
Processing -> Shipped:payment_verified
Shipped -> Delivered:delivery_confirmed
Delivered -> Completed:receipt_signed

Output

{
  "title": "Order Processing",
  "states": [
    {
      "id": "state0",
      "name": "Created",
      "type": "initial"
    },
    {
      "id": "state1",
      "name": "Processing",
      "type": "normal"
    },
    {
      "id": "state2",
      "name": "Shipped",
      "type": "normal"
    },
    {
      "id": "state3",
      "name": "Delivered",
      "type": "normal"
    },
    {
      "id": "state4",
      "name": "Completed",
      "type": "final"
    }
  ],
  "transitions": [
    {
      "id": "trans0",
      "from": "Created",
      "to": "Processing",
      "trigger": "checkout_confirmed"
    },
    {
      "id": "trans1",
      "from": "Processing",
      "to": "Shipped",
      "trigger": "payment_verified"
    },
    {
      "id": "trans2",
      "from": "Shipped",
      "to": "Delivered",
      "trigger": "delivery_confirmed"
    },
    {
      "id": "trans3",
      "from": "Delivered",
      "to": "Completed",
      "trigger": "receipt_signed"
    }
  ]
}

About State Diagram Generator

State Diagram Generator preview - Diagrams & Workflows tool

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.

Related Diagrams & Workflows Tools

Architecture Diagram Generator Database Schema Diagram Sequence Diagram Generator Entity Relationship Diagram Deployment Diagram Generator Flowchart Generator Mind Map Generator Timeline Generator