Mermaid Preview

A production-ready VS Code extension to preview, render, and export Mermaid diagrams (.mmd files).

Features

• Live Preview — Opens a side panel that updates as you type (300ms debounce)
• Syntax Highlighting — Color coding for .mmd and .mermaid files
• Zoom & Pan — Scroll to zoom, drag to pan, double-click to reset
• Fit to Screen — One-click to fit the diagram in the viewport
• Dual Themes — Toggle between Light and Dark Mermaid themes
• Export SVG — High-quality vector export
• Export PNG — High-resolution (3× scale) raster export
• Background Options — Transparent, White, or Dark background for exports

Usage

1. Open any .mmd or .mermaid file
2. Click the eye icon (👁) in the editor title bar, or press Ctrl+Shift+V
3. The preview panel opens beside your editor
4. Edit your diagram — the preview updates automatically

Keyboard Shortcuts

Example

graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do something]
    B -->|No| D[Do something else]
    C --> E[End]
    D --> E

Configuration

Supported Diagram Types

All Mermaid diagram types are supported, including:

• Flowcharts (graph TD, flowchart LR)
• Sequence Diagrams
• Class Diagrams
• Gantt Charts
• State Diagrams
• Entity Relationship Diagrams
• Pie Charts
• Mindmaps
• Timeline
• And more...

License

MIT