Mermaid Live Editor
Write Mermaid on the left and preview instantly on the right. Export, share via URL hash, or insert snippets — nothing is uploaded.
All processing on this page runs locally in your browser unless noted otherwise.
How to use
- Pick a diagram type and example, or import a .mmd / Markdown file.
- Use Layout / Panes for side-by-side, stacked, code-only, or preview-only. Drag/scroll to pan and zoom; Large opens a fullscreen diagram viewer.
- Snippets, Share / Embed, Clean, and exports stay local in your browser.
FAQ
Is my diagram uploaded?
No. Mermaid runs in your browser. Drafts stay in localStorage on this device. Share links encode the diagram in the URL hash — still no server storage.
Which diagram types work?
Anything supported by the bundled Mermaid version — flowcharts, sequence, class, ER, Gantt, state, and more. Each type has multiple sample variants in the second dropdown.
How do share and embed work?
Copy share link or iframe snippet from the Editor. Recipients open a read-only page or embed; the diagram is decoded from the URL in their browser. Very large diagrams may exceed URL length limits — use .mmd download instead. Host pages must allow iframes (avoid X-Frame-Options: DENY / blocking CSP frame-ancestors).
How do I pan and zoom the preview?
Drag to pan, scroll to zoom, and use + / − / Reset on the preview toolbar. Click Large for a fullscreen diagram viewer (Esc to close). Layout can switch side-by-side vs stacked, or code-only / preview-only.
Does the editor highlight Mermaid syntax?
Yes. The source pane uses CodeMirror with Mermaid highlighting, line numbers, Tab indent, and local autocomplete for diagram keywords and snippets. No AI is involved.