Better Mermaid

joven1k downloads

Enhance Mermaid diagrams with click-to-zoom and custom CSS injection

Overview
Scorecard
Updates7

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, and styles.css from 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
Enhance readability	Thicken lines; dark mode: brighten lines & darken subgraphs (off = match reading view)	On
Modal width	Width of the modal (% of viewport)	80%
Modal height	Height of the modal (% of viewport)	80%
Default zoom level	Initial zoom when opening a diagram	100%
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;    /* 超出时显示滚动条 */
}

Troubleshooting

Cannot open the plugin's settings tab (the page is blank/unresponsive, console shows TypeError: e.display is not a function)

Cause: since v1.0.6 the settings tab uses the declarative settings API (getSettingDefinitions()), which requires Obsidian 1.13.0 or later. On older versions Obsidian still tries to render the tab through the legacy display() method, which is no longer implemented.
Fix: update Obsidian to 1.13.0 or newer — Settings → About → Check for updates. You can see your current version in Settings → About.
Note: manifest.json declares minAppVersion: 1.13.0, so installs from the community directory automatically block older Obsidian versions; only manually copied (sideloaded) plugins can end up running on an outdated Obsidian.

Compatibility

Minimum Obsidian version: 1.13.0 (required by the declarative settings API used for the settings tab)
Works on both desktop and mobile
Mobile: pinch to zoom, single-finger pan, double-tap to zoom, share-sheet / vault save for PNG export

License

MIT

HealthExcellent

ReviewSatisfactory

About

## 中文版 **v1.0.8 — 可读性增强开关 + 桌面端体验修复** ### 新功能 - **新增「增强图表可读性」设置**(默认开启,可在设置中关闭,切换即时生效): - 连线加粗至 2.5px(深色/浅色模式均生效) - 深色模式:连线与箭头提亮、subgraph 区块背景暗色化、区块标题提亮,大幅改善深色背景下的可读性 - 关闭后,弹窗配色与阅读视图完全一致(图表为阅读视图渲染结果的克隆) ### 修复 - **桌面端缩放塌陷**:缩放过程中(尤其回到 100% 时)图表突然变得特别小、弹窗高度时大时小——现已将弹窗高度固定为设置中的百分比,彻底消除该问题 - **设置页语言切换实时刷新**:切换语言后界面立即更新,无需重新打开设置页 ### 改进 - **滚轮直接缩放**:普通滚轮即可以鼠标位置为中心缩放(原先需要 Ctrl+滚轮) - Shift + 滚轮横向平移;按住左键拖拽自由平移(保留) - 触控板双指捏合缩放继续可用 > 要求 Obsidian ≥ 1.13.0(声明式设置 API)。 --- ## English **v1.0.8 — Readability enhancements toggle + desktop fixes** ### Features - **New "Enhance diagram readability" setting** (enabled by default, applies instantly): - Thicker connector lines (2.5px, both light & dark themes) - Dark mode: brightened lines & arrows, darkened subgraph backgrounds and brightened cluster titles for much better contrast - When disabled, the viewer matches reading-view colors exactly (the diagram is a clone of the rendered SVG) ### Fixes - **Desktop zoom coll

Visualization Export CSS

Details

Current version

1.0.8

Last updated

3 days ago

Created

3 months ago

Updates

7 releases

Downloads

Compatible with

Obsidian 1.13.0+

Platforms

Desktop, Mobile

License

MIT

Author

joven

joven-lynn

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

Installation

Download main.js, manifest.json, and styles.css from 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.

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

Enhance readability

Thicken lines; dark mode: brighten lines & darken subgraphs (off = match reading view)

Modal width

Width of the modal (% of viewport)

80%

Modal height

Height of the modal (% of viewport)

80%

Default zoom level

Initial zoom when opening a diagram

100%

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; /* 超出时显示滚动条 */ }

Troubleshooting

Cannot open the plugin's settings tab (the page is blank/unresponsive, console shows TypeError: e.display is not a function)

Cause: since v1.0.6 the settings tab uses the declarative settings API (getSettingDefinitions()), which requires Obsidian 1.13.0 or later. On older versions Obsidian still tries to render the tab through the legacy display() method, which is no longer implemented.

Fix: update Obsidian to 1.13.0 or newer — Settings → About → Check for updates. You can see your current version in Settings → About.

Note: manifest.json declares minAppVersion: 1.13.0, so installs from the community directory automatically block older Obsidian versions; only manually copied (sideloaded) plugins can end up running on an outdated Obsidian.

Better Mermaid

Features

Preview

Installation

Manual Build

Usage

Settings

Custom CSS Example

Troubleshooting

Compatibility

License

Better Mermaid

Features

Preview

Installation

Manual Build

Usage

Settings

Custom CSS Example

Troubleshooting

Compatibility

License

Related plugins

Mermaid View

Vault Graph

Markmind

Advanced Canvas

Excalidraw

Breadcrumbs

Custom Frames

Maps

Admonition

Mermaid Tools