Flow & behavior
Model state machines and transitions with Mermaid and render them instantly. Export vector or raster — your text never leaves the tab.
There is no upload endpoint — your files are processed in this browser tab. Open your network tab and check. See how it stays private.
How to draw a state diagram
- Define states. List the states, including the start and end.
- Add transitions. Connect states with labeled events (Idle --> Loading: open).
- Group & nest. Use composite states for sub-machines where needed.
- Export. Save as SVG, PNG, or PDF.
State diagrams are how you get a UI, a network connection, or an order lifecycle right: they force you to enumerate every state and the exact events that move between them, which surfaces the transitions you forgot to handle.
Writing them in Mermaid keeps the model beside the code that implements it, and composite states let a complex machine stay readable by nesting detail.
For step-by-step logic reach for the Flowchart, for timing between components use the Sequence diagram, and to try Graphviz layouts use the Playground.
Frequently asked questions
When should I use a state diagram?
When something moves through distinct modes — a UI component, an order, a connection — and you want to show every state and what event moves it to the next.
Can I model nested or composite states?
Yes. Mermaid's stateDiagram-v2 supports composite states, so you can nest a sub-machine inside a parent state to manage complexity.
What's the difference from a flowchart?
A flowchart shows a process's steps; a state diagram shows the states a thing can be in and the events that transition between them — behavior, not procedure.
Is the diagram rendered on a server?
No. It's rendered locally in your browser, so nothing about your system's behavior is transmitted.
Related tools
- FlowchartWrite a flowchart in Mermaid text and see it render live, then export SVG, PNG, or PDF — all in your browser, nothing uploaded.
- Sequence diagramTurn a few lines of Mermaid into a clean sequence diagram of actors and messages. Live preview and SVG/PNG/PDF export, 100% on-device.
- Class diagramDescribe classes, fields, methods, and relationships in Mermaid and get a UML class diagram — live preview, local export, no sign-up.
- PlaygroundA free-form canvas for any Mermaid diagram or Graphviz DOT graph. Switch engines, edit live, and export — all on-device, nothing uploaded.