Draw.io View

Render draw.io .drawio diagrams inline inside your Obsidian notes — with smooth zoom, pan, multi-page tabs, shape links, and full support for third-party shape libraries.

---

Usage

Place your .drawio file anywhere in the vault, then embed it with a fenced code block:

```drawio-view
my-diagram.drawio
```

You can optionally set the starting page, height, zoom, and pan offset:

```drawio-view
my-diagram.drawio|my_page|600px|80%|(190, 34)
```

Parameter	Format	Example	Description
Page	page name or page-N	my_page · page-2	Which page to display. Default: first page.
Height	Npx	600px	Viewer height. Default: 400 px.
Zoom	N%	80%	Initial zoom level. Default: auto-fit.
Offset	(X, Y)	(190, 34)	Initial pan position. Default: centred.

All parameters are optional and can appear in any order.

---

Shape Libraries

If your diagram uses extended shape libraries (AWS, Azure, GCP, Cisco, Electrical, IBM, and many more), the plugin will detect this automatically and show a download banner the first time you open it.

Click Download — the missing libraries are fetched from draw.io's official repository, saved locally, and reused for all future diagrams. The banner also has a Settings shortcut if you prefer to manage libraries manually.

Go to Settings → Draw.io View → Shape Libraries to:

• Browse and download official libraries by category
• Use Auto-detect from vault to find all libraries needed by your existing diagrams
• Set a custom folder for your own shape files

---

Controls

Action	Result
Scroll wheel	Zoom in / out
Drag	Pan the diagram
Two-finger pinch	Pinch-zoom (touch / mobile)
Double-click	Reset to initial view
Drag bottom edge	Resize viewer height
↗	Open file in system default editor
⛶	Auto-fit to the viewer's current size
🔍	Toggle the magnifier
⊙	Save current view back into the code block
Page tabs	Switch pages (multi-page diagrams)

Tip: pan and zoom to the view you want, then click ⊙. The code block updates in-place and that view is restored every time you open the note. Once a specific zoom/offset is saved this way, double-click restores that saved view rather than auto-fitting — click ⛶ to get back to a fresh auto-fit (e.g. after resizing the viewer), then ⊙ again to save it.

Shape links

Hover any shape to see a ✎ button. Click it to attach a link to a vault note or external URL. To follow the link, click the shape (exact key depends on the Click behavior setting).

Magnifier

Click 🔍 to inspect fine detail without changing your zoom/pan. A circular loupe follows the cursor at a fixed magnification; + / - change its size. Scroll wheel still zooms the main view as usual. Press Esc or click anywhere else to exit.

---

Dark mode

The viewer automatically adapts to Obsidian's dark theme — no configuration needed.

---

Settings

Setting	Description
Zoom modifier key	Plain scroll or Ctrl+scroll to zoom.
Click behavior	Whether a plain click or Ctrl+click follows a shape link.
Custom library folder	A vault folder for your own shape files.
Shape Libraries	Download official libraries; auto-detect from vault.

---

Installation

Community plugin marketplace (recommended)

1. Settings → Community plugins → Browse
2. Search draw.io view → Install → Enable

Manual

Download main.js, manifest.json, and styles.css from the latest release and copy them to <vault>/.obsidian/plugins/drawio-view/.

---

Known limitations

• Some shapes from draw.io's table or extended shape sets may not render perfectly.
• ![[file.drawio]] wiki-embed syntax is not supported — use the code block instead.
• In Live Preview, exiting the code block editor can cause a small scroll shift (under investigation).

---

Star History

---

License

MIT © 2026 sdking.xing