generate-flow

What problem does it solve?

This Skill turns source code and feature descriptions into clear visual diagrams so engineers and designers can quickly understand UI journeys, data movement, API sequences, state transitions, and system architecture without reading large codebases line-by-line.

Core Features & Use Cases

• Multiple Flow Types: Generates UI flows, data flows, API sequence diagrams, state machines, architecture diagrams, auth flows, error flows, and ER diagrams using Mermaid syntax.
• Code-driven Accuracy: Emphasizes reading actual source files and tracing execution paths to ensure diagrams reflect real code behavior rather than assumptions.
• Templates & Constraints: Provides reusable templates, enforces a mandatory clarification protocol, annotates diagrams with walkthroughs, labels connections, and highlights decision/error paths.
• Output & Integration: Renders diagrams inline or saves structured markdown files to a .flows/ directory for documentation, design reviews, or onboarding.

Quick Start

Generate a detailed UI Flow diagram for the login feature located in src/auth and display the Mermaid diagram inline.