Embed your diagram

Once you enable sharing on a diagram, you can drop a live, interactive copy into any page that accepts an iframe — wikis, site builders, and CMS pages — where readers can pan, zoom, and step through the flow without leaving the page. (Note: Google Docs can't embed iframes — see below.) Here's how for the most common platforms.

First, grab your embed code

Open your diagram and click Share.
Turn on Enable Sharing.
Copy the Embed in any webpage snippet — it looks like this:

<iframe src="https://flostep.dev/s/YOUR_TOKEN/embed"
        width="900" height="550" frameborder="0"
        allow="fullscreen" allowfullscreen
        style="border-radius:12px;"></iframe>

The /embed at the end of the URL is what gives you the clean, chrome-free view. You can freely change width and height to fit your page. Keep allowfullscreen — it's what lets readers expand the diagram to full screen. If you copied your snippet before it was included, add it to the tag.

Notion

Notion supports live embeds directly — no HTML needed.

Copy the plain share link (the "Copy Link" button in the Share dialog).
In Notion, type /embed and paste the link, or paste the link on an empty line and choose Create embed.
Drag the block's edges to resize.

Confluence

Confluence blocks raw <iframe> HTML in the editor, so you use a macro instead.

Confluence Cloud: type /iframe and add the Iframe macro, then paste the embed URL (…/embed). For a quick preview instead of a live canvas, you can also just paste the share link and pick Display as card.
Confluence Server / Data Center: use the built-in HTML or Iframe macro and paste the full embed snippet.

Tip: in Confluence, set the macro's width to 100% rather than a fixed pixel value — the diagram then fills the page column and stays responsive, instead of getting cut off on narrower pages.

Google Sites (Google Docs won't work)

Google Docs can't embed iframes at all — the most it can do is show the share link as a clickable chip, not a live diagram. There's no workaround; that's a Google Docs limitation. For a truly interactive embed, use Google Sites instead:

In Google Sites, click Insert → Embed.
Choose By URL and paste the embed URL, or Embed code and paste the full iframe snippet.
Click Insert and resize.

WordPress

Add a Custom HTML block.
Paste the embed snippet and publish.

Any other website

Anywhere you can add HTML, paste the <iframe> snippet directly into your page's source. That's all it takes.

Good to know

Embeds are read-only — viewers can't change your diagram.
Updates you make in Flostep show up in the embed automatically.
The full-screen button in the corner fills the reader's screen when the page allows it. Where the host page doesn't — some wikis and embed blocks don't let embeds go full screen — it opens the diagram full size in a new tab instead.
Turning off sharing disables the link and every embed pointing at it.
Don't put confidential information in a diagram you embed publicly.

Stuck? Email us at support@flostep.dev.