Mermaid State Diagram

Visualize state machines and system behavior with state diagrams. Model states, transitions, and events for complex systems.

100%

Start typing to see your diagram

100% • Drag to pan

Quick Syntax Reference

Essential syntax for modeling state machines.

Basic StatesDefine states and transitions

stateDiagram
  [*] --> Idle
  Idle --> Running
  Running --> [*]

State TransitionsTransitions with events

stateDiagram
  Idle --> Running : start
  Running --> Paused : pause
  Paused --> Running : resume

Composite StatesNested state structures

state First {
  [*] --> Second
  Second --> Third
}

Fork and JoinParallel states

state fork {
  [*] --> fork
  fork --> A
  fork --> B
}

ChoiceConditional branching

state if_state <<choice>>
[*] --> IsValid
IsValid --> if_state
if_state --> Success : yes
if_state --> Error : no

NotesAdd annotations

Note right of State : Note text
Note left of State : Another note

State diagrams model the behavior of systems through states and transitions.

Model component states in frontend applications.

Document business process workflows.

Design communication protocols and handshakes.

Model game states and player actions.

Track order lifecycle from creation to delivery.

Document reactive system behaviors.