Mermaid Diagram Live Editor
Validate Mermaid syntax, detect diagram type (flowchart, sequence, class, ER, gantt, pie, state, mindmap, gitGraph, journey, C4, timeline, quadrant, requirement, xychart), generate a shareable mermaid.live preview URL with base64 encoding, browse a syntax reference per type, and export as PNG or SVG via the live editor. Template gallery, line-anchored error decoder, history (localStorage), shareable URL. 100% client-side.
About Mermaid Diagram Live Editor
Validate Mermaid syntax, detect diagram type (flowchart, sequence, class, ER, gantt, pie, state, mindmap, gitGraph, journey, C4, timeline, quadrant, requirement, xychart), generate a shareable mermaid.live preview URL with base64 encoding, browse a syntax reference per type, and export as PNG or SVG via the live editor. Template gallery, line-anchored error decoder, history (localStorage), shareable URL. 100% client-side. Everything runs locally in your browser — your data never leaves your device.
How to use
- Enter your input in the tool above.
- Adjust any options to your preference.
- Use the Copy or Download buttons to save the result.
- Everything happens locally — your data never leaves your browser.
FAQ
How does the Mermaid live editor work?
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.
Which Mermaid diagram types are supported?
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.
How does the syntax validator work without running Mermaid?
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.
How do I share or export my diagram?
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.
What extra features does this tool have versus the official editor?
(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.
Related tools
.bashrc / .zshrc Alias & Config Manager
Build shell aliases, functions, exports, and PATH edits in a visual editor, then export a clean, commented .aliases file sourced from both .bashrc and .zshrc — with shadowing detection against shell builtins and common CLI tools, function suggestions when args are needed, starter packs (git, docker, kubectl, navigation, safety, ls, dev, devops, data science), import of existing rc files, dedupe, history (localStorage), and shareable URL. 100% client-side.
Add / Subtract Date Calculator
Add or subtract years, months, weeks, days, hours, minutes and seconds from a starting date/time. Calendar-day or business-day mode with custom weekend + holiday list. Month-end policy toggle (clamp to last day vs overflow). Repeat/series mode (e.g. every 2 weeks x 10) with CSV export. Shareable URL. 100% client-side.
Age Calculator
Calculate exact age from a birth date in calendar years/months/days (no negative-day bugs) plus totals in months/weeks/days/hours/minutes/seconds. Next-birthday countdown with weekday. Feb-29 birthday policy toggle. Milestones (1,000 days, 10,000 days, 1 billion seconds). Zodiac sign + Chinese zodiac. Age gap comparison. Shareable URL. 100% client-side.