Query Parameters

Configure Mermaid Flow Player via URL query parameters — no code changes needed.

Supported Parameters

live live example

graph LR A[URL Params] --> B[Parse] B --> C[Apply Config] C --> D[Animate]

Parameter	Values	Description
theme	light, dark, auto	Set theme
speed	Number (e.g. 1.5)	Animation speed multiplier
stepMs	Number (e.g. 800)	Milliseconds per step
visited	true, false	Keep visited nodes highlighted
mode	sequential, interactive	Playback mode
selector	CSS selector (e.g. .my-diagram)	Which blocks to upgrade (default: .mermaid)
step	Number	Deep-link straight to a step index
autoplay	(flag)	Auto-play on load
trigger	load, scroll	When autoplay fires
minimap	true, false	Show the minimap
sync-url	true, false	Reflect viewport state in the URL
autoCenter	true, false	Pan to the active node
narration	true, false	Render the caption area
narration-text	Text	Initial caption text
debug	(flag, no value needed)	Enable debug logging

Examples

Dark Theme, Slow Speed

https://your-site.com/docs?theme=dark&speed=0.5

Debug Mode

https://your-site.com/docs?debug

Interactive Mode

https://your-site.com/docs?mode=interactive

Fast with Edge Animation

https://your-site.com/docs?speed=2.0

Auto-Play on Scroll

Playback waits until the diagram is on screen, so it isn’t already finished by the time the reader scrolls to it.

https://your-site.com/docs?autoplay&trigger=scroll

Custom Diagram Selector

Use a CSS selector other than .mermaid so only those blocks are upgraded. Per-diagram behaviour is set with attributes on the block itself, or with multiple autoInit() calls.

https://your-site.com/docs?selector=.my-diagram

The web component (<mermaid-flow-player>) does not use a global selector; each instance is self-contained and uses its own root.

Configuration Precedence

Parameters are merged with other config sources. Higher precedence wins:

1. autoInit() options (highest) — autoInit({ controls: false })
2. Per-block attributes — speed="1.0" or data-flow-speed="1.0"
3. URL query parameters — ?speed=1.5
4. Defaults (lowest) — built-in defaults

A block that states its own value keeps it, so one diagram can opt out of a site-wide ?speed= without the URL fighting the markup.

Parsing

Query parameters are parsed automatically by auto() and autoInit():

<!-- These auto modes read URL params automatically -->
<script src="https://cdn.jsdelivr.net/npm/mermaid-flow-player@latest/auto.global.js"></script>

For programmatic use:

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

  // Parse URL params
  const config = parseQueryParams();
  console.log(config);
  // { theme: 'dark', speed: 1.5, debug: true, ... }

  // Use parsed config
  const diagram = document.getElementById('diagram');
  const player = createFlowPlayer({
    root: diagram,
    source: diagram.textContent,
    visited: config.visited,
    timing: config.stepMs ? { stepMs: config.stepMs } : undefined,
    debug: config.debug,
  });
</script>

Caching

Query parameters are parsed once and cached for performance:

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

// First call parses and caches
const config1 = parseQueryParams();

// Subsequent calls return cached result
const config2 = parseQueryParams();

// Force re-parse (e.g., after URL change)
clearQueryConfigCache();
const config3 = parseQueryParams();

Use Case: Shareable Diagram Links

Create links that configure the viewing experience:

<a href="diagrams/architecture?theme=dark&speed=0.8">
  View Architecture (Dark, Slow, with Edges)
</a>

<a href="diagrams/architecture?mode=interactive&debug">
  Explore Architecture (Interactive + Debug)
</a>