Mermaid In Place

Pinch-zoom, pan and resize Mermaid diagrams right where they sit in your note. No popups, no modals, no new panes, no diagrams flying off the screen.

Your diagram stays in its frame, in your note, in your flow. You just get to look at it properly.

---

Why this exists

Mermaid diagrams in Obsidian are great until they get big. Then you have two options: squint, or install a plugin. I tried the plugins. Here's what kept getting in the way:

• Zoom that runs away from you. Many plugins zoom a fixed 10–20% per wheel event. A mouse wheel sends one event per notch, so that's fine. A MacBook trackpad sends dozens of tiny events per gesture, so one gentle pinch sends the diagram to 50× or down to a dot.
• Popups and modals for everything. You want to look a bit closer at one corner of a diagram, and instead you get a floating window that covers your note, needs its own close button, and loses your place.
• "Expand" buttons that don't expand in place. The diagram jumps into some other frame or overlay, often partly off-screen, instead of the box it's already in getting bigger.
• Clicking a diagram shifts it. A trackpad click almost always moves the pointer a pixel or two. Plugins that treat any movement as a drag nudge your diagram every time you click on it.
• Clicking a diagram in Live Preview throws you into the code. You wanted to look at the picture, and now you're editing the Mermaid source.
• You can lose the diagram entirely. Zoom out a little too far, or pan a little too hard, and it's gone, somewhere outside the frame, with no way to find it except a reset.
• Leftovers after you uninstall. Some plugins inject buttons and hard-coded sizes into your notes and never clean them up when disabled, so your layout stays broken until you restart Obsidian.

Philosophy

1. In place, always. The diagram never leaves the note. Zooming and panning happen inside the diagram's own frame, and the note layout around it doesn't move by a single pixel unless you resize the frame on purpose.
2. Proportional, smooth input. Zoom follows how far your fingers actually move, not how many events the hardware sends. All the events in one animation frame are combined into a single smooth step, so trackpads and mice both feel right.
3. You can't get lost. With Keep diagram in view on (the default), you can't zoom out to a speck, and a strip of the diagram always stays visible in the frame no matter how hard you pan.
4. A click is a click. The pointer has to move a few pixels before a press counts as a drag, so clicking never nudges anything.
5. Respect the editor. Interacting with a diagram never kicks you into editing its source. Obsidian's own </> button is still there when you do want to edit.
6. Leave no trace. Disabling the plugin removes everything it added: buttons, sizes and transforms.

Features

Gesture / control	What it does
Pinch (trackpad) or Ctrl/Cmd + wheel (mouse)	Zoom in or out, anchored at your cursor
Two-finger scroll over a diagram	Pan the diagram around inside its frame (optional, see Settings)
Click and drag	Pan the diagram
Double-click the diagram	Reset zoom, pan and frame size
Toolbar (top-left of each diagram)	Zoom in, zoom out, reset
Resize grip (bottom-right corner)	Drag to make the frame taller or shorter, right in the note. Double-click the grip to restore the original height.

Works in Live Preview and Reading view.

The toolbar and grip stay faintly visible at all times, so you can always find them, and become fully visible when you hover over the diagram.

Settings

Setting	Default	Description
Pinch zoom speed	12	1–20. Lower is slower. Applies to trackpad pinch and Ctrl/Cmd + mouse wheel.
Two-finger scroll pans the diagram	On	On: scrolling with the pointer over a diagram moves the diagram. Off: scrolling over a diagram scrolls the note as usual, and you pan by dragging.
Keep diagram in view	On	Limits zoom-out to a quarter of the size at which the diagram would fit its frame, and always keeps at least 48 px of the diagram inside the frame on both axes. Turn it off for unrestricted zoom and pan.

A note on two-finger scrolling

With Two-finger scroll pans the diagram on, scrolling while your pointer is over a diagram moves the diagram, not the note. To scroll past a tall diagram, keep the pointer in the margin or over text. If you'd rather never have scrolling captured, turn the setting off. Drag-to-pan and pinch-to-zoom keep working.

Installation

From Community plugins

1. Open Settings → Community plugins → Browse.
2. Search for Mermaid In Place.
3. Select Install, then Enable.

Manually

1. Download main.js, manifest.json and styles.css from the latest release.
2. Put them in <your vault>/.obsidian/plugins/mermaid-in-place/.
3. Reload Obsidian and enable Mermaid In Place under Settings → Community plugins.

Compatibility

• Desktop only (macOS, Windows, Linux). Touch-screen pinch isn't supported yet.
• Built and tested against Obsidian 1.14.
• If you used the Diagram Popup plugin before: it leaves its "Open Popup" button and fixed pixel sizes in your notes after you disable it. Mermaid In Place removes those orphaned leftovers from diagrams it manages. It leaves them alone while Diagram Popup is still running.
• Other plugins that also add zoom or popups to Mermaid diagrams will likely conflict. Use one at a time.

How it's tested

Interaction is tested in headless Chromium, the engine Obsidian runs on, against a page that uses Obsidian's real stylesheet, the Live Preview markup Obsidian produces for Mermaid blocks, and real Mermaid-rendered diagrams. The suite drives actual pointer, wheel and pinch events and checks, among other things, that:

• a click with 2 px of pointer jitter doesn't move the diagram,
• pinch zoom stays anchored under the cursor,
• zooming and panning never change the note's layout,
• the resize grip changes the frame height and nothing else,
• the diagram is clipped to its frame at any zoom level,
• with Keep diagram in view on, extreme zooming and panning in every direction always leaves at least 48 px visible,
• clicks never reach the editor or Obsidian's block-selection handler.

Feedback

Found a bug or have an idea? Open an issue.

License

MIT © Ahnaf Ahsan