Auto Modes

There are five entry points, each tuned for a different starting point. The first two are zero-config and one-script — both auto-load Mermaid from a CDN if it isn’t already on the page.

Entry	Best for	Loads Mermaid?
mermaid-flow-player.element.js	New markup using <mermaid-flow-player>	Yes (if missing)
auto.js	Existing .mermaid divs you want to upgrade	Yes (if missing)
auto-init.js	Diagrams you’ve already rendered yourself	No — assumes Mermaid present
auto-enhance.js	data-flow-* attribute-driven scenarios	No
auto-play.js	Autoplay on load / scroll / click	No

Web Component

Controls Options

None

Default Sequential Controls

Explicit Sequential Controls

Interactive Restart

Live Examples

With Narration

Auto-Play

Minimap

autoInit()

import { createFlowPlayer } from 'https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/index.js';

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

await player.ready();
await player.play(player.path('Start', 'Process', 'Check'));

autoPlay()

import { autoPlay } from 'https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/auto-play.js';

autoPlay({
  trigger: 'scroll',
  speed: 1.5
});

Trigger Types

Trigger	Behavior
'load'	Plays immediately
'scroll'	Plays when scrolled into view
'click'	Plays on click

autoEnhance()

<mermaid-flow-player data-flow-scenario="A,B,C">
graph LR
  A --> B --> C
</mermaid-flow-player>

Data Attributes

Attribute	Description
data-flow-scenario	Comma-separated node IDs
data-flow-speed	Speed multiplier
data-flow-narration	Narration text

Choosing a Mode

Mode	Use Case
<mermaid-flow-player>	Quick demos
createFlowPlayer()	Production control
autoPlay()	Presentations
data-flow-*	Selective enhancement