ChatDiagram
Tools/Free state diagram maker

Free state diagram maker.

Draw a state diagram by describing an object's states and the events that change them. The state diagram maker maps the lifecycle with transitions, guard conditions, actions, start and final states.

State DiagramEnter to send

Free account, no card · Export SVG, PNG or PDF

See it work

State diagram examples.

Same tool, four requests. Every drawing below is a real render.

What you type
Draw a traffic light state diagram that starts at Red, changes from Red to Green to Yellow on a timer, returns to Red, and can end when power is turned off.
Then tryAdd a flashing red maintenance state.Change the power-off transition to start from every light state.
State diagram: Traffic light
State diagram · OMG UML 2.5.1 §14 + Harel (1987) statechart · schematex-state

Rather start from a finished drawing? Browse 40 state diagram templates →

The drawing

What a state diagram is.

A state diagram shows the conditions an object or system can be in and the events that move it from one condition to another. Each arrow names the event, and it can also show a guard or an action.

Use a state diagram when the question is what happens to one thing over time: an order, a UI session, a machine or a game. An activity diagram is better when you need to show work moving through a broader process.

Standard
OMG UML 2.5.1 §14 + Harel (1987) statechart
Engine
schematex-state
Editable
Double-click text, drag nodes
Export
SVG · PNG · PDF
State diagram: What a state diagram is
Who uses it

Who uses state diagrams.

State diagram: Product and operations teamsProduct and operations teams

Order states, exceptions and returns mapped before the workflow is built.

State diagram: Software developersSoftware developers

Loading, ready, updating and error states for an application screen or store.

State diagram: Game and rules designersGame and rules designers

Turn changes, fouls and winning conditions checked as a complete lifecycle.

How it works

How to make a state diagram in three steps.

01

Describe it

One paragraph is enough to start.

“Draw a traffic light state diagram that starts at Red, changes from Red to Green to Yellow on a timer, returns to Red, and can end when power is turned off.”
02

See the drawing

Drawn by the right engine.

State diagram: Traffic light
03

Say what changes

Every edit keeps a version.

Add a flashing red maintenance state.
V2 · DRAWN FROM V1, NOTHING RETYPED
FAQ

Common questions

What is a state diagram?

A state diagram is a behavioural diagram that models how one object or system changes state in response to events. States show conditions, while arrows show the transitions between them.

When should I use a state diagram?

Use one when something has a distinct lifecycle, such as an order, account, device, session or game. It helps expose missing transitions and edge cases.

What are the key elements of a state diagram?

The core elements are states, transition arrows, event labels, an initial state and final states. Transitions can also include guards that restrict when they occur and actions that run during the change.

What is the difference between a state diagram and an activity diagram?

A state diagram follows one thing through its possible conditions. An activity diagram follows work or decisions through a process, often across several people or systems.

How do I make a state diagram?

Describe the thing being modelled, its possible states, the events that trigger changes and any exception paths. Then refine the diagram by adding, removing or relabelling transitions.

Related tools

Other drawings for the same work.

Draw your first state diagram now.

Free account, no card. Describe the lifecycle and see the diagram in under a minute.

Open the editor