A free state machine diagram maker that walks every transition
- Free
- No sign-up
- Works offline
Name the states, label the events that move between them, then press Present and watch the machine step through its own lifecycle.
Present reveals your state machine diagram one step at a time, on its own.
A state machine is the diagram to draw when something has a lifecycle — an order, a ticket, a certificate, a subscription — and the interesting question is what can happen next. Free, no sign-up, stored in your browser.
It is the cheapest bug-finding tool in the set, because drawing it forces you to answer a question code often leaves implicit: from this state, what events are legal, and what happens to the ones that are not?
States, transitions, guards and self-loops
A state is a condition the thing rests in — Pending, Shipped, Revoked. A transition is an arrow from one to another, labelled with the event that causes it. Where the same event can lead two ways, add a guard — the condition in brackets that decides which arrow is taken.
Two details separate a working diagram from a sketch. A self-loop records an event that is legal but changes nothing — a retry that leaves the state alone — and drawing it stops a reader assuming the event is impossible. And every machine needs a real start and at least one terminal state; a diagram you cannot leave is describing a system that never finishes.
The question the diagram is really asking
Read a state machine by standing in one state and asking: which arrows leave here, and what happens to every event that is not on one of them? That second half is where the bugs are. An order in Cancelled receiving a payment webhook is not a hypothetical, and the diagram is where you decide whether it is ignored, logged or an error — before it is discovered in production.
Present it one transition at a time
Press Present and the machine builds itself: the start state, then each transition in turn, narrated. It is the fastest way to bring somebody onto a system whose lifecycle they have never seen, and it works as well in a design review as in documentation.
How to make a state machine diagram, start to export
Open the editor, add the start state, then a state for each condition the thing can rest in. Draw a transition for every legal event and label it; add guards where one event branches, and self-loops for events that change nothing. Mark the terminal states, then export or present.
Free, private, and offline
Diagramium is free and there is no paid tier. Draw, present and export PNG or SVG without an account; a free account unlocks the animated export formats — GIF, video and animated SVG.
Your diagram is stored in your own browser, not on a server. It keeps working with the network off, and nothing is uploaded unless you choose to publish it.
Frequently asked questions
Is this state machine diagram maker free?
Diagramium is free and there is no paid tier. Draw, present and export PNG or SVG without an account; a free account unlocks the animated export formats — GIF, video and animated SVG.
What is the difference between a state machine and a flowchart?
A flowchart shows a procedure running once from start to finish. A state machine shows a thing that persists and responds to events over time — it has no single run, and it can sit in a state indefinitely waiting for something to happen.
How do I show a guard condition?
Put it in square brackets after the event on the transition label — submit [amount < limit]. Guards are what let one event lead to two different states without ambiguity.
Do I need to draw every possible transition?
Draw every legal one. The ones you leave out are, by implication, illegal — so it is worth being deliberate about that rather than accidental, and worth deciding what the system does when an illegal event arrives anyway.
Can I animate the transitions?
Yes. Present mode reveals each transition in order, and the animated exports — GIF, video and animated SVG — keep that motion in a file you can embed in documentation.
More diagram makers
A flowchart maker that walks its own path · The sequence diagram maker that draws what you type · A mind map maker that turns brainstorms into walkthroughs · An architecture diagram maker that walks the request path · A UML diagram maker that walks through your design · An ER diagram maker that presents your schema step by step · A data flow diagram maker that presents the path data takes · The animated diagram maker where diagrams explain themselves · An AI Diagram Maker for the Assistant You Already Use · A free timeline maker for roadmaps, launches, and history · The Gantt Chart Maker That Explains Your Schedule · Software release plan maker: from code freeze to hotfix lane · RASCI matrix maker: one lane per role, every hand-off explicit · A free org chart maker that presents itself level by level · A free Venn diagram maker where the overlap is the point · A free process map maker for the way work actually runs · A free concept map maker where every link says what it means · A free customer journey map maker that shows where it hurts · A free decision tree maker where every path reaches an answer · A free fishbone diagram maker for finding the actual cause · A free network diagram maker that keeps your topology private · A free use case diagram maker that shows who can do what · A free threat model maker that stays on your machine · A free C4 model maker, one level at a time · A free BPMN diagram maker for processes two teams must agree on · A free kanban board maker for explaining how work flows · A free sitemap diagram maker for planning a site's structure