Flostep

Flostep is a web-based diagramming tool built specifically for system design flows, letting engineers sketch architecture, present each interaction one step at a time, and share the result as a public link or embeddable iframe. It requires no account to try — diagrams live in the browser until you choose to save them. The tool is built and operated by Flostep, reachable at support@flostep.dev.

What It Is

Flostep sits in the interactive diagram category, but with a specific focus: walkable system design flows rather than general-purpose diagramming. You place components (Frontend, Service, Database, Cache, Queue, External API, or custom), draw labeled arrows in the order interactions happen, and then step through the result one hop at a time. The active step highlights while the rest fades, making it useful for design reviews, onboarding docs, and technical interviews where a static image falls short.

How the Step-Through Workflow Works

The core loop is three stages:

• Drag & drop — pick from built-in component types or create custom ones and place them on a canvas
• Connect & label — draw arrows in interaction order and label each one (e.g., "POST /login", "returns JWT", "cache miss"); multiple interactions between the same pair are supported
• Walk through — hit Next to advance one step at a time; the active interaction lights up while the rest fades

Every shared diagram is a live interactive embed, not a screenshot. Viewers can pan, zoom, and step through the flow on any device without an account.

MCP Integration for AI Assistants

Flostep implements the Model Context Protocol (MCP), making it accessible to AI coding assistants. Claude, Cursor, VS Code, and Windsurf can create, read, edit, and share Flostep diagrams through a single connection. The setup is one command for Claude Code or a few lines of JSON for other MCP clients. Once connected, a prompt like "Make a Flostep diagram of how password reset works here, and give me a share link" produces a real diagram — and because the assistant can also read existing diagrams, edits land on the actual file rather than a regenerated guess.

Sharing, Embedding, and Collaboration

• Shareable links — one click generates a public read-only link; no account needed to view or step through
• Embed anywhere — a single <iframe> drops the full interactive walkthrough into Notion, Confluence, a blog, or any docs site
• Comments on shared links — reviewers leave feedback by name without needing an account, keeping async design reviews out of calendar invites
• Code-to-diagram import — paste plain A -> B: action lines and the canvas builds itself
• Notes panel — trade-offs, open questions, and findings saved alongside the diagram so context stays with the design

Target Audience and Use Cases

Flostep is aimed at software engineers and engineering teams who regularly communicate system designs. The homepage calls out four specific moments: system design interviews (walking an interviewer through a design component by component), architecture spikes (mapping a feature before writing code), onboarding new engineers (embedding live walkthroughs in docs), and async design reviews (sharing a link for step-level comments). The tool is mobile-friendly for viewing and stepping through flows, while building and editing require a desktop.

Platform and Deployment

Flostep is a cloud-hosted web application with auto-save — every change saves automatically and diagrams are accessible from any device. The MCP server endpoint is hosted at flostep.dev/mcp, requiring an API key for AI assistant connections. Payment processing is handled via Razorpay, with billing in Indian Rupees (INR) on a monthly cycle, accepting UPI AutoPay, net banking, and major credit/debit cards.