# State diagram maker — model state machines, no upload

> Free state diagram maker: model state machines and transitions with Mermaid and render them instantly. Export vector or raster — your text never leaves the tab.

Model state machines and their transitions with Mermaid and render them instantly, then export vector or raster. Everything runs in your browser, so your diagram text stays on device.

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.

## How to

1. **Define states.** List the states, including the start and end.
2. **Add transitions.** Connect states with labeled events (Idle --> Loading: open).
3. **Group & nest.** Use composite states for sub-machines where needed.
4. **Export.** Save as SVG, PNG, or PDF.

## FAQ

### 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

- [Flowchart](https://www.safepaper.app/diagram/flowchart)
- [Sequence diagram](https://www.safepaper.app/diagram/sequence-diagram)
- [Class diagram](https://www.safepaper.app/diagram/class-diagram)
- [Playground](https://www.safepaper.app/diagram/playground)

---

Canonical HTML: https://www.safepaper.app/diagram/state-diagram
Markdown: https://www.safepaper.app/diagram/state-diagram.md

There is no upload endpoint — your files are processed in this browser tab. Open your network tab and check.