Mermaid Live Editor with Instant Diagram Preview
The Mermaid live editor lets you write diagrams as plain text using Mermaid.js syntax and watch them render the moment you type. A split-pane layout puts your code on one side and a live preview on the other, so you go from idea to finished diagram without ever leaving the page.
It is built for developers, technical writers, and anyone who would rather describe a diagram in code than drag boxes by hand. Pick from nine diagram types — flowcharts, sequence, class, state, ER, Gantt, pie, mindmaps, and git graphs — then export the result as a crisp SVG or PNG.
How to Use the Mermaid Editor
Pick a starting point
The editor opens with a sample flowchart. Keep editing it, or open the Templates menu and choose one of nine ready-made diagrams to start from.
Write your code
Type Mermaid syntax in the left panel. Line numbers track your structure, and Tab / Shift+Tab add or remove a four-space indent as you go.
Watch the live preview
The preview re-renders automatically a moment after you stop typing. If the syntax is off, a clear error message appears below the editor so you can fix it.
Export or copy
Download the diagram as SVG or PNG, or copy the SVG markup straight to your clipboard to paste into another document or tool.
Features
Live Preview
Your diagram re-renders automatically as you type, giving instant visual feedback with Mermaid.js.
9 Diagram Types
Build flowcharts, sequence, class, state, ER, Gantt, pie, mindmap, and git graph diagrams from text.
Built-in Templates
Start fast with a working example for every supported diagram type, then tweak the syntax to fit.
Code Editor with Line Numbers
Line numbers plus Tab and Shift+Tab indentation keep multi-line diagram code tidy and readable.
Real-Time Error Display
Syntax problems are shown clearly below the editor so you know exactly what to fix.
SVG & PNG Export
Save a scalable SVG for web and documents, or a high-resolution PNG rendered at 2x scale.
Copy SVG to Clipboard
Copy the rendered SVG markup with one click to paste directly into another app or codebase.
Zoom 25% to 300%
Zoom the preview with the +/− buttons or Ctrl + mouse wheel, and reset to 100% any time.
Resizable Split Pane
Drag the divider to rebalance the editor and preview, with a stacked layout on small screens.
Auto-Save
Your code is saved to your browser automatically and restored exactly where you left off.
Dark Mode
Switch themes and the Mermaid diagram theme follows, so diagrams always match the page.
Fully Client-Side
All rendering happens in your browser — no uploads, no accounts, and no tracking of your code.
Frequently Asked Questions
What is a Mermaid diagram?
Mermaid is an open-source JavaScript library that turns text-based definitions into diagrams. Instead of drawing shapes by hand, you write a short, markdown-like description of the structure and Mermaid renders it as a finished visual diagram.
How do I write Mermaid syntax?
The quickest way to learn is to open the Templates menu and load a working example for the diagram type you want. Study how nodes, arrows, and labels are written, then edit the code and watch the live preview update. Each diagram type — flowchart, sequence, class, and so on — has its own simple keyword for its first line.
What diagram types does this editor support?
Nine types in total: flowcharts, sequence diagrams, class diagrams, state diagrams, ER (entity-relationship) diagrams, Gantt charts, pie charts, mindmaps, and git graphs. Each one has a matching built-in template to start from.
How do I export a Mermaid diagram as PNG or SVG?
Use the toolbar buttons. SVG downloads a scalable vector file that stays sharp at any size — ideal for documents and the web. PNG downloads a raster image rendered at 2x scale for crisp display on high-DPI screens. You can also Copy SVG to paste the markup elsewhere.
Is my code saved if I close the tab?
Yes. Your code is auto-saved to your browser's local storage and restored when you return. Note that clearing your browser data will also remove the saved code, since it lives only on your device.
Why does my diagram show a syntax error?
Each Mermaid diagram type has its own syntax rules. Common slip-ups are a missing arrow (-->), the wrong opening keyword, or mismatched brackets. Read the error message shown below the editor — it points to the line or token that needs attention.
Can I use the editor on mobile?
Yes. On narrow screens the layout stacks vertically, with the editor on top and the preview below, and you can drag the divider to adjust their heights. Every feature stays available.
No comments yet. Be the first to comment!