Mermaid Editor Online
Type Mermaid code on the left and see the diagram draw live on the right. Start from 15 examples, open a .mmd or Markdown file, save PNG or SVG, and share a link. No account and no upload.
Mermaid Diagram Editor & Viewer for VS Code and Cursor, free
A live preview beside your .mmd file or the mermaid blocks of a Markdown file, with completion, an outline and click to jump from the diagram to its line.
Optional Zovo Pro, USD 19 once: export every diagram, PDF with a title page and export on save.
Export every diagram, PDF with a title page and export on save are Zovo Pro tools in the Mermaid Viewer extension. See the Zovo Pro card below.
Open this in VS Code or Cursor
The same preview runs inside VS Code and Cursor, beside your .mmd file or the mermaid blocks of a Markdown file, with completion, an outline and click to jump from the diagram to its line.
Free, MIT license. About Mermaid Viewer for VS Code.
Zovo Pro
Export every diagram, PDF with a title page and export on save. Zovo Pro, USD 19 once.
In the Mermaid Viewer extension, Zovo Pro writes every Mermaid diagram of a workspace as SVG or PNG files in one run, puts all diagrams of a file into one PDF with a title page and a caption per diagram, and keeps .svg and .png files next to the source up to date each time you save. Each Pro tool works 3 times for free. One payment covers the Pro tools in 22 Zovo extensions. Everything that is free stays free.
After a card payment you get a key on the page. With GitHub Sponsors you sign in from the extension. Details on the Zovo Pro page.
Related tools
- Mermaid Diagram Editor & Viewer on the VS Code Marketplace (also on Open VSX). Live Mermaid preview beside the code, with PNG and SVG export.
- Mermaid Diagram Viewer & Mermaid Editor. Live Mermaid preview beside the code in VS Code.
- Graphviz Viewer & DOT Viewer. Live preview of .dot and .gv graphs in VS Code.
- XMind Viewer. Opens XMind mind maps in VS Code.
- Graphviz Online, free in your browser.
- SVG to PNG Converter, free in your browser.
- PDF Dark Mode Viewer, free in your browser.
Questions
Is my diagram uploaded anywhere?
No. Mermaid draws the diagram inside this tab. The Content Security Policy of the page sets connect-src to none, and the preview frame can only load its own files from this site. Your code is kept in this browser only (local storage), so it is still there when you come back.
Is this the official Mermaid Live Editor?
No. The official Mermaid Live Editor is mermaid.live, made by the Mermaid team. This is a separate free editor made by Zovo with the same open source Mermaid library (version 12.3), and the same preview as the Mermaid Viewer extension for VS Code. It needs no account and works offline.
Which diagrams can I draw?
The diagram types of Mermaid 12.3, among them flowchart, sequence, class, state, entity relationship, Gantt, pie, mind map, timeline, git graph, C4, Sankey, XY chart, block and architecture diagrams. The Example menu has a working start for each of those 15.
How do I save the diagram as PNG or SVG?
Click Export in the preview. Save PNG at 1x, 2x or 4x or an exact width, Save SVG, or copy either one. Text labels for wikis draws labels as SVG text, for Azure DevOps and other tools that drop HTML labels. Save .mmd saves the code itself.
How does Copy link work?
It packs your code (compressed) into the part of the link after the # sign. Browsers never send that part to a server, so the link works without any server storing your diagram. Anyone who opens the link sees the code in their own browser.
Can I open Markdown files with mermaid blocks?
Yes. Open a .md file and every ```mermaid block is drawn, with a list to switch between them. The preview has zoom, pan, fit and light or dark themes, and an error shows the line it is on.
What is free and what is Zovo Pro?
Editing, the live preview, all diagram types and PNG and SVG export of a diagram are free here and in the VS Code extension. Exporting every diagram of a workspace, one PDF with a title page and export on save are Zovo Pro in the extension. One USD 19 payment covers the Pro tools in every Zovo extension.