livediagram

Embeds

Put a live diagram inside another page with a ready-made embed snippet.

An embed places a live copy of a diagram inside another page, like a wiki, a doc, Notion, or your own site. It shows the canvas, hides the editor chrome, and stays up to date as the diagram is edited. It is the simplest way to keep a diagram visible where your readers already are.

ABOpen in app<iframesrc="…"width=600height=400/>
A diagram sits inside a host page, with the copy-paste iframe snippet that embeds it.

What an embed shows

The embed is built from a share link, and it honours that link's role: a view link embeds a read-only canvas, while an edit link embeds an editable one, so readers of the host page can change the diagram right there. Pick the link to match: hand out a view-link embed when the page is for an audience, and an edit-link embed when it is for collaborators.

Inside the frame, the embed:

  • shows the canvas with pan, zoom, and pinch,
  • hides the header, tabs, and every floating panel, leaving a clean view,
  • defaults to the hand (pan) tool, so a drag pans the view; an editable embed still selects and edits on click,
  • keeps a small Open in livediagram badge in the corner that opens the full share view in a new tab,
  • shows a compact tab switcher when the diagram has more than one tab.

One editing feature stays off inside the frame: image uploads are unavailable in an embed, so adding pictures still happens in the full editor.

Because the embed joins the same realtime room as any viewer, it live-updates: when the diagram changes, the embedded view follows along.

Adding an embed to a page

Open the Share dialog and create or pick a share link for the diagram.
Open the Embed menu next to that link's URL and choose Copy iframe for a ready-made <iframe> snippet, or Copy embed URL for the bare URL.
Paste it into your page, wiki, or doc: the iframe snippet drops in directly, while the embed URL suits tools that turn a pasted link into an embed themselves.

The snippet comes with a sensible default size and a hairline border, which you can adjust in the markup. If the diagram has a share password, readers are prompted for it inside the embed frame, and the dialog notes this when you copy.

Privacy and self-hosting

An embed only exposes what the share link exposes: a view link's embed is a read-only view, and only an edit link's embed can change the diagram. Embeds also work on self-hosted instances with no external services: the snippet builds its URL from your own origin, so a self-hosted diagram produces a self-hosted embed.

Embedding several diagrams across a wiki is a tidy way to keep architecture and flow diagrams beside the docs that reference them, always showing the latest version.

Was this article helpful?