State Machine Diagram Generator — type transitions, get a clean FSM
Make a state diagram online by typing plain text. Each line is a transition — from-state, arrow, to-state, event label — and the finite state machine renders live with a presentation-ready layout. Free, no signup, exports to SVG and PNG.
This is a quick preview. The full editor adds AI generate, save & share links, every theme, and watermark-free HD export.
Open full editor →What is a state diagram?
A state diagram (or state machine diagram) shows every state a thing can be in and the events that move it between them: an order from placed to shipped, a document from draft to published, a connection from idle to closed. Start and end markers bracket the lifecycle, and each labelled arrow is a transition — which makes missing transitions and unreachable states visible at a glance.
Common use cases
Draft → review → approved → published, with rejection loops — exactly the shape of document, ticket, and order lifecycles.
Connecting, retrying, backing off, closed — a state diagram is the honest picture of what your client actually does under failure.
Loading, empty, populated, error — enumerate the screens a component can be in and the events that move it, before the edge cases surprise you.
Syntax quick reference
The essentials to get productive — paste any of these into the editor above and adapt. For the full grammar, see the state diagram syntax reference.
| Syntax | What it does |
|---|---|
stateDiagram-v2 | Start a state diagram. |
[*] --> Draft | The start marker — the initial state. |
Draft --> InReview : submit | A transition with its triggering event after the colon. |
Published --> [*] | A transition to the end marker. |
state Fork <<fork>> | Fork/join bars for parallel paths. |
state Active { … } | A composite state with nested substates. |
Export options
Vector output with fonts inlined — crisp at any zoom, right for docs, READMEs, and the web.
Raster with optional transparent background and up to 4× scale — right for slides and tickets.
One click publishes a share page with the beautified diagram — no file juggling for reviews.
Frequently asked questions
How do I make a state diagram online for free?
Type one transition per line in the editor above — FromState --> ToState : event. The finite state machine renders live with a clean layout and exports to SVG or PNG without signup.
How do I show where the state machine starts and ends?
Use the [*] marker: [*] --> Draft is the entry point, Published --> [*] is a terminal transition. A machine can have multiple terminal transitions — every path that legitimately ends should reach [*].
Can I model loops, like a rejection that goes back to review?
Yes — a transition back to an earlier state is just another line: ChangesRequested --> InReview : resubmit. The preloaded example has a full reject/resubmit loop; edit it in place to watch it re-render.
What is the difference between a state diagram and a flowchart?
A flowchart follows one execution through steps and decisions; a state diagram describes all the states a single thing can occupy and the events that move it. If your boxes are verbs, you want a flowchart; if they are conditions of being — Draft, Approved, Closed — you want a state machine.
Can I generate the diagram from AI output?
Yes. Ask any AI assistant for "a Mermaid stateDiagram-v2 of …", paste the code here, and it renders with a beautified layout. A command-line tool and editor plugins let agents and scripts export diagrams directly.
Is this state diagram maker really free?
Yes. Anonymous use covers live preview, beautify, and SVG/PNG export with a small watermark; a free account removes the watermark. Per-month export quotas are listed on the pricing page.
Ready to make your own?
Open the full editor to save your work, switch themes, and export clean SVG or PNG. No signup.