skills.rest
thisguymartin
thisguymartinCOMMUNITY
Explore all skills by this author →
Website𝕏@thisguymartinGitHub

generate-flow

Generate Mermaid diagrams from source code for UI flows, data pipelines, and architecture.

Updated Aug 23, 2026
Search Tags:#architecture#mermaid#visualization#data-flow#flow-diagram#ui-flow#api-flow
One-click install
npx skills add https://github.com/thisguymartin/ai-native-dev --skill generate-flow
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: generate-flow
Source: https://github.com/thisguymartin/ai-native-dev/tree/main/.gemini/skills/generate-flow
Command: npx skills add https://github.com/thisguymartin/ai-native-dev --skill generate-flow

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about generate-flow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate Mermaid diagrams from source code?▼

To generate Mermaid diagrams from source code, apply the Skill to specific files, modules, or features so it can trace execution paths and produce accurate visual representations of UI flows, data pipelines, and system architecture.

Can I visualize UI flows and API interactions directly from my codebase?▼

Yes, you can visualize UI flows and API interactions directly from your codebase. The Skill reads actual source files to trace execution paths, ensuring generated diagrams reflect real code behavior rather than assumptions.

What types of flow diagrams can I create for system architecture documentation?▼

For system architecture documentation, you can create multiple flow diagram types including data flows, API sequence diagrams, state machines, auth flows, error flows, and ER diagrams using Mermaid syntax.

How do I document decision nodes and error paths in a data flow diagram?▼

To document decision nodes and error paths in a data flow diagram, the Skill automatically annotates generated Mermaid syntax with entry and exit points, data shapes, labeled connections, and highlighted error routes.

Does this require any external diagramming dependencies to work?▼

No external diagramming dependencies are required. The Skill operates independently to read your source files and output structured Mermaid syntax diagrams, which can optionally be saved as markdown files to a .flows/ directory.

What is the best way to create onboarding diagrams for complex software architecture?▼

The best way to create onboarding diagrams for complex software architecture is to generate code-driven Mermaid diagrams that trace actual execution paths, label connections, and annotate walkthroughs, saving the output to a .flows/ directory for new engineers.

Related Skills

Explore More Software Engineering Skills→
xtrm-devxtrm-dev
4

gitnexus-exploring

Map codebase architecture and trace execution flows in unfamiliar repositories.

Official
Intermediate
patricio0312revpatricio0312rev
5

mermaid-diagram-generator

Generate Mermaid diagrams for flows, sequences, ERDs, and architecture in Markdown.

Community
Intermediate
rakhnianskii9rakhnianskii9

octocode-code-forensics

Trace symbol definitions and usages to map execution paths across a codebase.

Community
Advanced
diegocanepadiegocanepa

mermaid-diagrams

Generate flowcharts, sequence diagrams, and class diagrams from Mermaid syntax.

Community
Basic