Flostep turns a system design diagram into something people can actually follow. Drag components ā frontend, service, database, cache, queue: connect them in the order interactions happen, label each step, then click Next to walk through it one hop at a time. Share it as a public link or embed it in your docs with one iframe; anyone can step through it without an account. No signup needed to try. And via MCP, AI assistant tool can build the whole thing straight from your codebase.
Hey Product Hunt š Every system design doc I've ever opened has the same problem: a static box-and-arrow picture, and no way to tell what happens first. The person who drew it knows the order. Nobody else does.
Flostep fixes that by making the order the point. You drag components ā frontend, service, database, cache, queue, external API, connect them in the sequence the interactions actually happen, label each one ("POST /login", "cache miss", "returns JWT"), and then hit Next to walk through it one hop at a time. The active step lights up, everything else fades.
A few things I'd love feedback on: āø Share links are free. One click gives you a public read-only URL, and anyone can step through it without an account. Embeds too ā one iframe into Notion, Confluence, or your docs. The demo on the homepage is a real shared diagram, not a screenshot. āø Code ā diagram. Paste `A -> B: action` lines and the canvas builds itself. Export it back out the same way. āø Your AI assistant can draw it. Flostep is an MCP server, so Claude, Cursor, VS Code and Windsurf can create, read, edit and share your diagrams. "Make a Flostep diagram of how password reset works here, and give me a share link" ā it reads the codebase it's already looking at. āø Teams get attribution ā who created a diagram, who last edited it, and comments.
Hey Product Hunt š
Every system design doc I've ever opened has the same problem: a static box-and-arrow picture, and no way to tell what happens first. The person who drew it knows the order. Nobody else does.
Flostep fixes that by making the order the point. You drag components ā frontend, service, database, cache, queue, external API, connect them in the sequence the interactions actually happen, label each one ("POST /login", "cache miss", "returns JWT"), and then hit Next to walk through it one hop at a time. The active step lights up, everything else fades.
A few things I'd love feedback on:
āø Share links are free. One click gives you a public read-only URL, and anyone can step through it without an account. Embeds too ā one iframe into Notion, Confluence, or your docs. The demo on the homepage is a real shared diagram, not a screenshot.
āø Code ā diagram. Paste `A -> B: action` lines and the canvas builds itself. Export it back out the same way.
āø Your AI assistant can draw it. Flostep is an MCP server, so Claude, Cursor, VS Code and Windsurf can create, read, edit and share your diagrams. "Make a Flostep diagram of how password reset works here, and give me a share link" ā it reads the codebase it's already looking at.
āø Teams get attribution ā who created a diagram, who last edited it, and comments.