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 five themes (default, base, 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 faster: tweak the syntax, see the diagram redraw a moment after each 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 wants a flowchart to be 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 shortly after you stop typing
Open the Config tab and pick a theme (default, base, dark, forest, neutral) for the rendering style
If syntax is invalid, Mermaid's error message appears beneath the editor (it usually points to the line)
Use 'Copy as Markdown' to get a fenced code block ready for GitHub / Notion / Obsidian (` ```mermaid ... ``` `)
Use the export menu for 'Download SVG' (vector, best for docs and blog posts) or 'Download PNG' (raster, for slides and READMEs)
PNG export is rendered at least 2× the SVG dimensions (small diagrams are scaled up to about 2000 px on the longer side) for sharp display on hi-DPI screens; the dark theme gets a dark background, other themes a white one
Key Features
Live preview, instant feedback
Diagram re-renders shortly (about 0.2 s) after you stop typing. 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.
Five themes
Default (clean light), Base (minimal), 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, Mermaid's own error message appears beneath the editor (it usually includes the line). No silent broken diagrams.
Export as SVG, PNG, or Markdown
SVG for vector docs, PNG (rendered at 2× or more 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.
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 or diagram-tool 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. 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 open a project-management app.
✓ 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). The PM can edit it later as plain text.
Renders via the official Mermaid.js library; GitHub, Notion and GitLab may use a different Mermaid version and theme.
100% client-side — your diagram source never leaves the device. No upload, no API call.
Static site — no backend dependency.
Frequently Asked Questions
What Mermaid version does this use?
Mermaid 11.x (the library bundled with this page). It includes the modern diagram types such as mindmap, timeline, sankey, requirement and C4, and the v10+ syntax. GitHub, Notion and GitLab may run a different Mermaid version, so a diagram can occasionally render differently there.
Why does my GitHub-flavored Mermaid look slightly different here?
Theme defaults and the Mermaid version differ between GitHub and this editor. GitHub applies its own theme overrides for dark/light mode. The structure and arrows are usually the same; colors, fonts and spacing may shift. For a closer preview, pick the 'default' theme for light-mode pages or 'dark' for dark-mode pages, but expect small differences.
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 or more to compensate (an 800×600 diagram exports at about 2000×1500, because diagrams are scaled up until the longer side is about 2000 px). 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; just paste their syntax (there is no sample for them). 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 — your diagram content is never sent over the network.
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, base, dark, forest, neutral
- ✓Export: SVG (vector), PNG (raster, at least 2× hi-DPI), Markdown (fenced code block)
- ✓Live re-render (200 ms debounce)
Limits & Performance
- •File Size: Very large diagrams may render slowly; Mermaid also enforces its own size limit on the diagram source
- •Validations: Live syntax checking using Mermaid's own error messages
- •Response Time: Renders typically appear a moment after you stop typing
- •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 SVG bakes in the theme colors (and the PNG gets a dark background), 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.