Mermaid State Diagrams

calendarDec 12, 2024 · 2 min read · mermaid state state-machine uml diagram diagrams  ·
Share on: linkedincopy

State diagrams visualize the states of a system and transitions between them. Perfect for modeling state machines, workflows, and system behavior.

Use Case

Use state diagrams when you need to:

  • Model state machines
  • Document system states and transitions
  • Show workflow states
  • Visualize state transitions
  • Design finite state automata

Code

1```mermaid
2stateDiagram-v2
3    [*] --> Idle
4    Idle --> Processing: start
5    Processing --> Success: complete
6    Processing --> Error: fail
7    Error --> [*]
8    Success --> [*]
9```

Result:

Explanation

  • stateDiagram-v2 - Modern state diagram syntax
  • [*] - Start/End state
  • --> - State transition
  • : label - Transition label
  • States can be simple or composite

Examples

Example 1: Order Processing State Machine

 1```mermaid
 2stateDiagram-v2
 3    [*] --> Pending
 4    Pending --> Processing: payment_received
 5    Processing --> Shipped: order_fulfilled
 6    Processing --> Cancelled: payment_failed
 7    Shipped --> Delivered: delivery_complete
 8    Delivered --> [*]
 9    Cancelled --> [*]
10```

Result:

Example 2: Composite States

 1```mermaid
 2stateDiagram-v2
 3    [*] --> NotShooting
 4    
 5    state NotShooting {
 6        [*] --> Idle
 7        Idle --> Configuring: evConfig
 8        Configuring --> Idle: evConfig
 9    }
10    
11    NotShooting --> Shooting: evShutterRelease
12    Shooting --> NotShooting: evShutterRelease
13    
14    state Shooting {
15        [*] --> Idle
16        Idle --> Processing: evImage
17        Processing --> Idle: evDone
18    }
19```

Result:

Example 3: Concurrent States

 1```mermaid
 2stateDiagram-v2
 3    [*] --> Active
 4    
 5    state Active {
 6        [*] --> NumLockOff
 7        NumLockOff --> NumLockOn : EvNumLockPressed
 8        NumLockOn --> NumLockOff : EvNumLockPressed
 9        --
10        [*] --> CapsLockOff
11        CapsLockOff --> CapsLockOn : EvCapsLockPressed
12        CapsLockOn --> CapsLockOff : EvCapsLockPressed
13        --
14        [*] --> ScrollLockOff
15        ScrollLockOff --> ScrollLockOn : EvScrollLockPressed
16        ScrollLockOn --> ScrollLockOff : EvScrollLockPressed
17    }
18```

Result:

Notes

  • Use stateDiagram-v2 for modern syntax (recommended)
  • [*] represents start/end states
  • Composite states use state StateName { ... }
  • Concurrent regions use -- separator
  • Transition labels are optional

Gotchas/Warnings

  • ⚠️ Syntax: Use stateDiagram-v2 not stateDiagram (deprecated)
  • ⚠️ Start/End: [*] must be used for initial/final states
  • ⚠️ Labels: Transition labels come after the colon
  • ⚠️ Complexity: Deeply nested states can be hard to read

Related Snippets