editors

Interactive Mermaid Diagram

render Mermaid flowcharts as an auto-laid-out interactive canvas with pan, zoom, and fullscreen powered by ELK.js and React Flow

About Interactive Mermaid Diagram

Interactive Mermaid Diagram renders Mermaid flowchart syntax as an auto-laid-out interactive canvas. ELK.js computes node placement, React Flow draws the canvas, and you can pan, zoom, and go fullscreen — all in the browser.

Use cases

Explore a complex flowchart without squinting at a static SVG — pan, zoom, and use fullscreen mode.
Compare ELK's layered layout against Mermaid's default Dagre placement to find the cleanest version of a diagram.
Share an indexable URL for a flowchart that loads quickly and stays interactive on the receiving end.

Examples

Render a top-down decision flow with a diamond branch and labelled edges.

Input

flowchart TD
  Start([Receive request]) --> Auth{Authenticated?}
  Auth -- Yes --> Handle[Run handler]
  Auth -- No --> Reject[Return 401]
  Handle --> Done([Send response])
  Reject --> Done

Output

An interactive canvas with rounded start/end nodes, a diamond decision, and clean ELK-routed edges. Pan, zoom, or go fullscreen to inspect.

Switch to a left-to-right pipeline by changing the direction directive.

Input

flowchart LR
  Ingest --> Parse --> Transform --> Load

Output

ELK re-runs the layered algorithm horizontally. The canvas reflows nodes left-to-right while preserving edge routing.

FAQ

How is this different from Mermaid Diagram Editor + Previewer?

Mermaid Diagram Editor + Previewer renders Mermaid's own SVG output and supports all Mermaid diagram types (sequence, gantt, class, ER, and more). Interactive Mermaid Diagram is flowchart-only: it parses your source with Mermaid, runs ELK.js layered layout, and draws the result on a pan-zoom React Flow canvas with fullscreen support.

Which Mermaid diagram types are supported?

Only `flowchart` (and the legacy `graph`) syntax. Other Mermaid diagrams (sequence, gantt, pie, class, ER, state, journey) do not map to a node-edge graph that ELK can lay out — use Mermaid Diagram Editor + Previewer for those.

Does the tool honor `flowchart TD`, `LR`, `BT`, `RL`?

Yes. The direction is read from your source and passed to ELK so the layout matches your intent. Switching the directive reflows the canvas automatically.

Does anything leave my browser?

No. Parsing, layout, and rendering all happen client-side. Your draft is stored in `localStorage` so it survives reloads on the same device.