Flostep – Step through your systems
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 No account needed to try · Build, share, then save
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.