Mermaid template

State Diagram

States and transitions for lifecycles and machines — from order status to UI modes.

Source

Open in editor
stateDiagram-v2
    [*] --> Draft
    Draft --> InReview : submit
    InReview --> Draft : request changes
    InReview --> Approved : approve
    Approved --> Published : publish
    Published --> [*]

State diagrams describe every state a system can be in and what causes it to move between them. [*] marks the start and end pseudo-states; arrows are labeled with the triggering event.

Composite states nest a whole machine inside one state, which keeps large lifecycles readable.