Integration · VS Code

Beautify Mermaid in VS Code

Every ```mermaid and ```plantuml block in Markdown Preview rendered with 9 deck-ready themes. CodeLens above the fence, share-mode toggle in the palette, optional portable embed URLs in your repo.

Install in VS Code View on Marketplace

Available on VS Code Marketplace + Open VSX · Works in Cursor / VSCodium / Windsurf · MIT license · Source on GitHub

VS Code with markdown preview open — Beauty Diagram renders a Mermaid fence into a polished SVG alongside the source

What you get

A markdown-it plugin that hooks into VS Code's built-in Markdown Preview engine — no separate webview, no extra UI to learn.

Renders inside Markdown Preview

Intercepts every Mermaid and PlantUML fence in the built-in preview, no extra panes. Works in VS Code, Cursor, VSCodium, and Windsurf.

CodeLens & commands

↗ Open in Beauty Diagram editor above every fence; share mode, source injection, and verify-key commands from the palette.

Portable embed URLs

Inject <img> references next to each fence so the same diagrams render in GitHub README, Notion paste, and static-site blogs.

9 themes · one directive

Same diagram, every theme

Pick globally in Settings (beautyDiagram.defaultTheme) or per fence 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

Same extension across Marketplace and Open VSX. Pick whichever your IDE's store points at — the version stays in lock-step.

VS Code Marketplace

Extensions panel → search “Beauty Diagram” → Install. Or from the terminal:

code --install-extension beauty-diagram.beauty-diagram

Open VSX (Cursor / VSCodium / Windsurf)

Extensions panel inside Cursor / VSCodium / Windsurf → search “Beauty Diagram” → Install. Same publisher, same version.

Open VSX listing

After install

Open any .md with a Mermaid or PlantUML fence → open Markdown Preview (Cmd+K V). That's it.

Pro+ · per-page opt-in

Watermark-free preview for the pages you publish

Default render is anonymous and watermarked — no quota, no surprise charges. When a doc is ready for the docs site or a customer demo, toggle share mode for just that file and the existing fences re-render without the watermark.

Run “Beauty Diagram: Toggle share mode for this page” to add bd-share: true to the front-matter
Pre-fetches share tokens for every fence in the file (1 share quota per unique source)
Markdown Preview re-renders via /v1/share/<token>.svg — no watermark
VS Code doesn't allow webview→host async messaging, so toggle pre-fetches up front; if you add a new fence on a share-mode page, run the toggle twice to refresh

See plans & share quota

VS Code Markdown Preview with bd-share enabled — Beauty Diagram renders a memphis-themed flowchart without the watermark

FAQ

Is the extension 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 in Cursor / VSCodium / Windsurf?

Yes — any IDE that ships VS Code's built-in Markdown Preview engine (which means all of them). The extension contributes the markdown-it plugin and preview scripts through the standard markdown contribution points.

Will it conflict with other Mermaid extensions?

Set beautyDiagram.replaceMermaid to false and the built-in / other extensions handle Mermaid; beautyDiagram.handlePlantuml controls PlantUML the same way. By default both are on.

Can I self-host the API?

Yes. Point beautyDiagram.apiBase at your Beauty Diagram instance and every render goes through your server. Same applies to the bd CLI.

Also check out the Obsidian plugin and the bd CLI.