Mermaid Diagram Live Editor
Write and preview Mermaid diagrams (flowchart, sequence, gantt, class, state, ER, pie, journey, mindmap, timeline) live as you type. Pick a theme, export as SVG or PNG, copy as markdown — all in your browser.
Sample diagrams
Show ▾
Preview
About Mermaid Diagram Live Editor
The Mermaid Diagram Live Editor renders Mermaid syntax to a live preview as you type, supporting all major diagram types — flowchart, sequence, gantt, class, state, entity-relationship, pie, user journey, mindmap, and timeline. Pick from four themes (default, dark, forest, neutral), export the result as SVG (perfect for blog posts and documentation) or PNG (for slides and READMEs), or copy as a Markdown code-block for direct paste into GitHub, GitLab, Notion, Obsidian, or any platform that natively renders Mermaid. The editor includes ten ready-made samples to start from. Everything runs in your browser via the Mermaid.js library — your diagrams never leave the device.
Why use a Mermaid Diagram Live Editor?
Mermaid has become the de-facto diagram-as-code format: GitHub renders it natively in markdown, Notion supports it, GitLab supports it, Obsidian supports it, MkDocs supports it. The problem is that the syntax has gotchas — wrong arrow direction, missing semicolons in v8 vs v10 syntax, escaped quotes — and reading errors from the Mermaid CLI is awkward. A live editor with instant preview makes iteration 10× faster: tweak the syntax, see the diagram redraw on every keystroke, copy when it looks right. The export-to-PNG/SVG path also covers the case where you're putting a diagram into a slide deck or PDF that doesn't render Mermaid natively.
Who is it for?
Built for software engineers documenting system architecture, technical writers shipping diagrams in Markdown / MDX, product managers sketching user flows for design reviews, DBAs documenting schema with ER diagrams, technical leads producing onboarding docs, and anyone who has ever opened draw.io to make a single flowchart and wished it was just text. Pairs particularly well with the JSON-LD Generator and Sitemap Generator for documentation/SEO workflows that need diagrams as part of the deliverable.
How to use the tool
Start with one of the 10 samples (flowchart, sequence, gantt, etc.) or paste your own Mermaid code
Edit the code on the left — the diagram on the right re-renders on every keystroke
Pick a theme (default, dark, forest, neutral) for the rendering style
If syntax is invalid, the error message appears beneath the editor with the line number
Click Copy Markdown to get a fenced code block ready for GitHub / Notion / Obsidian (` ```mermaid ... ``` `)
Click Download SVG for vector export (best for docs and blog posts) or Download PNG for raster export (slides, READMEs)
PNG export is rendered at 2× the SVG dimensions for sharp display on hi-DPI screens
Key Features
Live preview, instant feedback
Diagram re-renders on every keystroke (with light debouncing). No 'compile' button — you see the result as you write the syntax.
10 diagram types supported
Flowchart, sequence diagram, gantt chart, class diagram, state diagram, entity-relationship diagram, pie chart, user journey, mindmap, timeline. Each has a built-in sample to start from.
Four themes
Default (clean light), Dark (for dark-mode docs), Forest (high-contrast green/teal), Neutral (monochrome for print). Re-renders with the new theme immediately.
Inline syntax errors
When Mermaid rejects the syntax, the error appears beneath the editor with the line number and parser hint. No silent broken diagrams.
Export as SVG, PNG, or Markdown
SVG for vector docs, PNG (rendered at 2× for hi-DPI sharpness) for slides and READMEs, Markdown fenced code block for direct paste into GitHub, GitLab, Notion, Obsidian, MkDocs.
100% client-side
Mermaid runs as JavaScript in your browser. Your diagram source never leaves the device — verifiable in DevTools (zero outbound network requests).
Common Use Cases
Architecture diagram in a README
Scenario: You're documenting a microservice architecture and need a flowchart in your project's README.md.
✓ Type the architecture as a Mermaid flowchart, iterate live until it looks right, copy as Markdown, paste straight into README — GitHub renders it natively. No image uploads, no draw.io exports.
Sequence diagram for an API design doc
Scenario: You're proposing an OAuth flow in an architecture doc and need a sequence diagram showing client / server / IdP exchanges.
✓ Use the sequence sample as a starting point, edit to match your flow, export as SVG for the design doc. Cleaner than Lucidchart, faster than Figma, and the source is text so it lives in version control.
Database schema with an ER diagram
Scenario: You're writing onboarding documentation and need an entity-relationship diagram of the database.
✓ Use the ER sample, type out your tables and relationships, export as PNG or SVG. Updates are a text edit, not a re-export from your DBMS.
Project timeline as a Gantt chart
Scenario: Your project plan needs a gantt for the first three months and you don't want to fire up MS Project.
✓ Use the gantt sample, edit dates and tasks, export as PNG into your slide deck. Editing later is just a text change.
Onboarding doc with a user-journey diagram
Scenario: Your product manager wants a user-journey diagram for the new feature, ideally in Notion.
✓ Build it here, paste the Markdown into Notion (which renders Mermaid natively). PM can edit later without needing a Figma seat.
Frequently Asked Questions
What Mermaid version does this use?
Latest Mermaid 11.x as of mid-2026. This includes all the modern diagram types (mindmap, timeline, sankey, requirement, c4) and the v10+ syntax that's the current standard for GitHub / Notion / GitLab.
Why does my GitHub-flavored Mermaid look slightly different here?
Theme defaults differ between GitHub and the Mermaid CLI/library. GitHub applies its own theme overrides for dark/light mode. The rendering structure and arrows are identical; only colors and font may shift slightly. For pixel-identical preview, switch this tool's theme to 'default' (which matches GitHub light mode) or 'dark' (GitHub dark mode).
How do I escape special characters in node labels?
Wrap the label in double quotes: `A["Hello, World!"]`. For HTML entities (e.g. line breaks): use `<br>` inside the quoted label. For Markdown formatting in labels (bold, italic): use the v10+ Markdown syntax `"**bold**"`.
Why does my flowchart go top-down by default?
The first line `graph TD` (or `flowchart TD`) sets the direction: TD = top-down, LR = left-right, BT = bottom-top, RL = right-left. Change the first line to switch direction. The samples use TD because it's the most-used variant.
Can I include line breaks in node labels?
Yes — use `<br>` inside a quoted label: `A["Line 1<br>Line 2"]`. Note that the `<br>` only works inside a quoted string; without quotes, it's parsed as separate tokens.
Why does the PNG export look slightly soft?
Browser canvas rendering of SVG has slight anti-aliasing differences from native SVG rendering. We export at 2× the SVG dimensions to compensate (so a 800×600 diagram exports as 1600×1200 PNG). For printing or large displays, prefer the SVG export.
Does this support all Mermaid diagram types?
The samples cover the 10 most-used types (flowchart, sequence, gantt, class, state, ER, pie, journey, mindmap, timeline). Other types Mermaid supports — sankey, requirement, C4, gitGraph, quadrantChart — should also render correctly; just paste their syntax. The Mermaid documentation has full type coverage.
Does this tool send my diagram source anywhere?
No. The Mermaid library runs in your browser; rendering, theme application, and export all happen locally. Verifiable in DevTools — using the tool produces zero outbound network requests with your diagram content.
Technical Specifications
Supported Formats
- ✓Mermaid 11.x
- ✓Diagram types: flowchart, sequence, gantt, class, state, entity-relationship, pie, user journey, mindmap, timeline, sankey, requirement, C4, gitGraph, quadrantChart
- ✓Themes: default, dark, forest, neutral
- ✓Export: SVG (vector), PNG (raster, 2× hi-DPI), Markdown (fenced code block)
- ✓Live re-render with debouncing
Limits & Performance
- •File Size: Practical limit ~1000 nodes; very large diagrams may slow rendering
- •Validations: Live syntax checking with line-number errors
- •Response Time: Sub-200ms render for typical diagrams
- •Browsers: All modern browsers (Chrome, Firefox, Safari, Edge); works offline once loaded
Pro Tips
- Start from a sample and edit — the syntax for each diagram type is different enough that starting from blank is harder than starting from working code.
- Use SVG export over PNG for any context that supports it (web, modern docs, MDX) — vector quality at any zoom level.
- When pasting into GitHub or Notion, use the Markdown export — both platforms render Mermaid natively, so you get a live diagram, not a static image.
- For dark-mode documentation, switch the theme to 'dark' before exporting — the PNG/SVG bakes in the theme colors, so a default-theme export will look wrong on a dark background.
- Keep flowcharts narrow (left-right) when they have many nodes per row — readers prefer scrolling vertically, and most blog/doc layouts are taller than wide.
- For sequence diagrams, group long interactions with `loop` or `alt` blocks — wall-of-arrows diagrams are harder to read than structured ones.
- Gantt syntax uses ISO 8601 dates and durations (`30d`, `2w`, `1mo`). Stick with `d` for clarity unless you genuinely need weeks/months.
Share This Tool
Found this tool helpful? Share it with others who might benefit from it!
💡 Help others discover useful tools! Sharing helps us keep these tools free and accessible to everyone.