Mermaid Preview — 100% Offline

Preview Mermaid diagrams instantly inside VS Code. No account, no cloud, no telemetry.

Open any .mmd or .mermaid file and get a polished diagram preview directly in your editor. The complete Mermaid renderer is bundled with the extension, so your diagrams stay private and remain available without an internet connection.

Why install it?

• Zero configuration — click a Mermaid file and the preview opens by default.
• Fast live preview — changes render automatically while you edit the source.
• 100% offline and private — no CDN, server, sign-in, upload, or telemetry.
• Easy navigation — zoom, fit, and drag to explore large diagrams.
• Useful errors — readable syntax errors link you straight back to the source.
• SVG workflow — copy the rendered SVG or save it as a file.
• Native VS Code experience — light, dark, and high-contrast themes included.
• Mermaid language support — syntax highlighting for .mmd and .mermaid files.

Supported Mermaid diagrams

The bundled Mermaid 11 renderer supports flowcharts, sequence diagrams, class diagrams, state diagrams, entity relationship diagrams, Gantt charts, mindmaps, timelines, pie charts, Git graphs, user journeys, requirement diagrams, architecture diagrams, and more.

Get started

1. Install Mermaid Preview — 100% Offline from the VS Code Marketplace.
2. Open a .mmd or .mermaid file from the Explorer.
3. Select Source to edit the text beside the live preview.

To temporarily use the text editor only, open the Command Palette and choose Reopen Editor With... → Text Editor.

Keyboard and mouse controls

Privacy and security

Diagram source is never uploaded. The preview webview blocks network connections with connect-src 'none', loads resources only from the installed VSIX, and runs Mermaid with securityLevel: strict. The extension contains no telemetry.

The extension writes outside the current document only when you explicitly use Save SVG.

Install from a VSIX

1. Download the latest .vsix from GitHub Releases.
2. In VS Code, open Extensions.
3. Choose ... → Install from VSIX....

Development

Requires Node.js 22 and npm.

npm ci
npm run verify
npm run package:vsix

The package is generated in artifacts/. To debug the extension, open the repository in VS Code and launch Run Mermaid Preview Offline with F5.

Support

Found a bug or have an idea? Open a GitHub issue.

License and attribution

This extension is released under the MIT License. Mermaid and the Mermaid logo are used from the mermaid-js/mermaid project under its MIT license; see third-party notices.

This is an independent community extension and is not affiliated with or endorsed by Mermaid Chart.