Mermaid State Diagrams

State diagrams represent the lifecycle of a system.

Use stateDiagram-v2 for the modern state diagram syntax.

Basic State Transition

stateDiagram-v2
    [*] --> Idle
    Idle --> Processing : Submit Event
    Processing --> Error : Fail
    Processing --> [*] : Success
    Error --> Idle : Retry

Try this code ❯

[*] represents the start or end pseudo-state.

A Simple Door

stateDiagram-v2
    [*] --> Closed
    Closed --> Open : open
    Open --> Closed : close
    Open --> [*]

Try this code ❯

Composite States

A state can contain smaller states.

stateDiagram-v2
    state Crash {
        [*] --> Minor
        Minor --> Major
        Major --> [*]
    }

Try this code ❯

Concurrent States

Parallel regions can be modeled with concurrency.

stateDiagram-v2
    [*] --> Active

    state Active {
        [*] --> NumLockOff
        NumLockOff --> NumLockOn : Press

        --

        [*] --> CapsLockOff
        CapsLockOff --> CapsLockOn : Press
    }

Try this code ❯