State Diagrams

State diagrams visualize the states an entity can be in and the transitions between those states. They are invaluable for modeling workflows, user interfaces, protocol behavior, and any system with distinct operational modes.

Basic Example

stateDiagram-v2
    [*] --> Idle
    Idle --> Running : start
    Running --> Paused : pause
    Paused --> Running : resume
    Running --> Stopped : stop
    Stopped --> [*]

What You Get

Mermaid Studio provides solid support for state diagrams:

• Syntax highlighting for states, transitions, and labels
• Rename refactoring to update state names across the diagram
• Code folding to collapse composite states
• Brace matching for nested state definitions
• Inspections for detecting unreachable states and invalid transitions
• Color provider for styling state colors

Quick Syntax Reference

stateDiagram-v2
    [*] --> Active

    state Active {
        [*] --> Working
        Working --> Waiting : pause
        Waiting --> Working : resume
    }

    Active --> Inactive : disable
    Inactive --> Active : enable
    Inactive --> [*]

    note right of Active : Main operational state

Key elements:

• [*] - Initial and final states
• state1 --> state2 - Transition between states
• state1 --> state2 : event - Transition with event label
• state Name { } - Composite (nested) state
• note - Add notes to states

For complete syntax details, see the Mermaid State Diagram documentation.