cd /news/ai-tools/show-hn-live-step-through-diagram-em… · home topics ai-tools article
[ARTICLE · art-116343] src=flostep.dev ↗ pub= topic=ai-tools verified=true sentiment=· neutral

Show HN: Live, step-through diagram embeds for Confluence

Flostep has launched live, step-through diagram embeds for Confluence and Notion that automatically update when the underlying process changes, eliminating stale documentation. The embed uses an iframe pointing to the diagram's live URL, so editing the diagram in Flostep refreshes every embedded doc without re-exporting or re-uploading. Flostep also integrates with AI assistants like Claude, allowing users to update diagrams by describing changes in plain language.

read4 min views1 publishedAug 31, 2026
Show HN: Live, step-through diagram embeds for Confluence
Image: source

All posts Embedding a live Flostep diagram in Confluence or Notion means the picture updates when the process does — no re-export, no re-upload, no stale wiki page.

Here’s a scene almost every team knows, not just engineers: someone draws a process diagram — an onboarding flow, a support escalation path, an approval chain — and drops a picture of it into a doc. Everyone nods along. A few weeks later, the process has changed twice, but the picture on the page hasn’t. Now the “how we do this” doc is quietly lying to anyone who trusts it.

We built Flostep’s embed to fix exactly this — not by making diagrams easier to draw, but by making them impossible to go stale, wherever your documentation happens to live.

The idea: embed the diagram, not a picture of it #

When you embed a Flostep diagram into your docs, you’re not pasting an image. You’re dropping in a live pointer to the actual diagram. Update the diagram in Flostep, and every doc it’s embedded in reflects the change automatically — no re-export, no re-upload, no “let me find that file again.”

This works anywhere a doc tool lets you drop in an iframe or embed block — Confluence, Notion, an internal wiki, even a static docs site. And it isn’t just for system diagrams: teams use it for onboarding checklists, customer journeys, support workflows, approval processes, hiring pipelines — anything you’d normally draw as a flow and then forget to update. We call it live documentation updates: the diagram and the doc stay in sync because they were never really two separate things.

How it works, in practice — using Confluence as the example #

1. Build the flow in Flostep

Design your flow as usual — steps, decisions, handoffs — using Flostep’s step-through canvas (Back/Next controls that walk viewers through it one step at a time, instead of dumping everything on them at once). It works just as well for “how a support ticket gets escalated” as it does for “how a request moves through our system.”

2. Grab the embed code

From the share menu, copy the embed snippet. It’s a standard iframe pointing at your diagram’s live URL — the same snippet works no matter where you paste it. 3. Drop it into your docs tool

In Confluence, add an “Embed” or “HTML” macro to the page and paste the snippet in. Save the page. Your step-through diagram now renders right inside Confluence, fully interactive — readers can click Next/Back without leaving the page. (Notion’s embed block, or any tool with an HTML/iframe macro, works the same way.)

4. Change the diagram, not the doc

Here’s the part that matters: the next time the process changes — a new approval step gets added, a tool gets swapped out, a handoff moves to a different team — open the diagram in Flostep, edit it, and save. Refresh the Confluence page and the embed shows the new version. Nobody had to go find and touch the wiki page itself.

5. Or update it by just describing the change

If your team is comfortable with AI assistants, Flostep also connects to tools like Claude, so you can update a diagram by describing the change in plain language — “add a manager approval step before the request goes to finance” — instead of dragging boxes around. Save, and the embed picks up the change the same way it would if you’d edited it by hand.

Why this matters more than it sounds #

Most teams don’t skip updating diagrams because they’re lazy — they skip it because updating means re-drawing, re-exporting, re-up, and re-explaining to a doc tool that doesn’t know the diagram changed. Every one of those steps is a chance for the doc to just… not get updated. That’s true whether it’s an engineering diagram in Confluence, an HR process in Notion, or a workflow chart in any tool your team already uses.

Flostep’s embed removes the steps, not the discipline. The diagram is the documentation. When it’s current, your docs are current — automatically, for free, every time.

If your team’s process docs have a picture in them right now, there’s a good chance it’s already wrong. Try embedding the next one instead.

Try it on your own flow #

Sketch a system design, walk through it step by step, and drop a live embed into your docs. No account needed to start.

Try it now

── more in #ai-tools 4 stories · sorted by recency
── more on @flostep 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/show-hn-live-step-th…] indexed:0 read:4min 2026-08-31 ·