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.

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

Notion

Notion supports live embeds directly — no HTML needed.

1. Copy the plain share link (the Copy button on the Share dialog's Link tab).
2. In Notion, type /embed and paste the link, or paste the link on an empty line and choose Create embed.
3. 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:

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

WordPress

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

Markdown (GitHub, ADRs, READMEs)

GitHub strips iframes out of markdown, so the live embed never renders in a README, an ADR or a pull request. Use the diagram as an image that links to the live walkthrough instead — add .svg to the share link:

[![Checkout flow](https://flostep.dev/s/YOUR_TOKEN.svg)](https://flostep.dev/s/YOUR_TOKEN)

The Share dialog has this ready to copy on its Image tab, and flostep share Xk3p9QvA2wE --markdown prints it from a script. The image is drawn from the diagram as it is now, so it follows every edit — including ones made through an agent, where nobody opens the editor.

Flow or sequence view

The image draws the flow view by default — components as boxes, steps as numbered arrows between them. Add ?view=sequence to the image URL to draw it as a sequence diagram instead: one column per component and one row per step, top to bottom in order.

[![Checkout flow](https://flostep.dev/s/YOUR_TOKEN.svg?view=sequence)](https://flostep.dev/s/YOUR_TOKEN)

Use it for a long walkthrough, or one where many steps pass between the same two components: in flow view those stack up between a single pair of boxes, while the sequence view gives every step its own row, so it stays readable however many there are. Only the image changes — the link opens the same walkthrough, where readers can switch between the two views themselves.

A diagram in an ADR

1. Keep the steps in a file beside the decision record, e.g. docs/adr/0007.flostep, so the flow is reviewed with the text.
2. Publish it from CI on every change (see Continuous integration in the CLI docs):

   - name: Publish diagram
     run: npx flostep update Xk3p9QvA2wE < docs/adr/0007.flostep
     env:
       FLOSTEP_TOKEN: ${{ secrets.FLOSTEP_TOKEN }}

3. Put the image snippet in the ADR. Readers see the picture inline and click through to step through it.

Any other website

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

Stuck? Email us at support@flostep.dev.