Mermaid Zoom

English | 简体中文

An Obsidian plugin that adds zoom and pan functionality to Mermaid diagrams.

Features

• Mouse Wheel Zoom - Scroll over any Mermaid diagram to zoom in and out
• 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

Installation

Obsidian Plugin Market (Coming Soon)

Once approved, install directly from Obsidian's community plugins browser.

Manual Installation

1. Download the latest release from GitHub Releases
2. Extract to your vault's plugins directory:

   <your-vault>/.obsidian/plugins/mermaid-zoom
   

3. Enable the plugin in Obsidian:
   • Settings → Community Plugins
   • Find "Mermaid Zoom" and enable it

Usage

Mouse Controls

Touch Controls (Mobile)

Control Buttons

Located in the bottom-right corner of each diagram:

• + - 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

How It Works

The plugin automatically detects all Mermaid diagrams rendered in Obsidian and wraps each one in a zoomable container. Zoom range is configurable from 10% to 500%.

Original SVG dimensions are cached to ensure consistent scaling behavior when resetting or resizing.

License

MIT © Wang Xiao Zhuang

Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions