Installation

One script tag

Auto mode finds the diagrams already on your page and turns each one into a player. Nothing about your markup changes.

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

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

Save that as a file and open it in a browser. There is no build step and no server: auto.global.js is a plain script, so it runs from file:// too. Mermaid loads itself from a CDN if it is not already on the page, and the CSS is bundled and injected.

What auto mode picks up

Your markup	Emitted by
<div class="mermaid"> / <pre class="mermaid">	hand-authored, Mermaid’s own docs
<pre><code class="language-mermaid">	markdown-it, marked, Prism, Jekyll, Hugo, Eleventy
<pre class="language-mermaid">	Shiki, Astro, Starlight, VitePress, Docusaurus

Point it somewhere else with ?selector=.

Already loading Mermaid yourself? Auto mode detects window.mermaid and uses your version rather than fetching its own. Do not run Mermaid with startOnLoad: true first, though: the upgrade needs the diagram source, and Mermaid replaces it with SVG.

Authoring new diagrams

When you are writing the markup anyway, use the element directly. It takes per-diagram options as attributes.

<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>

There is one player implementation. The element is what auto mode produces, so both routes get the same features.

Which file to load

File	URL
Auto mode (script tag)	https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/auto.global.js
Auto mode (ESM, for bundlers)	https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/auto.js
Web Component	https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/mermaid-flow-player.element.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

auto.js and auto.global.js are the same code in two module formats. Use auto.global.js in a <script> tag and auto.js when a bundler imports it: the ESM build carries export statements, and browsers refuse module scripts on a file:// page.

auto.global.js was published in 1.1. Versions before that named the same build auto.min.js, which still ships and still works.

Prefer to pick options in a form? The CDN Builder emits the script tags and query params for you.

Versions and stability

The examples above pin @latest, which tracks every release. Pin a version instead when you want the page to stop changing under you:

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

The package follows semver, so @2 takes fixes and features without breaking changes.

See every option in one place: the Showcase runs a live player for each control preset, mode, theme and narration setting.

Installing from npm

The CDN needs no install. Reach for the package when a bundler is doing the work:

npm install mermaid-flow-player

import 'mermaid-flow-player/auto';

Programmatic Control (CDN)

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

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

  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
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