Interactive Mode

Click nodes to step through a diagram.

Live Demo

Click on nodes to advance. Dashed nodes are available paths.

Web Component

<mermaid-flow-player mode="interactive" controls>
graph LR
  A --> B --> C
</mermaid-flow-player>

Example

Programmatic API

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

await player.ready();
const paths = player.getAvailablePaths();
await player.selectPath('A->B');

API Methods

Method	Description
nextStep()	Advance to next node
getAvailablePaths()	Get paths from current node
selectPath(edgeKey)	Choose a path
getCurrentNode()	Get current node ID
reset()	Reset to start

Theming

:root {
  --mf-interactive-current-color: #3b82f6;
  --mf-interactive-available-color: #3b82f6;
}