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)

Settings → Community plugins → Browse
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).

Draw.io View

Description

Reviews

Stats

Latest Version

Changelog

🚀 Features

📝 Documentation

README file from