MD Mermaid Preview Support
Adds Mermaid diagram rendering to VS Code's built-in Markdown Preview — offline, no setup required.
Features
- 🧜 Renders Mermaid diagrams inside the native VS Code Markdown Preview panel
- 🌗 Always renders in a clean light container (readable in any VS Code theme)
- ⚡ Offline — Mermaid.js is bundled (no CDN calls)
- 🔄 Live reload — diagrams re-render on file save
- 🖱️ Interactive diagrams — pan, zoom, and resize each diagram independently
Usage
Write a Mermaid diagram using a fenced code block with the ```mermaid tag:
```mermaid
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[🎉 Great!]
B -->|No| D[Debug it]
D --> A
```
Open the Markdown Preview (Ctrl+Shift+V) — the diagram renders automatically.
Diagram Interactions
| Interaction |
Action |
| Pan |
Click & drag the diagram |
| Zoom |
Scroll wheel (zooms toward cursor) |
| Reset view |
Double-click, or press ⟳ in toolbar |
| Resize container |
Drag the bottom-right corner |
Supported Diagram Types
All Mermaid diagram types are supported, including:
| Type |
Syntax |
| Flowchart |
graph TD / flowchart LR |
| Sequence Diagram |
sequenceDiagram |
| Gantt Chart |
gantt |
| Pie Chart |
pie |
| Class Diagram |
classDiagram |
| State Diagram |
stateDiagram-v2 |
| Entity Relationship |
erDiagram |
| Git Graph |
gitGraph |
| Mindmap |
mindmap |
| Timeline |
timeline |
Installation
From VS Code Marketplace
Search for MD Mermaid Preview Support in the Extensions panel (Ctrl+Shift+X) and click Install.
From a .vsix file
code --install-extension md-mermaid-preview-support-1.1.0.vsix
Build from Source
git clone https://github.com/gndev-vn/md-preview-mermaid.git
cd md-preview-mermaid
npm install
npx vsce package
code --install-extension md-mermaid-preview-support-*.vsix
License
MIT
| |
