Diagrams people can actually walk through

Sketch how something works — a system, a process, a customer journey — then present it one step at a time, and share it as a link anyone can walk through themselves.

No account needed · Walk through flows on your phone, build them on a desktop

A live diagram, not a screenshot — scroll down and step through it yourself. Every shared diagram embeds like this, one iframe, any site.

How it works

From blank canvas to a fully walkable flow in minutes.

🖱️
STEP 1

Drag & drop components

Pick from Frontend, Service, Database, Cache, Queue, External API — or create a custom component. Place them on the canvas.

🔗
STEP 2

Connect & label interactions

Draw arrows between components in the order they happen. Label each one — "POST /login", "returns JWT", "cache miss". Multiple interactions between the same pair are fine.

▶️
STEP 3

Walk through it

Hit Next to step through each interaction one at a time. The active step lights up, the rest fades. Perfect for design reviews, onboarding, and interviews.

Everything you need

No fuss. No bloat. Just the tools that matter for system design.

📝

Code-to-diagram import

Paste plain A -> B: action lines and the canvas builds itself.

💬

Comments on shared links

Send a link and collect the feedback in one place. Reviewers comment by name without needing an account, so an async design review doesn't have to become a meeting.

🔗

Shareable links

One click to generate a public read-only link. Anyone can step through your flow without needing an account.

🖼️

Embed anywhere

Drop a single <iframe> into Notion, Confluence, your blog — the full interactive walkthrough lives there.

📋

Notes

A dedicated notes panel for trade-offs, open questions, and findings — saved alongside the diagram so context never gets lost.

☁️

Always saved

Every change auto-saves to the cloud. Pick up exactly where you left off from any device, no manual saving required.

🔌 Works with MCP

Let your AI assistant draw it

Flostep speaks the Model Context Protocol, so Claude, Cursor, VS Code and Windsurf can build diagrams for you — from a description, or straight from the codebase they're already looking at.

Connect once
claude mcp add --transport http \
  flostep https://flostep.dev/mcp \
  --header "Authorization: Bearer fls_…"

One command for Claude Code, or a few lines of JSON for any other MCP client.

Then just ask

“Make a Flostep diagram of how password reset works here, and give me a share link.”

“Add a retry step between the queue and the worker.”

It reads your existing diagrams too, so edits land on the real thing — not a guess at it.

Built for the moments that matter

🎙️

System design interviews

Walk an interviewer through your design component by component instead of pointing at a static blob.

🔄

Explaining how a process works

A refund, an escalation, an approval chain — show who does what, in order, instead of writing it out as a wall of numbered steps.

🧑‍🏫

Onboarding someone new

Embed a live walkthrough in your handbook or onboarding docs, and let people step through it at their own pace.

🔍

Async design reviews

Share a link, let teammates leave comments on specific steps, and iterate without scheduling another meeting.

Frequently asked questions

Everything you need to know before your first flow.

Do I need an account to try Flostep?

No. Hit “Try it now” and start building immediately — your diagram lives in your browser. Create a free account when you want to save it permanently and get a stable share link.

What can I actually build?

System design flows — drag Frontend, Service, Database, Cache, Queue, and External API components (or custom ones), connect them in the order interactions happen, label each step, then walk through it one hop at a time.

How does sharing work?

One click generates a public, read-only link. Anyone can step through your flow interactively — no account needed. You can also embed the full walkthrough in Notion, Confluence, or your docs with a single iframe.

Can I import an existing diagram?

Yes. Paste plain A -> B: action lines into the Code view and the canvas builds itself.

Can Claude or Cursor build diagrams for me?

Yes. Flostep is an MCP server, so any assistant that speaks the Model Context Protocol — Claude, Cursor, VS Code, Windsurf — can create, read, edit, and share your diagrams. Create an API key, connect it once, then ask in plain language. See the MCP guide.

Does it work on my phone?

You can open, pan, zoom and step through any diagram or shared link on a phone — that's the part people are usually sent. Building and editing need a desktop, where there's room for the canvas and the component palette.

How much does it cost?

There's a genuinely free plan, and a Pro plan for unlimited diagrams and more. See the pricing page for the full breakdown.

Ready to think in steps?

Free to start. No credit card. Build your first flow in under two minutes.

Create a free account