Mermaid Zoom
xiaozhuang04335k downloadsAdd zoom functionality to Mermaid diagrams. Use mouse wheel or touch gestures to zoom in and out.
- Overview
- Scorecard
- Updates11
An Obsidian plugin that adds zoom and pan functionality to Mermaid diagrams.
Features
- Mouse Wheel Zoom - Opt-in wheel zoom via a per-diagram toggle (off by default, so the page still scrolls normally)
- Drag to Pan - Click and drag to move around your diagrams
- Touch Gestures - Pinch to zoom and drag to pan on mobile devices
- Control Buttons - Quick access to zoom in, zoom out, and reset buttons
- Scale Indicator - Real-time display of current zoom level
- Fullscreen Mode - Open diagrams in a modal for better viewing
- Resizable Containers - Drag the edges or corners of any diagram to resize its container
Installation
Obsidian Plugin Market (Coming Soon)
Once approved, install directly from Obsidian's community plugins browser.
Manual Installation
- Download the latest release from GitHub Releases
- Extract to your vault's plugins directory:
your-vault/.obsidian/plugins/mermaid-zoom - Enable the plugin in Obsidian:
- Settings → Community Plugins
- Find "Mermaid Zoom" and enable it
Usage
Mouse Controls
| Action | Description |
|---|---|
| Zoom | Enable the Wheel zoom toggle on a diagram, then scroll the wheel over it |
| Pan | Click and drag to move the diagram |
| Resize | Drag an edge or corner of the diagram container |
| Fullscreen | Click the fullscreen button to open in modal view |
Touch Controls (Mobile)
| Action | Description |
|---|---|
| Zoom | Pinch with two fingers |
| Pan | Drag with one finger |
Control Buttons
Located in the bottom-right corner of each diagram:
- Wheel zoom toggle - Enable wheel-to-zoom for this diagram (off by default)
+- Zoom in-- Zoom out⟲- Reset to fit⛶- Toggle fullscreen
Development
# Install dependencies
npm install
# Development mode (watch for changes)
npm run dev
# Production build
npm run build
Settings
The plugin provides the following settings in Obsidian's plugin settings:
- Default zoom level — Initial zoom percentage when a diagram is rendered (50–300%, default 100%). Set it higher (e.g., 150%) if you prefer diagrams to appear larger without zooming in manually each time. Note: changes only apply to newly rendered diagrams; reload the note to see the effect.
How It Works
The plugin automatically detects all Mermaid diagrams rendered in Obsidian and wraps each one in a zoomable, resizable container. Each container can be resized by dragging its edges or corners. Zoom range is from 10% to 500%.
Wheel zoom is off by default in the inline view (so the page scrolls normally); enable it per diagram with the Wheel zoom toggle. In the fullscreen modal, wheel zoom is always active.
Original SVG dimensions are cached to ensure consistent scaling behavior when resetting or resizing.
License
Support
- Issues: GitHub Issues
- Discussions: GitHub Discussions