Rich View

Show draw.io, Visio and PowerPoint files right inside your notes. Zoom, pan, flip through pages, follow shape links. Word, CAD and more are on the list.

-->

Features

• Embed in a note with a rich-view code block. Insert an empty one and click Import file.
• draw.io, Visio, PowerPoint: .drawio, .vsdx, .pptx.
• Zoom, pan, magnifier. Slides show one at a time and always fit.
• Page tabs for diagram pages and slides.
• Open in a tab: click the file in the explorer, no code block needed.
• Searchable from Rich Search. Click a result and it jumps to the page or slide and marks the match.
• Shape links on draw.io shapes.
• Pin the view (page, zoom, position) into the code block.
• Third-party shape libraries (AWS, Azure, GCP, Cisco...), downloaded on demand.
• Fullscreen, resizable height, dark mode, works on mobile.

Demo

Embed a file in a note

Insert an empty rich-view block, click Import file, pick a file. Done.

🎬 Demo GIF coming soon

Zoom, pan and pin

Scroll to zoom, drag to pan, magnifier for small print. Pin to save the view.

🎬 Demo GIF coming soon

Slides and pages

Slides and diagram pages switch with tabs.

🎬 Demo GIF coming soon

Open in a tab

Click a file in the explorer. It opens full size.

🎬 Demo GIF coming soon

Search inside diagrams and slides

Search a word in Rich Search, click a result. The file opens at the right page, zooms in, and the match is marked.

🎬 Demo GIF coming soon

Shape links and libraries

Hover a shape, click ✎ to add a link. Missing shape libraries download in one click.

🎬 Demo GIF coming soon

Usage

Put the file anywhere in the vault and embed it with a rich-view block. Easiest: insert an empty block and click Import file.

Or write it yourself:

```rich-view
file=my-diagram.drawio
```

Everything else is key=value, separated by |, in any order:

```rich-view
file=my-diagram.drawio|page=my_page|height=600|zoom=80|offset=190,34
```

Open a file in its own tab

Click a .drawio, .vsdx or .pptx in the file explorer. It opens in a normal tab with the same zoom, pan and pages as the embedded viewer.

Don't want it? Turn a format off under Settings → Rich View → File tabs, e.g. if another plugin should open .drawio. Reload the plugin to apply.

Search with Rich Search

With Rich Search installed, text inside your files is searchable like your notes:

• While the search panel is open, every match in the open file is marked. The one you clicked is brighter, with an outline. The colour is the one you set in Rich Search.
• Marks follow the search scope. A file outside the folders or file types you limited the search to is not marked, even if it is open in another tab, and the marks appear or disappear as soon as you change the scope. (Needs a Rich Search version that publishes its scope; with an older one every open file is marked.)
• If the diagram is too small to read, it zooms in until the text is about as big as your note text.
• PowerPoint marks the keyword itself when it can measure the text, otherwise the whole text box. draw.io and Visio mark the whole shape.
• No Rich Search? Files open as usual, just without marks.

Shape Libraries

If a diagram uses extra libraries (AWS, Azure, GCP, Cisco, IBM...), a banner shows up the first time you open it. Click Download: the libraries come from draw.io's official repo and are kept locally for next time.

Settings → Rich View → Shape libraries lets you:

• Browse and download libraries by category
• Auto-detect from vault: find every library your diagrams need
• Set a custom folder for your own shapes

Controls

Under every viewer: page tabs on the left, the zoom level, then icon buttons on the right.

Tip: get the view you want and click the pin icon. The code block updates, and the note opens on that view every time. After pinning, double-click goes back to the pinned view; click Auto-fit to viewer to start fresh, then pin again.

Slides

One slide at a time, with numbered tabs. The slide always fits, so shrink the height and it refits. Ctrl+scroll to zoom in, scroll bars to move around. No animations or transitions.

Shape links

Hover a draw.io shape and click ✎ to link it to a note or a URL. Click the shape to follow the link (which click depends on Click behavior).

Magnifier

Click 🔍 for a loupe that follows the cursor. + / - resize it, the wheel still zooms. Esc or click elsewhere to exit.

Dark mode

Follows Obsidian's theme. Nothing to set up.

Settings

Installation

Community plugins (recommended): Settings → Community plugins → Browse → search Rich View → Install → Enable.

Manual: download main.js, manifest.json and styles.css from the latest release into <vault>/.obsidian/plugins/rich-view/.

Needs Obsidian 1.8.7 or newer.

Known limitations

• Some shapes from draw.io's table and extended sets don't render perfectly.
• Visio: arrowheads are all one generic triangle; fill and line patterns are approximated; elliptical arcs draw as straight lines; shape hyperlinks aren't read; a text box with no outline isn't drawn (so it isn't searchable). No legacy .vsd.
• Visio fonts are used only if installed on your computer; otherwise the system font is used.
• PowerPoint: no animations or transitions; SmartArt, charts and embedded fonts are best-effort; no legacy .ppt.
• ![[file.drawio]] embeds don't work. Use the code block.
• In Live Preview, leaving the code block editor can cause a small scroll jump.

Development

npm install
npm run dev     # watch
npm test        # unit tests
npm run lint
npm run build   # type-check + production bundle

Read CLAUDE.md first: architecture, how tests are written, how to release.

Agent Skill

A skill for AI coding agents (Claude Code, Cursor, Codex, Copilot and many more). Once installed, the agent can embed a diagram or deck in a note, switch its page, zoom and height, or point a block at another file, without you looking up the syntax.

# pick your agents interactively
npx skills add SdKay/obsidian-rich-view

# or for all your projects (-g), into one agent
npx skills add SdKay/obsidian-rich-view -g -a claude-code

# later, to pick up newer versions
npx skills update

Only the skill files are installed (three small Markdown files), not the plugin or this repo. Leave out -g to install into the current project only. By hand: copy the skills/obsidian-rich-view folder into your agent's skills folder.

Then ask your agent: "Embed system.drawio in this note, page Overview".

Star History

License

MIT © 2026 sdking.xing

Support the Project

Rich View is free and open source. If it saves you time, a donation helps keep it going.

💳 PayPal

🧧 WeChat Pay / Alipay

WeChat Pay	Alipay

Thanks! 🙏

Feedback

Bugs and ideas: GitHub Issues