Flostep – Step through your systems

⚡ Diagrams people can actually walk through The fastest way to sketch, walk through, and share a system design flow — drag components, connect them, and present each interaction step by step. No account needed to try · Build, share, then save See a real one This is a live Flostep diagram, not a screenshot. Hit ▶ Start and walk through it yourself. Every shared diagram embeds like this — one iframe, any site. Build your own → 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. 🏗 Architecture spikes Map out a new feature before writing code. Catch missing edge cases before they become bugs. 🧑🏫 Onboarding new engineers Embed a live walkthrough of your auth flow or checkout pipeline directly in your onboarding docs. 🔍 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. 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