Mermaid Viewer
Write Mermaid syntax and watch the diagram draw itself — then export it as SVG or PNG.
Nothing to preview yet.
Diagrams are parsed and drawn in your browser. Your source is never uploaded — even a copied link carries it in the part of the URL that browsers keep on the device.
About Mermaid Viewer
Mermaid Viewer turns Mermaid syntax into a diagram as you type. Paste or write the source on the left and the rendered diagram appears on the right, with syntax errors reported by line number while the last good render stays on screen. It handles every common Mermaid diagram — flowchart, sequence, class, state, entity relationship, Gantt, pie, mindmap, git graph, timeline and more — and you can switch between the default, neutral, forest and dark themes, zoom and pan around large diagrams, then export a crisp SVG or a 2× PNG. Your diagram is parsed and drawn on your own device: nothing is uploaded, and a copied share link keeps the source in the URL fragment, which browsers never send to a server.
How to use Mermaid Viewer
- Type or paste Mermaid syntax, drop in a .mmd file, or start from one of the built-in examples.
- The diagram renders as you type; a syntax error shows the line while the previous diagram stays visible.
- Zoom with the scroll wheel, drag to pan, or press Fit to frame the whole diagram.
- Export it as an SVG or a PNG, copy the SVG markup, or copy a link that carries the diagram with it.
Frequently asked questions
- Is this Mermaid editor free?
- Yes — completely free, with no sign-up, no ads and no limits on how many diagrams you render.
- Is my diagram uploaded anywhere?
- No. Mermaid runs in your browser and the diagram is parsed and drawn on your device. Even the share link keeps the source in the URL fragment (after the #), which browsers never send to a server.
- Which diagram types are supported?
- All the standard Mermaid types — flowchart, sequence, class, state, entity relationship, Gantt, pie, quadrant, mindmap, timeline, git graph, user journey and the rest — because it uses the official Mermaid library.
- How do I export a Mermaid diagram as an image?
- Click SVG for a scalable vector file, or PNG for a raster image rendered at twice the diagram's natural size. Both are generated locally and download straight away.
- Why does my diagram show a syntax error?
- The error box names the line Mermaid stopped at and quotes what it expected. Common causes are a missing arrow (-->), unbalanced brackets, or a diagram type keyword that doesn't match the syntax below it. The last diagram that rendered stays on screen so you don't lose your place.
- Can I use a dark theme?
- Yes. Choose between the default, neutral, forest and dark Mermaid themes — the preview and the exported SVG and PNG all follow your choice.
- Can I open a .mmd or Markdown file?
- Yes. Open or drag in a .mmd, .mermaid, .txt or .md file. For Markdown, the first ```mermaid code block is pulled out for you.
- Does my work survive a refresh?
- Yes. The diagram source and theme are saved in your browser's local storage, so reopening the page brings back what you were working on. Nothing is stored anywhere else.