HomeDiagramsState diagram

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.

Source → render

A connection's full lifecycle, state by state.

connection.mmd
stateDiagram-v2
  [*] --> Idle
  Idle --> Active : start
  Active --> Idle : cancel
  Active --> Done : complete
  Done --> [*]
State diagram diagram, zombie-mermaid start cancel complete Idle Active Done
More examples

More real-world examples.

State diagram diagram, zombie-mermaid Processing submit done fail retry Idle Complete Error parse validate execute
State: Composite States
State diagram diagram, zombie-mermaid connect success timeout close error success max_retries done Closed Connecting Connected Disconnecting Reconnecting
State: Connection Lifecycle
State diagram diagram, zombie-mermaid 提交 成功 失败 重试 空闲 处理中 完成 错误
State: CJK State Names
Keep exploring

Explore the other diagram types.

Pick a look

Live in every built-in theme.