Embed a diagram in Notion, Confluence or your own site

A DrillFlow diagram can live inside another page and keep its depth there: readers double-click a shape to go a level down and use the breadcrumbs to come back, without leaving the page they are reading. Other embeds show a flat picture; this one is the diagram.

A diagram embedded in a wiki page: double-click a step to go a level down, the breadcrumb brings you back — the page around it stays.
  1. Open the diagram in the editor.
  2. Open the ≡ menu → Embed… and choose Create embed link.
  3. The dialog shows a live preview and three rows to copy: Link, HTML (an <iframe>) and Picture. Which one you need depends on where it goes — see below.
The Embed dialog with its live preview, size choices and the Link, HTML and Picture rows The Embed dialog with its live preview, size choices and the Link, HTML and Picture rows
The Embed dialog: preview, size, and the three rows to copy.

Sign in first if the embed should stay. A link made without an account stops working after 72 hours, and the page you embedded it in then shows an error instead of your diagram. A free account keeps its links.

An embed is a snapshot: later edits do not reach it. To show a newer version, create a new link and paste it again.

2a. Notion

  1. Copy the Link row from the Embed dialog.
  2. On your Notion page, type /embed and pick Embed.
  3. Paste the link and click Embed link.
  4. Drag the block's bottom edge until the whole diagram fits.

2b. Confluence (Cloud)

  1. Copy the Link row from the Embed dialog.
  2. While editing the page, type /iframe and pick the iFrame macro.
  3. Paste the link and set a height in pixels — 480 is a good start, and a width too if you want a fixed one.
  4. Publish the page.

Pasting the link on its own may only show a link card, which is why the iFrame macro is the way to get the diagram itself.

2c. Your own website or blog

  1. Copy the HTML row from the Embed dialog. Pick the size there first: a width of 100% follows the column it sits in, on a phone as well; the height is in pixels, because a frame has no height of its own.
  2. Paste it into the page's HTML, or into your site builder's HTML or custom-code block.

2d. A README, an email, anywhere a frame is not allowed

GitHub, email and many wikis strip frames. Copy the Picture row instead: it is a Markdown image of the diagram. To make the picture open the interactive diagram, wrap it in a link to the diagram: 

[![My process](picture-address)](diagram-url)
The picture a share link carries: the diagram's top level as a still image The picture a share link carries: the diagram's top level as a still image
What the Picture row gives you — a still of the top level.

More

How embeds behave, in the help: Docs → Embedding.