Question 1

How does the Mermaid live editor work?

Accepted Answer

Type or paste Mermaid syntax in the editor — we detect the diagram type (flowchart, sequence, class, ER, gantt, pie, state, mindmap, gitGraph, journey, C4, timeline, quadrant, requirement, or xychart), validate the syntax line-by-line, show a friendly error decoder with the offending line highlighted, and generate a shareable mermaid.live URL (base64-encoded) so you can open the diagram in the official live editor for rendering and PNG/SVG export.

Question 2

Which Mermaid diagram types are supported?

Accepted Answer

Fifteen types are auto-detected from the first non-comment line of your code: flowchart (graph), sequenceDiagram, classDiagram, erDiagram, gantt, pie, stateDiagram-v2 (and stateDiagram), mindmap, gitGraph, journey, C4Context / C4Container / C4Component, timeline, quadrantChart, requirementDiagram, and xychart-beta. The reference panel shows a minimal starter template for each.

Question 3

How does the syntax validator work without running Mermaid?

Accepted Answer

The validator runs pure-JS structural checks per diagram type — e.g. flowchart validates node IDs and arrow types (--> ---> -.-> ==>), sequenceDiagram checks for `participant`/`actor` declarations and arrow types (`->`, `-->`, `->>`, `-->>`), classDiagram verifies class blocks and relationship arrows (`<|--`, `*--`, `o--`), gantt checks for `section` and date format headers, pie checks for data rows, and stateDiagram checks for `state` declarations and transitions. Line numbers are reported so you can jump to the problem.

Question 4

How do I share or export my diagram?

Accepted Answer

Click "Open in mermaid.live" — we encode your source as base64 and append it to the URL fragment (`#base64:...`). The official live editor loads it, renders the diagram, and offers PNG/SVG export buttons. You can also copy the encoded URL, copy the raw Mermaid code, download the .mmd file, or copy a Markdown snippet that embeds the mermaid.live link.

Question 5

What extra features does this tool have versus the official editor?

Accepted Answer

(1) Pure-JS syntax validator with line-anchored errors. (2) Auto diagram-type detector for 15 types. (3) Starter template gallery per type. (4) mermaid.live shareable URL generator (base64). (5) Markdown embed snippet with the live URL. (6) PNG/SVG export hint with link to mermaid.live. (7) Per-type syntax reference card. (8) Live char/line count and last-good render tracking. (9) Auto-format / indent normalizer. (10) Stats (line count, type counts). (11) History (localStorage, last 20). (12) Shareable URL with the source encoded. 100% client-side — no rendering happens on a server, no account, no upload.

Mermaid Diagram Live Editor

Export

How to use

Export