Embed · GET endpoints

Embed in your README, Notion, or blog

Beauty Diagram exposes two GET endpoints that return SVG directly. Use them in any environment that supports <img src>: GitHub README, Notion, Confluence, Medium, your own blog, even Slack messages with HTML preview.

See both methods CLI guide API reference

README.md

# Architecture

![Architecture](https://api.beauty-diagram.com/v1/share/abc12345.svg)

# → renders as a polished SVG on github.com
# → re-fetches whenever the page reloads

01

Works anywhere

GitHub, Notion, Confluence, Medium, Slack.

02

SVG native

Crisp at any resolution, tiny file size.

03

No JS required

Plain <img src> — no embed scripts.

04

Always current

Saved embeds re-fetch on every page load.

Two methods

Pick the right endpoint

Both endpoints return SVG over plain HTTP GET — no JavaScript, no embed script. The saved-diagram path gives you a stable, human-readable URL; the inline path lets you embed without creating an account.

Saved diagram embed

Clean output if you have Pro

Save the diagram once, get a stable URL you can drop into any markdown. Pro and Premium accounts get clean SVG; free accounts see a small watermark.

Stable URLReflects latest save

URL form

https://api.beauty-diagram.com/v1/share/<share-token>.svg

Inline embed

No signup required

Pass the diagram source as a base64-encoded query param. No account needed — but the output is always watermarked and IP rate-limited. Source must decode to ≤ 5 KB.

Zero signupAlways watermarked

URL form

https://api.beauty-diagram.com/v1/beautify.svg?source=<base64>&theme=atlas

Watermark policy:free plan and anonymous embeds carry a small “Powered by Beauty Diagram” mark. Pro and Premium saved-diagram embeds are clean. Save the diagram with bd share and upgrade to remove it. See pricing.

CLI helper

Generate URLs from the terminal

The bd embed-url command handles base64 encoding and URL construction for you. Pass --share to save the diagram first and print the cleaner share URL instead.

bd embed-url ./architecture.mmd --theme atlas
bd embed-url ./architecture.mmd --share   # saves first, prints clean share URL

Examples

Real-world patterns

GitHub README

Replace a raw Mermaid fenced block with an ![]() reference. GitHub renders it as an inline image — no extension or plugin required.

![Architecture](https://api.beauty-diagram.com/v1/share/abc12345.svg)

Notion / Confluence / Slack Canvas

These platforms don’t parse HTML or Markdown image syntax — they prompt a popover when you paste a URL. Paste the .svg URL directly:

https://api.beauty-diagram.com/v1/share/abc12345.svg

Paste the URL onto the page; in the popover, choose Display as image (Notion) or Embed (Confluence Smart Link). The platform fetches the SVG once and re-hosts it on its own CDN, so the diagram becomes a static snapshot — paste again if you update the source. This is the cleanest visual result; for live auto-updating embeds you would need to iframe the share page (/s/<slug>) directly, but that brings the full site chrome inside the iframe and is rarely worth the trade-off.

Inline embed (no account)

Use bd embed-url without --share to get a self-contained URL. The source is base64-encoded inline — nothing is saved server-side. Watermarked; source capped at 5 KB decoded.

bd embed-url ./architecture.mmd --theme atlas
# → prints a ready-to-paste URL

HTML `<img>` tag

Any page that renders HTML can use a plain <img> tag — no JavaScript, no iframe. The SVG scales to whatever width you set.

<img
  src="https://api.beauty-diagram.com/v1/share/abc12345.svg"
  alt="Architecture diagram"
  width="800"
/>

Remove the watermark

Save diagrams with bd share and upgrade to Pro — your embeds will be clean SVG with no attribution mark.

See pricing CLI guide