Mermaid Diagram Editor & Viewer, Live Diagram Preview (MMD, PNG/SVG Export, Offline)

Mermaid Diagram Editor & Viewer, Live Diagram Preview (MMD, PNG/SVG Export, Offline), a VS Code extension by Zovo

Free, no sign-in, works offline. Write Mermaid on the left and see the diagram on the right while you type, in .mmd files and in mermaid blocks inside Markdown. No login, no AI, no account and no network.

Free, MIT license. Needs VS Code 1.90.0 or newer. Extension ID zovo.mermaid-viewer, version 0.3.3.

Real output from VS Code 1.142 on macOS: sequence.mmd from scripts/make-samples.mjs, opened with "Open Diagram Editor". scripts/e2e-editor.mjs installed the packaged extension in a clean VS Code profile and saved the window through the debug port.

• It edits diagrams where they live. "Edit diagram" above each `mermaid block in a Markdown file opens that block next to a live preview. Save, and the text goes back into the Markdown file. Undo in the Markdown file takes it back.
• It helps while you type: completion for diagram types, keywords, arrows and shapes; a red underline on the line with the error; 15 starter templates.
• It exports the size you ask for: PNG at an exact width or height, or at 1x, 2x or 4x. Small SVG files, with an option for plain text labels that Azure DevOps and GitHub wikis show. PDF with a title page. Copy PNG or SVG to the clipboard.
• Mermaid 12.3.0 ships inside, so it draws behind a proxy or on a plane, and it never asks you to log in.

Quick start

1. Install the extension.
2. Open a .mmd or .mermaid file and run "Mermaid Viewer: Open Diagram Editor" from the Command Palette, or click the preview icon at the top right of the editor (Cmd+K V, or Ctrl+K V on Windows and Linux).
3. In a Markdown file, click "Edit diagram" above a mermaid block.
4. No file yet? Run "Mermaid Viewer: New Diagram from Template".

"Mermaid Viewer: Get Started" in the Command Palette opens a short tour.

Questions people ask

Why this one

Reviews of Mermaid extensions on the Marketplace name the same problems again and again. This is what Mermaid Viewer does about each one, checked in a real VS Code with scripts/e2e-editor.mjs:

Mermaid Viewer is an independent extension by Zovo. It is not made by, and does not replace, any other publisher's extension.

Mermaid blocks in Markdown

• "Edit diagram" opens the block as a small .mmd file next to a live preview, with completion and error underlines.
• Save it, and the text goes back into its block. The Markdown file is saved too when it had no other unsaved changes. Undo in the Markdown file takes the change back.
• If the block was changed in the Markdown file in the meantime, the block editor loads the new text. If the block is gone, nothing is written and a message says why.
• "Preview" shows that one diagram with zoom and export. The preview of a whole Markdown file lists every diagram, each with its own error line and its own export buttons.
• The "Mermaid Diagrams" view in the Explorer lists the diagrams of the open file, with the heading above each one. Click a row to go there.

Help while you type

• Completion knows the diagram types on the first line, and then the keywords, arrows and node shapes of that type: participant, alt, ->> in a sequence diagram, subgraph, classDef, -.-> in a flowchart, and so on.
• The preview draws again 100 ms after you stop typing. Small diagrams appear at once (15 to 200 ms for the templates); a 300-node flowchart takes Mermaid under a second to lay out. While a big diagram is still drawing, only your newest text is drawn after it, so drawings never pile up.
• An error underlines its line in red, shows in the Problems panel and at the top of the preview. The last good diagram stays on screen, faded. Click the error to jump to the line.
• "New Diagram from Template" has flowchart, sequence, class, state, ER, Gantt, pie, mindmap, timeline, gitGraph, C4, sankey, XY chart, block and architecture diagrams. In a Markdown file, the template goes in at the cursor as a mermaid block.

Export

Exports use the background from the toolbar: the editor color, white, transparent or a custom color. SVG files name no web fonts and load nothing from the internet.

"Export All Diagrams in Workspace" writes every diagram of every .mmd, .mermaid and Markdown file in the folder to SVG, PNG or both, into mermaid-export/ with the same folders as the sources. Diagrams that cannot be drawn are listed at the end.

Big and untrusted files

• Mermaid runs with its strict security level, and a %%{init}%% line cannot loosen it. click callbacks do nothing, javascript: links and remote images are removed, and HTML in labels is cleaned twice. The preview page has no network access at all.
• Diagrams over 500,000 characters or 2,000 links are not drawn, and the preview says which setting to raise. A 5 MB .mmd file gets that message at once. A file far over the limit is not even read when you open its preview from the Explorer.
• A 300-step sequence diagram draws in under a quarter of a second. A 2,000-node flowchart takes Mermaid about 14 seconds to lay out, and VS Code stays responsive meanwhile. A Markdown file with 200 diagrams lists all of them in about 5 seconds.
• A drawing that runs past the time limit (mermaidViewer.renderTimeoutSeconds, 10 seconds after the last change) is stopped with a message that names the setting.
• A diagram that takes longer than 10 seconds is stopped with a message, and VS Code stays responsive.

Themes

The Mermaid theme follows VS Code: dark in dark themes, default in light ones. The toolbar also offers default, dark, forest, neutral and base. A theme set inside the diagram wins. The background can be the editor color, white, transparent or a custom color.

Settings

Privacy

Mermaid Viewer sends nothing anywhere. It has no telemetry, no account and no AI. The preview and export pages block every network request with their Content Security Policy, and the extension makes no network calls. Links you click in the footer (Rate, Sponsor) open in your browser.

Limits

• Math in labels ($$...$$) may not look right, because the KaTeX fonts are not bundled.
• Icon packs that Mermaid loads from the internet are not loaded. Built-in icons work.
• PDF export puts each diagram on its own A4 page as an image.

License

MIT. Mermaid is MIT licensed. Its bundled parts and their licenses are listed in THIRD-PARTY-NOTICES.md.

Guides

• Preview Mermaid diagrams in VS Code
• Export a Mermaid diagram to PDF
• Mermaid Editor Online, free in your browser with no upload