Mermaid Live Editor
Edit Mermaid source on the left and watch the diagram render on the right. Pick a theme, switch security level, and export SVG or PNG when you're done. Runs locally in your browser — no diagram source is uploaded anywhere.
Plain text in, diagram out
Mermaid syntax reads almost like ASCII — arrows, nodes, decisions. The renderer takes care of layout.
flowchart TD
A[Start] --> B{Decision}
B -- yes --> C[Action A]
B -- no --> D[Action B]
C --> E[End]
D --> EA flowchart with one start node, a yes/no decision diamond, two parallel actions, and a shared end node.
What you'll use this for
Mermaid lives natively in GitHub README files, Notion, Obsidian, GitLab, and modern docs sites. Iterate the source here, then paste it into a fenced ```mermaid block.
README diagrams
GitHub renders Mermaid in .md files. Sketch the architecture here and paste the source into your repo's README.
Sequence diagrams
Map an API call between services without firing up a draw.io tab. Edit text, get a clean SVG.
Architecture sketches
Flowcharts and class diagrams for design docs — drop the PNG straight into Confluence or Google Docs.
Project timelines
Gantt and timeline diagrams without spreadsheet acrobatics — just a few lines of text.
How to draw a Mermaid diagram
Type the source
Start with the diagram type — flowchart TD, sequenceDiagram, classDiagram, etc. — then your nodes and edges.
Watch it render
Auto-render is on by default with a 300 ms debounce. Errors appear in a red banner above the preview.
Tune the theme
Default works for most cases. Use dark for embedding in dark docs. Forest and neutral are quiet palettes.
Export
Download SVG for vector use (slides, docs sites) or PNG for chat/screenshots. Copy SVG to clipboard if you'd rather paste than save.
Frequently asked questions
Flowchart, sequence, class, state, entity-relationship (ER), gantt, pie, journey, requirement, gitGraph, mindmap, timeline, sankey, and quadrantChart — basically anything Mermaid 10 supports. Start the source with the keyword for that diagram type.
Yes. Download PNG draws the rendered SVG onto a canvas at 1x, 2x, or 3x scale and saves the result via canvas.toBlob. Use 2x for crisp screenshots on retina displays.
After the first load, yes — the Mermaid library is cached by your browser. Your diagram source never leaves your device; rendering happens entirely client-side using mermaid.js.
Most likely a syntax slip. Arrow forms differ by diagram type — flowcharts use -->, sequence diagrams use ->>, class diagrams use --|>. Also check that node IDs don't contain spaces — wrap labels in [...], (...), or {...}.
Yes. Pick default, dark, forest, or neutral from the Theme dropdown. For deeper control, add a %%{init: {"theme":"base","themeVariables":{...}}}%% directive at the top of your source.
About this Mermaid editor
This editor wraps mermaid.js 10.x — the same renderer used by GitHub, GitLab, and many docs platforms. Everything happens in your browser: the source you type is never sent anywhere.
Editor
- CodeMirror 5 with line numbers and gutter highlighting.
- Auto-render with a 300 ms debounce so you don't re-render on every keystroke.
- Theme independent from the page — keep dark UI while exporting a light diagram.
Export
- SVG — vector, infinite zoom, edit in Illustrator/Figma.
- PNG — raster, scaled 1x/2x/3x, ready for chat or slides.
- Copy SVG — paste the raw markup into your codebase or docs.