Better Mermaid
joven836 downloadsEnhance Mermaid diagrams with click-to-zoom and custom CSS injection
- Overview
- Scorecard
- Updates5
An Obsidian plugin that enhances Mermaid diagram viewing experience with click-to-zoom, pan & zoom controls, and PNG export.
Features
- Click to Zoom — Click any Mermaid diagram in reading mode to open it in a full-size modal
- Pan & Zoom — Scroll to pan, Ctrl + scroll to zoom, drag to move around
- Zoom Presets — Quick zoom levels: 20%, 50%, 75%, 100%
- Export PNG — Download any diagram as a high-resolution PNG image (2x)
- Custom CSS — Inject your own CSS to customize Mermaid diagram appearance
- i18n — English and Chinese language support
Preview
Click a Mermaid diagram → opens a floating modal with frosted glass controls:
Installation
- Download
main.js,manifest.json, andstyles.cssfrom the latest release - Copy them to your vault's
.obsidian/plugins/obsidian-better-mermaid/folder - Enable the plugin in Obsidian Settings → Community Plugins
Manual Build
npm install
npm run build
Then copy main.js, manifest.json, and styles.css to the plugin folder.
Usage
| Action | Control |
|---|---|
| Open modal | Click a Mermaid diagram in reading mode |
| Pan vertically | Scroll wheel |
| Pan horizontally | Shift + scroll wheel |
| Zoom | Ctrl + scroll wheel |
| Pan freely | Click and drag |
| Preset zoom | Select from dropdown (20% / 50% / 75% / 100%) |
| Download PNG | Click Download PNG button |
Settings
| Setting | Description | Default |
|---|---|---|
| Language | UI language (English / 中文) | English |
| Enable click to zoom | Toggle the click-to-zoom feature on/off | On |
| Modal width | Width of the modal (% of viewport) | 80% |
| Modal height | Height of the modal (% of viewport) | 80% |
| Custom CSS | CSS rules injected into Obsidian | (empty) |
Each slider has a reset button to restore default values.
Custom CSS Example
.markdown-preview-view .mermaid svg,
.markdown-source-view .mermaid svg {
max-width: 100% !important;
height: auto !important;
}
/* 限制最大高度，避免纵向过长 */
.markdown-preview-view .mermaid,
.markdown-source-view .mermaid {
max-height: 80vh; /* 可根据需要调整，如 70vh、90vh */
overflow: auto; /* 超出时显示滚动条 */
}
Compatibility
- Minimum Obsidian version: 0.15.0
- Works on both desktop and mobile
License
MIT
HealthExcellent
ReviewPassed
About
Version 1.0.5 增加默认缩放级别配置项
Open any Mermaid diagram in a full-size frosted-glass modal by clicking it in reading mode. Pan, drag and Ctrl+scroll to zoom with quick presets (20/50/75/100%), export high-resolution PNGs (2x), and inject custom CSS or switch UI language between English and Chinese.Details
Current version
1.0.5
Last updated
Last month
Created
2 months ago
Updates
5 releases
Downloads
836
Compatible with
Obsidian 1.0.0+
Platforms
Desktop, Mobile
License
MIT
Author