Mermaid Viz

Mermaid Viz renders .mmd/.mermaid files as a live diagram inside a VS Code webview, using mermaid.js — no browser or external service required.

Requirements

• This bundles the mermaid npm library and renders it fully offline inside a VS Code webview.
• A file is treated as a mermaid diagram if resourceExtname == .mmd, resourceExtname == .mermaid, or its language id is mermaid (e.g. set by another mermaid language extension).

Extension Settings

This extension contributes the following settings:

• vscode-mermaid-previewer.theme: enum[default, base, dark, forest, neutral]
  • default: (default) the mermaid.js default theme.
  • Any other value switches to the matching mermaid theme.
• vscode-mermaid-previewer.refreshOn: enum[type, save]
  • type: (default) re-render the open preview on every edit (debounced ~300ms).
  • save: only re-render when the file is saved.

Features

• Live preview of Mermaid diagrams (flowcharts, sequence diagrams, class diagrams, ER diagrams, Gantt charts, etc. — anything mermaid.js supports).
• Opens a preview beside the editor on demand — command palette, editor title icon, context menu, or keybinding.
• Parse errors are shown inline in the preview panel instead of a blank page.

Invoke from the command palette

• Run Mermaid Preview with a .mmd/.mermaid file open.

Invoke from editor actions / context menu

• Use the preview icon in the editor title bar, right-click context menu, or ctrl+shift+m / cmd+shift+m.

Known Issues

• Diagrams that mermaid.js itself cannot parse will show the raw parser error in the preview panel.

Release Notes

Updates

• For detailed changes see our CHANGELOG.md

Credits

• mermaid.js