Mermaid Flow Player

Step through your Mermaid diagrams.

Wrap a diagram in one tag and it plays. Every step gets a URL you can send someone.

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

<mermaid-flow-player controls>
flowchart LR
  A[Hard] -->|Text| B(Round)
  B --> C{Decision}
  C -->|One| D[Result 1]
  C -->|Two| E[Result 2]
</mermaid-flow-player>

That is the whole thing. It also works on the diagrams you already have — Docusaurus, VitePress, Astro, Starlight, Jekyll, Hugo, Eleventy, and anything built on markdown-it, marked, Prism or Shiki.

Paste your own diagram

Your diagram

flowchart LR A[Request] --> B{Signed in?} B -->|No| C[Send to login] C --> A B -->|Yes| D[Load cart] D --> E{In stock?} E -->|No| F[Show sold out] E -->|Yes| G[Charge card] G --> H{Paid?} H -->|Declined| I[Retry once] I --> G H -->|Yes| J[Create order] J --> K[Send receipt] %% narrate A: A request arrives. Follow this one all the way through. %% narrate B: First question: do we know who this is? %% narrate C: If not, they go to login and come back here. %% narrate D: Signed in, so we load their cart. %% narrate E: Second question: is the stock still held? %% narrate F: If it went, we say so rather than taking the money. %% narrate G: Stock is held, so we charge the card. %% narrate H: Third question, and the one that fails most. %% narrate I: A decline gets exactly one retry, then it stops. %% narrate J: Payment cleared, so the order is real now. %% narrate K: And the receipt goes out. That is the whole path.

Save this as diagram.html Copy

Open it in a browser. No build step, no server, no install.

Three things people do with it

Explain a system to someone new

A new engineer reads an architecture diagram as a wall of boxes. Play it and they follow one request through the whole thing, in the order it actually happens.

Narration comes from %% narrate lines in the diagram source.

Walk an audience through a flow

You are on stage, or on a recorded call, and you need the room looking at the same arrow you are. Step forward when you are ready, not when the animation decides.

Arrow keys and space work. So does linking to step 4.

Upgrade a docs site you already have

Your diagrams are already written. Add the script tag and leave the markup alone. Auto mode finds hand-written .mermaid blocks and the fences your markdown pipeline renders, in both of the spellings that exist in the wild.

Works with Docusaurus, VitePress, Astro, Starlight, Jekyll, Hugo, Eleventy, and anything built on markdown-it, marked, Prism or Shiki.

See everything it does

Install itAPI reference