Open Source Apache 2.0

Animated flow diagrams,
generated by AI

Describe your architecture to an AI agent. Get back a fully animated, interactive flow diagram. No manual drawing — just prompt and share.

Get Started in 2 Minutes

No install. No dependencies. Just a prompt and your architecture docs.

Quick Start Guide

GitHub ▶ Live Demo

Meanwhile, at every engineering team...

🤓

Hey, I need to visualize our auth flow for the design review. Know any good drag-and-drop diagram tools?

👩‍💻

It's 2026. You have an AI agent that already knows your codebase. Just describe what you want.

🤓

But I need it animated, step-by-step, with request/response details...

👩‍💻

Paste your architecture docs + one prompt into any AI coding tool. You'll get a fully animated flow diagram in minutes. Then iterate with screenshots.

🤓

Wait... no Figma? No draw.io? No manually dragging boxes around?

👩‍💻

That's the old way. The AI reads your docs, understands the architecture, and generates the diagram. You just tell it what to fix. Welcome to FlowStory.

Why FlowStory

No existing tool combines AI-agent generation with animated narrative flows

🤖

AI-Agent First

Designed for AI coding tools — Claude Code, ChatGPT, Copilot, Cursor, and more. One prompt in, working diagram out.

▶

Animated Storytelling

Step-by-step narrative flows that tell a story. Animated packets travel between nodes. Inspector panel shows request/response mutations at each step.

📄

Declarative JSON

Define nodes, flows, tooltips, and inspector mutations in a single JSON object. The engine handles canvas rendering, playback controls, and theming.

📷

Screenshot Feedback Loop

Generate, screenshot, paste back into your AI tool, describe adjustments. The iterative loop converges fast — usually 3-5 rounds for a polished diagram.

🌐

Zero Install, Zero Dependencies

Generates a single self-contained HTML file. Open in any browser. Share via email, host on GitHub Pages, or drop in a docs folder.

🌙

Dark & Light Themes

Built-in theme toggle. Dark mode by default with a full light mode. All colors adapt automatically via CSS custom properties.

How It Works

Open Your AI Coding Tool

Claude Code, ChatGPT, Copilot, Cursor — any tool that can read URLs and write files.

Paste the Prompt

Copy the quick-start prompt and add your architecture links + description.

AI Generates `flow.html`

A single self-contained HTML file with your animated architecture diagram. Nodes, flows, tooltips, inspector panel — all embedded.

Iterate with Screenshots

Open in browser, screenshot, paste back into your AI tool, describe changes. 3-5 rounds gets you a polished result.

Email the HTML file, host on GitHub Pages, or embed in documentation. Works everywhere.

Animated flow diagrams,generated by AI