Skip to content
Mermaid Flow Player

Flowchart Diagrams

Flowcharts are the most common diagram type. Every feature works with them.

Basic Flowchart

Section titled “Basic Flowchart”
live live example
graph TB Start([Start]) --> Init[Initialize] Init --> Process[Process Data] Process --> Check{Valid?} Check -->|Yes| Save[(Save)] Check -->|No| Error[Handle Error] Save --> End([End]) Error --> End 
<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('Start', 'Init', 'Process', 'Check', 'Save', 'End'),
    { speed: 1.2 }
  );
</script>

Web Component:

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


<mermaid-flow-player controls theme="light">
graph TB
  Start([Start]) --> Init[Initialize]
  Init --> Process[Process Data]
  Process --> Check{Valid?}
  Check -->|Yes| Save[(Save)]
  Check -->|No| Error[Handle Error]
  Save --> End([End])
  Error --> End
</mermaid-flow-player>

Left-to-Right Flow

Section titled “Left-to-Right Flow”
live live example
graph LR A[Start] --> B{Decision} B -->|Option 1| C[Action 1] B -->|Option 2| D[Action 2] B -->|Option 3| E[Action 3] C --> F[Merge] D --> F E --> F F --> G[End]

CI/CD Pipeline

Section titled “CI/CD Pipeline”
live live example
graph LR A[Commit] --> B[Build] B --> C[Unit Tests] C --> D{Tests Pass?} D -->|Yes| E[Deploy Staging] D -->|No| F[Fix & Retry] E --> G[Integration Tests] G --> H{All Green?} H -->|Yes| I[Deploy Production] H -->|No| F F --> A

Writing the walk yourself

Section titled “Writing the walk yourself”

A scenario is an array of steps, played in order. player.path(...) builds the node steps for a straight run; write the array out when you want notes, edges or pauses between them.

<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 });
  await player.ready();


  await player.play([
    { type: 'node', id: 'Start', note: 'A request arrives.' },
    { type: 'edge', from: 'Start', to: 'Check' },
    { type: 'node', id: 'Check', note: 'We decide where it goes.' },
    { type: 'wait', ms: 400 },
    { type: 'node', id: 'Save', state: 'success' },
  ]);
</script>

With States

Section titled “With States”
// Highlight different states
await player.play([
  { type: 'node', id: 'Start', state: 'active', note: 'Beginning' },
  { type: 'node', id: 'Process', state: 'active', note: 'Processing...' },
  { type: 'node', id: 'Check', state: 'warning', note: 'Validating' },
  { type: 'node', id: 'Save', state: 'success', note: 'Saved!' },
  { type: 'node', id: 'Error', state: 'error', note: 'Failed!' },
]);

Subgraphs

Section titled “Subgraphs”
live live example
graph TB subgraph Frontend A[UI] --> B[API Client] end subgraph Backend C[API Server] --> D[Database] end B --> C

All Node Shapes

Section titled “All Node Shapes”
live live example
graph LR A([Stadium]) --> B[[Subroutine]] B --> C[(Database)] C --> D((Circle)) D --> E{Diamond} E --> F[Rectangle]

Features

Section titled “Features”
  • Auto-detection of flowchart type (graph/flowchart keyword)
  • Edge animation (best-effort)
  • All node shapes supported (rectangle, diamond, stadium, cylinder, circle, etc.)
  • Subgraphs supported
  • Left-to-right (LR), top-to-bottom (TB), and other orientations
  • Interactive step-through
  • Theme support

Other Diagram Types

Section titled “Other Diagram Types”