Back to Documentation

State Diagrams

Represent states and transitions in systems

Quick Start

Basic Syntax

stateDiagram-v2
[*] --> State1
State1 --> State2
State2 --> [*]

Live Preview

Loading preview...

State Types

[*] --> State
Initial state transition
State --> [*]
Final state transition
State1 --> State2
Basic transition
State1 --> State2 : event
Transition with trigger
state State { ... }
Composite state
State : description
State with description

Complete Examples

Basic State Machine
Simple state transitions for a door

Code

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

Preview

Loading preview...

Use Case

Perfect for modeling simple state machines and workflows

User Authentication Flow
Complex authentication states with error handling

Code

stateDiagram-v2
    [*] --> Unauthenticated
    
    Unauthenticated --> Authenticating : login
    Authenticating --> Authenticated : success
    Authenticating --> Unauthenticated : failure
    
    Authenticated --> Unauthenticated : logout
    Authenticated --> Refreshing : token_expired
    Refreshing --> Authenticated : refresh_success
    Refreshing --> Unauthenticated : refresh_failed
    
    state Authenticated {
        [*] --> Active
        Active --> Idle : no_activity
        Idle --> Active : user_action
    }
    
    note right of Authenticating : Validating credentials
    note left of Refreshing : Refreshing access token

Preview

Loading preview...

Use Case

Ideal for complex system states with nested behaviors