Integration · Obsidian

Beautify Mermaid in Obsidian

Drop the plugin into your vault and every ```mermaid and ```plantuml block renders with the same deck-ready themes Beauty Diagram uses on the web — without leaving Reading View.

Open in Obsidian View on Community Plugins

Available on Obsidian Community Plugins · BRAT alternative install · MIT license · Source on GitHub

Beauty Diagram rendering a Mermaid flowchart inside Obsidian's Reading View, replacing the raw code block with a deck-ready SVG

What you get

A thin client that delegates rendering to the same engine as the web editor — no bundled Mermaid, no Java for PlantUML.

9 themes, one click

Switch between Modern, Slate, Obsidian, Atlas, Blueprint and more with a global setting or a per-block %% bd:theme= directive. Dark-mode aware.

Mermaid + PlantUML

Same theme pipeline for both formats. No Java setup for PlantUML; everything renders through the Beauty Diagram API.

Stays in your vault

Open the full editor from a one-click ribbon, or render diagrams to portable embed URLs you can paste into GitHub README and Notion.

9 themes · one directive

Same diagram, every theme

Switch globally in Settings or per-block via %% bd:theme=.... Free plan unlocks Classic / Modern / Slate; Pro and Premium add the rest.

Build → Test → Staging → Production flowchart rendered in the Classic theme — ClassicFree

Build → Test → Staging → Production flowchart rendered in the Modern theme — ModernFree

Build → Test → Staging → Production flowchart rendered in the Obsidian theme — ObsidianPro

Build → Test → Staging → Production flowchart rendered in the Memphis theme — MemphisPremium

Install

Two install paths. Community Plugins is in review — until it shows up in Obsidian's in-app directory, BRAT gives you the same release straight from GitHub.

Community Plugins · recommended

Settings → Community plugins → Browse → search “Beauty Diagram” → Install. Or view the directory listing.

BRAT · alternative

Install the BRAT plugin → Command palette → BRAT: Add a beta plugin for testing → beauty-diagram/obsidian-beauty-diagram.

BRAT installs the same release artifact published to GitHub Releases — no version difference vs. Community Plugins.

Manual

Download main.js, manifest.json, and styles.css from Releases into .obsidian/plugins/beauty-diagram/.

Pro+ · per-page opt-in

Remove the watermark on the pages that matter

Default render is anonymous and watermarked — no quota, no surprise charges. When a page is ready to publish, flip share mode for that one note and the same diagrams render without the watermark.

Opt in per page with bd-share: true in the front-matter (or a one-click toggle command)
Diagrams render via /v1/share/<token>.svg — no watermark
Each unique source consumes 1 share quota (Pro: 100/month, Premium: unlimited)
Token cached locally; subsequent renders of the same source are free

See plans & share quota

Obsidian Reading View with bd-share enabled — Beauty Diagram renders a memphis-themed flowchart without the watermark

FAQ

Is the plugin free?

Yes. Default render is anonymous and free; every diagram is rendered with a small Beauty Diagram watermark. A Pro or Premium plan removes the watermark in share mode and unlocks Pro/Premium themes.

Does it work offline?

No — rendering happens server-side at api.beauty-diagram.com so we can do parsing, layout, and theme work without bundling a heavy renderer into your vault. You can self-host the API and point the plugin at it via Settings.

Will it replace Obsidian's built-in Mermaid?

Yes, by default. You can disable Mermaid override in Settings if you ever want to fall back. PlantUML support is additive — Obsidian doesn't render PlantUML natively.

What happens to my diagram source?

Anonymous renders pass the source as a query parameter to /v1/beautify.svg; the server uses it to render but does not persist. Share mode (opt-in) saves the diagram to your account so it can be served without watermark. Full details on the privacy page.

Also check out the VS Code extension and the bd CLI.