GitHub Schema Docs

Quick Start

Generate an animated flow diagram in 2 minutes. No install needed.

1 Open Claude Code

Use the CLI (claude), desktop app, IDE extension, or claude.ai/code. Start a new session.

2 Paste This Prompt

Copy the prompt below, replace the placeholders with your links and description, and paste into Claude Code.

Read this guide: https://raw.githubusercontent.com/noyitz/flowstory/main/CLAUDE.md Then read this template: https://raw.githubusercontent.com/noyitz/flowstory/main/examples/ai-gateway/index.html Generate a SINGLE self-contained HTML file at ./flow.html that: - Loads CSS from: https://noyitz.github.io/flowstory/templates/style.css - Loads FlowStory from: https://noyitz.github.io/flowstory/src/index.js - Embeds the diagram JSON inline in the script (NOT as a separate file) - Auto-plays in loop mode on page load - Uses viz.load(diagram) to load the inline JSON object Here are the resources to learn the architecture from: RESOURCES: - <PASTE YOUR LINKS HERE> DESCRIPTION: <DESCRIBE THE FLOW YOU WANT> After generating, open the file in a browser to test it.

3 Fill In Your Details

Replace the placeholders with your actual repos, docs, and a description of what you want to visualize.

Example: RESOURCES: - https://github.com/my-org/my-project/blob/main/docs/architecture.md - https://github.com/my-org/my-project/blob/main/docs/diagrams/auth-flow.mmd DESCRIPTION: Show the user authentication flow: browser -> API Gateway -> OAuth provider -> token exchange -> session created -> redirect to dashboard. Include an error case for expired tokens (401 -> redirect to login).

4 Iterate with Screenshots

After the first generation, use the screenshot feedback loop to refine:

📷
Open flow.html in your browser. Take a screenshot. Paste it back into Claude. Say what to change: "move the auth box down", "arrow 3 overlaps arrow 5", "add an error flow". Usually 3-5 rounds gets you a polished result.

5 Share

The generated HTML is fully self-contained. Share it however you want: