Proposal: Interactive Zoom & Pan for Mermaid Diagrams

[alinejun]

Overview

Add interactive zoom and pan to Mermaid diagrams in Markon, allowing users to zoom into specific regions and drag to navigate large or complex diagrams.

Motivation

Mermaid diagrams in Markon are currently rendered as static SVGs. This becomes a problem when diagrams grow large — text and edges become hard to read, and there's no way to focus on a particular region. Users must resort to browser-level page zoom, which affects the entire layout. Tools like Typora, Notion, and VS Code Markdown Preview already support diagram zoom interaction.

Interaction Design

"Click to enter → interact → click to exit" model:

┌─────────────────────────────────────────────────┐
│  Default: static display                         │
│  ┌───────────────────────────────┐              │
│  │   Mermaid SVG (in document)    │              │
│  │   Hover → shows zoom hint      │              │
│  └───────────────────────────────┘              │
│                                                   │
│  Click → Zoom view                               │
│  ┌─────────────────────────────────────────────┐ │
│  │ 🔍 Overlay (semi-transparent backdrop)       │ │
│  │  ┌───────────────────────────────────────┐  │ │
│  │  │  SVG container (zoomable & pannable)   │  │ │
│  │  │  - Scroll wheel: zoom                  │  │ │
│  │  │  - Drag: pan                           │  │ │
│  │  │  - Double-click: reset view            │  │ │
│  │  └───────────────────────────────────────┘  │ │
│  │  Toolbar (top-right):                       │ │
│  │  [+] [-] [Reset] [Fit] [✕Close]            │ │
│  └─────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘

Why this model:

• Non-intrusive — diagrams stay in place by default, no disruption to reading flow
• Progressive — only activates on explicit user action
• Mobile-friendly — pinch-to-zoom and drag naturally map to touch gestures

Interactions

Action	Desktop	Mobile
Enter zoom view	Click diagram	Tap diagram
Zoom	Scroll wheel	Pinch
Pan	Click & drag	One-finger drag
Reset view	Double-click	Double-tap
Exit	Esc / ✕ button	✕ button

Zoom range

• Min: 10%, Max: 500%
• Default zoom on enter: 150%