Skip to content
en
All tools

Categories

Developer ToolsEncoding & DecodingJSON & DataHash & ChecksumText ToolsDate & TimeNetwork ToolsFile ToolsMarkdown & Diagrams

State Diagram Generator

List transitions between states and get a state machine diagram with events on the arrows.

Processed locally in your browser

Options
Outline: one transition per line, "From -> To: event". [*] is the start/end. Or paste "stateDiagram-v2" code.0 chars · 0 lines
The result will appear here.

What is State Diagram Generator?

A state diagram (finite state machine) describes the states an object or process can be in and the events that move it from one state to another. It is used for order lifecycles, UI flows, protocol handling and game logic.

In quick mode you write one transition per line, "From -> To: event", and use [*] for the start and end. The tool converts it to Mermaid stateDiagram-v2 code, aliasing names that contain spaces, and shows the generated code beside the diagram. You can also paste your own stateDiagram code with composite states, forks and notes, and set the layout direction.

How does it work?

  1. Write transitions such as "Idle -> Processing: submit", one per line; use [*] for the initial and final state.
  2. Or paste stateDiagram-v2 code for composite states, choices and notes.
  3. Choose the layout direction and a theme.
  4. Export SVG or PNG, or copy the generated Mermaid code.

Common use cases

  • Modelling an order lifecycle: created, paid, shipped, delivered, cancelled.
  • Documenting a UI or wizard flow with the event that triggers each screen change.
  • Describing a network protocol or connection state machine.
  • Planning game logic or a workflow engine before coding it.

Examples

Try this input in the tool above:

stateDiagram-v2
    direction LR
    [*] --> Idle
    Idle --> Processing : submit
    Processing --> Success : ok
    Processing --> Failed : error
    Failed --> Idle : retry
    Success --> [*]

Privacy

State Diagram Generator runs entirely in your browser. The text or files you provide are processed on your device and are not uploaded, logged or stored on our servers.

Limitations

The quick outline covers simple transitions only. Composite states, forks, joins, choices and notes need stateDiagram-v2 code. Mermaid draws the diagram but does not verify that the machine is complete or deterministic.

Frequently asked questions

How do I mark start and end states?

Use [*] as the source for the initial state ("[*] -> Idle") and as the target for the final state ("Done -> [*]").

Can state names contain spaces?

Yes. A name like "Waiting for payment" is declared as a labelled state with a generated id, so transitions stay valid Mermaid.

What is the difference between stateDiagram and stateDiagram-v2?

stateDiagram-v2 is the newer renderer with better layout and more features. The outline mode always generates v2 code.

Related tools

More tools in Markdown & Diagrams →