Flostep

Sketch, walk through, and share system design flows. Drag components, connect them, and present each interaction step by step — no account needed to try.

How it works:

From blank canvas to a fully walkable flow in minutes.

1. Drag & drop components: Pick from Frontend, Service, Database, Cache, Queue, External API — or create a custom component. Place them on the canvas.
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.
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.

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.