🧑‍💻

Mermaid Viewer & Editor

🔒 In your browser

Render Mermaid diagrams live — flowcharts, sequence, class & more — and export SVG or PNG.

How it works

Paste Mermaid diagram code — flowcharts, sequence, class, ER, gantt, pie and more — and see it rendered live. Copy the code, or download the diagram as SVG or PNG. Everything renders in your browser; nothing is uploaded.

Diagram code

Preview

Diagrams render entirely in your browser with the Mermaid library (nothing is uploaded), and untrusted diagram scripts are sanitized. If a diagram won't render, check the syntax against the Mermaid docs.

→You might also need Markdown to HTML →

About the Mermaid Viewer & Editor

Mermaid lets you describe diagrams in plain text — flowcharts, sequence diagrams, class diagrams, ER diagrams, gantt charts and more — and this free Mermaid viewer renders that text into a diagram live as you type.

Everything renders in your browser with the Mermaid library; nothing you paste is uploaded, and you can export the result as SVG or PNG.

How to use it

Paste or type Mermaid code, or start from one of the examples (flowchart, sequence, class, pie).
The preview updates live; syntax errors are shown so you can fix them.
Download the diagram as a scalable SVG or a PNG image, or copy the code to reuse it.

What you can draw

Mermaid supports flowcharts, sequence diagrams, class and entity-relationship diagrams, state diagrams, gantt charts, pie charts, user-journey and git graphs. It's ideal for architecture sketches, workflows and docs — including diagrams generated by other tools here, like the AI-agent architecture from the Deep Agent Scaffold Generator.

Frequently asked questions

What is Mermaid?

Mermaid is a popular open-source syntax for describing diagrams as text, so they live in Markdown, docs and code reviews. This tool renders that text into a picture.

Is my diagram uploaded?

No. Rendering happens entirely in your browser, and untrusted diagram scripts are sanitized for safety.

Can I export a transparent or high-res image?

Download SVG for infinite scaling, or PNG for a raster image (exported at 2× for sharpness). SVG is best for docs and slides.

The diagram won't render — why?

It's almost always a syntax issue. Check the error message shown under the preview against the Mermaid documentation; even a stray indent or missing arrow can break a diagram.

Related Developer tools

JSON Formatter & Validator JSON Tree Viewer JSON Diff / Compare JSON to TypeScript JSON ↔ CSV Converter

🔗 Embed this tool on your website — free

Copy this and paste it into your page's HTML. The tool runs in the visitor's browser, just like here. Change height to fit, or add the optional auto-resize snippet below. Add ?theme=dark to the URL for dark mode.

<iframe src="https://toolhq.dev/embed/mermaid-viewer/" title="Mermaid Viewer & Editor — ToolsHub" width="100%" height="520" style="border:1px solid #e5e7eb;border-radius:12px;max-width:680px" loading="lazy"></iframe>

Optional: auto-resize the iframe height

Add this once on the same page so the iframe grows to fit the tool:

<script>
addEventListener("message", function (e) {
  if (e.data && e.data.type === "toolshub:resize") {
    document.querySelectorAll('iframe[src*="/embed/"]').forEach(function (f) {
      if (f.contentWindow === e.source) f.style.height = e.data.height + "px";
    });
  }
});
</script>