Mermaid File Preview
Preview standalone Mermaid files with the same workflow as VS Code's built-in
Markdown preview.
Why this extension?
VS Code renders Mermaid diagrams inside Markdown, but standalone .mmd and
.mermaid files still open as source only. Mermaid File Preview fills that gap
without replacing the text editor or introducing a separate editing workflow.
- Familiar controls:
Cmd+K V / Ctrl+K V opens a preview to the side.
- Markdown-style title action: click for a side preview; Option/Alt-click for
an in-place preview.
- Live unsaved changes: the diagram follows edits without requiring a save.
- Source stays the default: preview is an optional custom editor.
- Native appearance: light, dark, and high-contrast themes are respected.
- Useful canvas: fit, zoom, and pan large diagrams.
- Clear failures: Mermaid parse errors appear in the preview and recover on
the next valid edit.
- Fully local: Mermaid is bundled with the extension. No network requests,
accounts, telemetry, or remote rendering services.
Usage
Open a .mmd or .mermaid file and use any of these actions:
| Action |
macOS |
Windows / Linux |
| Open preview to the side |
Cmd+K V |
Ctrl+K V |
| Open preview in place |
Shift+Cmd+V |
Shift+Ctrl+V |
| Return from preview to source |
Shift+Cmd+V |
Shift+Ctrl+V |
The preview button in the editor title behaves like Markdown's built-in button:
- click it to open the preview beside the source;
- hold Option/Alt while clicking to open only the preview.
The same commands are available from the Command Palette under Mermaid.
Explorer context menus can open an in-place preview directly.
Canvas controls
- Use the toolbar to pan, zoom, or fit the diagram.
- Hold Option/Alt while dragging to pan.
- Hold Option/Alt while scrolling to zoom.
- Double-click the canvas to fit the diagram.
Privacy and security
Rendering happens inside a Content Security Policy-restricted VS Code webview
using the Mermaid version bundled in the extension. Mermaid runs with
securityLevel: strict. Diagram source is never sent over the network.
The extension supports untrusted and virtual workspaces because it only reads
the active text document and does not execute workspace code.
Requirements
- VS Code 1.85.0 or newer
- A standalone
.mmd or .mermaid source file
Mermaid File Preview intentionally focuses on previewing. Pair it with the
Mermaid language extension of your choice if you also want syntax highlighting,
completion, or diagnostics in the source editor.
Development
npm ci
npm run check
npm run test:extension
npm run package
npm run check runs the release contract tests, TypeScript type checking, and
both production bundles. Extension-host tests exercise the real preview and
source commands in VS Code.
See CONTRIBUTING.md for contribution guidance and
THIRD_PARTY_NOTICES.md for bundled dependency notices.
License
MIT
