Markdown Preview with Mermaid Zoom & Pan

A powerful VS Code extension for Markdown preview with interactive Mermaid diagram zoom, pan, and resize — powered by crossnote.

Features at a Glance

flowchart LR
    subgraph Editor["VS Code Editor"]
        MD["📝 Markdown source<br/>— mermaid diagrams<br/>— math, tables, code..."]
    end
    subgraph Preview["Live Preview Panel"]
        D["🔷 Rendered Diagram<br/>+ Zoom / Pan / Resize"]
    end
    MD -- "live update (debounced)" --> D
    D -- "scroll sync" --> MD

Key Features

1. Interactive Mermaid Diagrams

Diagrams are rendered with full zoom, pan, and resize controls:

flowchart TD
    A([Start]) --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E([End])
    D --> E

    style A fill:#4CAF50,color:#fff
    style E fill:#4CAF50,color:#fff
    style B fill:#FF9800,color:#fff

Mouse interactions:

2. Live Preview

Changes in your editor are reflected instantly:

sequenceDiagram
    participant E as Editor
    participant D as Debouncer (300ms)
    participant P as Preview Panel

    E->>D: keystroke
    E->>D: keystroke
    E->>D: keystroke
    D->>P: render (batched)
    P-->>E: scroll sync

3. Math Rendering

Supports KaTeX and MathJax for beautiful math expressions:

• Inline: $E = mc^2$
• Block:

  $$
  \int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
  $$
  

4. Multiple Preview Themes

Choose from 16 preview themes including github-light, github-dark, monokai, solarized-dark, and more — configurable via markdown-preview-mermaid.previewTheme.

5. Diagram Types Supported

All Mermaid diagram types work out of the box:

mindmap
  root((Mermaid))
    Flowchart
    Sequence Diagram
    Class Diagram
    State Diagram
    ER Diagram
    Gantt
    Pie Chart
    Git Graph
    Journey
    Quadrant
    ZenUML

Installation

From VS Code Marketplace

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
3. Search for "Markdown Preview with Mermaid Zoom & Pan"
4. Click Install

From VSIX file

code --install-extension markdown-preview-mermaid-0.1.0.vsix

Usage

Open Preview

Writing Mermaid Diagrams

Wrap your diagram in a fenced code block with mermaid:

```mermaid
graph TD
    A[Christmas] -->|Get money| B(Go shopping)
    B --> C{Let me think}
    C -->|One| D[Laptop]
    C -->|Two| E[iPhone]
    C -->|Three| F[fa:fa-car Car]
```

Configuration

Key settings available in VS Code settings (Ctrl+,):

Zoom Controls

flowchart LR
    subgraph mermaidMouseNavigation
        MN1["always\nscroll always zooms"]
        MN2["alt ✅\nhold Alt + scroll"]
        MN3["never\nuse buttons only"]
    end
    subgraph mermaidControlsShow
        CS1["always\nbuttons always visible"]
        CS2["onHoverOrFocus ✅\nshow on hover"]
        CS3["never\nhide controls"]
    end

Preview Modes

flowchart TB
    subgraph SM["Single Preview (default)"]
        direction LR
        se1[Editor 1] --> sp[Shared Preview]
        se2[Editor 2] --> sp
        se3[Editor 3] --> sp
    end
    subgraph MM["Multiple Previews"]
        direction LR
        me1[Editor 1] --> mp1[Preview 1]
        me2[Editor 2] --> mp2[Preview 2]
    end
    subgraph PO["Previews Only"]
        po["Preview Panel\n(inline editor built-in)"]
    end

Architecture

flowchart TD
    EXT["extension.ts\n(activation)"]
    CMD["commands-register.ts\n(command palette)"]
    PP["preview-provider.ts\n(WebviewPanel)"]
    LU["live-update.ts\n(debounced re-render)"]
    SS["scroll-sync.ts\n(editor ↔ preview)"]
    CN["crossnote\n(markdown renderer)"]
    MZ["mermaid-zoom\n(zoom / pan / resize)"]

    EXT --> CMD
    EXT --> PP
    PP --> LU
    PP --> SS
    LU --> CN
    CN --> MZ

Requirements

• VS Code ^1.70.0
• No additional runtime dependencies — all bundled

Commands

All commands available via Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

License

MIT © tiendang