# Flostep > Flostep is an interactive system design diagram tool that lets you sketch flows, walk through each interaction step by step, and share them as embeddable links anyone can explore. 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 `