Skip to content
Mermaid Flow Player

State Diagrams

Animate state machines showing states and transitions. Click any state to navigate through the machine.

Basic State Machine

Section titled “Basic State Machine”
stateDiagram-v2
[*] --> Idle
Idle --> Processing : Start
Processing --> Success : Complete
Processing --> Error : Fail
Error --> Idle : Retry
Success --> [*]
<script type="module">
  import { createFlowPlayer } from 'https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/index.js';


  const diagram = document.getElementById('diagram');
  const player = createFlowPlayer({
    root: diagram,
    source: diagram.textContent,
    dim: 'others'
  });


  await player.ready();
  await player.play(player.path('Idle', 'Processing', 'Success'));
</script>

Web Component:

<script src="https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/mermaid-flow-player.element.js"></script>


<mermaid-flow-player mode="interactive" controls theme="light">
stateDiagram-v2
  [*] --> Idle
  Idle --> Processing : Start
  Processing --> Success : Complete
  Processing --> Error : Fail
  Error --> Idle : Retry
  Success --> [*]
</mermaid-flow-player>

Order Lifecycle

Section titled “Order Lifecycle”
stateDiagram-v2
[*] --> Draft
Draft --> Submitted : Submit
Submitted --> Reviewing : Assign
Reviewing --> Approved : Approve
Reviewing --> Rejected : Reject
Rejected --> Draft : Revise
Approved --> Shipped : Ship
Shipped --> Delivered : Deliver
Delivered --> [*]

Connection States

Section titled “Connection States”
stateDiagram-v2
[*] --> Disconnected
Disconnected --> Connecting : connect()
Connecting --> Connected : success
Connecting --> Disconnected : timeout
Connected --> Disconnected : disconnect()
Connected --> Reconnecting : error
Reconnecting --> Connected : success
Reconnecting --> Disconnected : max_retries

Nested States

Section titled “Nested States”
stateDiagram-v2
[*] --> Active
state Active {
  [*] --> Running
  Running --> Paused : pause
  Paused --> Running : resume
}
Active --> Stopped : stop
Stopped --> Active : start
Stopped --> [*]

Writing the walk

Section titled “Writing the walk”

The states and the transitions between them are both steps — on a state diagram the transition is usually the story, so animate it rather than jumping between boxes:

await player.play([
  { type: 'node', id: 'Idle', note: 'Waiting for input' },
  { type: 'edge', from: 'Idle', to: 'Processing' },
  { type: 'node', id: 'Processing', note: 'Working...' },
  { type: 'edge', from: 'Processing', to: 'Success' },
  { type: 'node', id: 'Success', state: 'success', note: 'Done!' },
]);

Programmatic Control

Section titled “Programmatic Control”
<script type="module">
  import { createFlowPlayer } from 'https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/index.js';


  const diagram = document.getElementById('state-diagram');
  const player = createFlowPlayer({
    root: diagram,
    source: diagram.textContent,
    mode: 'interactive',
    dim: 'others'
  });


  await player.ready();
  // First node is automatically highlighted.
  // Click states to navigate — or use the API:
  const paths = player.getAvailablePaths();
  await player.selectPath(paths[0]);
</script>

Other Diagram Types

Section titled “Other Diagram Types”