State diagram

State diagrams show every state a system can be in and the events that move it between them — useful for anything with a lifecycle: a connection, an order, a UI component. zombie-mermaid supports nested composite states, start/end pseudostates, and animated edge transitions.

A connection's full lifecycle, state by state.

stateDiagram-v2
  [*] --> Idle
  Idle --> Active : start
  Active --> Idle : cancel
  Active --> Done : complete
  Done --> [*]

Where state diagrams come from, and how the syntax works.

State diagrams describe every state a system can be in and the transitions that move it from one to the next — a notation rooted in finite-state-machine theory and used anywhere behavior depends on history: a network connection, an order’s lifecycle, a UI component’s interaction states. Mermaid’s syntax marks the start and end of a flow with a `[*]` pseudostate, lets a composite state nest a whole sub-diagram inside a single box to model layered behavior, and supports choice points, forks, and joins for diagrams where more than one transition can happen at once.

Every State diagram example, on its own page.

Explore the other diagram types.