Skip to content
Mermaid Flow Player

Mermaid Flow Playerv0.1

Diagrams that play, narrate, and remember where you left off.

Render Mermaid once, then let people step through the flow with controls, narration, minimap, and URL state — without depending on Mermaid’s internal DOM.

Install

Open showcaseAPI reference
01 ─ livecontrols · minimap · narration
02 ─ features

Composable pieces, sane defaults.

  1. /01Semantic node targeting.

    Reference nodes by their Mermaid IDs (A, B, X1) — never by brittle DOM selectors.

  2. /02Three ways in.

    Drop in the auto script, the <mermaid-flow-player> web component, or the programmatic API. Same engine.

  3. /03State that survives reloads.

    URL-synced step, persisted “visited” set, theme-aware rendering. Bookmarks just work.

  4. /04Narration & TTS hooks.

    Per-step text plus mfp:step events. Wire it to speechSynthesis in five lines.

03 ─ next

Pick a path.

InstallCDN or npm in 30 secondsShowcaseEvery option, side-by-sideReferenceMethods, hooks, configurationThemesLight, dark, custom Mermaid themes