Installation

CDN — one script

Both CDN entry points auto-load Mermaid from a CDN if it isn’t already on the page. You don’t need a separate Mermaid <script> — pick one entry point and you’re done.

Web component

Best when you’re authoring new markup:

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

<mermaid-flow-player controls>
  flowchart LR
  A[Start] --> B[Process] --> C[End]
</mermaid-flow-player>

Auto mode

Best when you have existing .mermaid divs (e.g. on a docs site or blog):

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

<div class="mermaid">
  flowchart LR
  A[Start] --> B[Process] --> C[End]
</div>

auto.js waits for the DOM, ensures Mermaid is loaded, renders every .mermaid block, then adds controls + narration.

Already loading Mermaid yourself? Either entry point detects window.mermaid and uses your version instead of fetching its own.

CDN URLs

File	URL
Web Component	https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/mermaid-flow-player.element.js
Auto mode (ESM)	https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/auto.js
Auto mode (IIFE)	https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/auto.global.js
Auto-init (ESM)	https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/auto-init.js
Full library (ESM)	https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/index.js
Full library (UMD)	https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/mermaid-flow-player.umd.js
CSS (optional)	https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/mermaid-flow-player.css

Live Demos

Basic Example

Full Controls + Minimap

Dark Theme

Interactive Mode

Auto-Play + Speed

Sequence Diagram

State Diagram

npm / pnpm / yarn

npm install mermaid-flow-player
# or
pnpm add mermaid-flow-player
# or
yarn add mermaid-flow-player

Programmatic Control (CDN)

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

  const player = createFlowPlayer({
    root: document.getElementById('my-diagram'),
    dim: 'others',
    edgeMode: 'bestEffort',
  });

  await player.ready();
  await player.play(player.path('A', 'B', 'C'), { speed: 1.5 });
</script>

Web Component Attributes

Attribute	Values	Default	Description
controls	presence attribute, none, or comma-separated tokens like play-pause,previous,next,speed,all-paths	all sequential controls / restart in interactive mode	Which controls to show
mode	sequential, interactive	sequential	Playback mode
theme	light, dark, auto	—	Color theme
speed	number (0.5-10)	1.2	Animation speed
narration	true, false	true	Show narration area
narration-text	string	—	Initial narration text
minimap	—	—	Show minimap
edge	off, bestEffort	bestEffort	Edge animation mode
visited	true, false	true	Track visited nodes
autoplay	—	—	Start playing on load
debug	—	—	Enable debug logging
sync-url	—	—	Sync state to URL
auto-center	—	—	Auto-center on active node

Next Steps

• Auto Modes — Learn about the 4 auto modes
• Features — Explore all capabilities
• API Reference — Full programmatic API