skills.rest
wrode
wrodeCOMMUNITY
Explore all skills by this author →
GitHub

flow-diagram

Generate interactive HTML diagrams tracing data flow through codebases.

1|Updated Mar 7, 2026
Search Tags:#debugging#data flow#mermaid#diagramming#source code analysis#code visualization
One-click install
npx skills add https://github.com/wrode/flow-diagram --skill flow-diagram
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flow-diagram
Source: https://github.com/wrode/flow-diagram/tree/main
Command: npx skills add https://github.com/wrode/flow-diagram --skill flow-diagram

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps developers understand complex codebases by automatically generating interactive diagrams that visualize data flow and execution paths.

Core Features & Use Cases

  • Code Flow Tracing: Traces data flow through source code, from entry points to external services.
  • Interactive Diagrams: Produces HTML diagrams with clickable nodes, detail panels, and Mermaid visualizations.
  • Use Case: Debugging a complex API endpoint by visualizing how requests flow through different services and database calls.

Quick Start

Use the flow-diagram skill to trace the data flow starting from the file src/api/handler.ts.

Frequently Asked Questions about flow-diagram

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

FAQPage Schema
How do I visualize data flow through a codebase?▼

To visualize data flow, this skill traces execution paths from entry points and generates interactive HTML diagrams with clickable nodes and Mermaid visualizations. It identifies function calls, API routes, and database interactions to map the complete flow.

Can I generate Mermaid diagrams directly from my source code?▼

Yes, you can generate Mermaid diagrams by specifying a source code entry point. The skill analyzes the codebase and produces interactive HTML diagrams that include Mermaid visualizations of the execution paths.

What is the best way to trace API routes and database interactions for debugging?▼

Tracing API routes and database interactions is best done by visualizing the execution path from a specific entry point. This skill automatically identifies these interactions and maps them into an interactive diagram with detailed node metadata.

How do I trace an execution path starting from a specific file?▼

You can trace an execution path by asking the skill to analyze the data flow starting from a specific file, such as `src/api/handler.ts`. It will follow the function calls and external service interactions from that point forward.

Does the generated code visualization include source code snippets and line numbers?▼

Yes, the code visualization includes detailed node metadata with file paths, line numbers, data shapes, and code snippets. This provides an interactive experience allowing you to inspect the exact source code within the diagram.

Can I use natural language to describe the execution path I want to diagram?▼

Yes, you can use natural language descriptions to specify the execution path you want to trace. The skill interprets the description to identify the relevant function calls and generate the corresponding interactive HTML diagram.

Related Skills

Explore More Software Engineering Skills→
yocxy2yocxy2

diagram

Converts natural language or mermaid source code into editable .excalidraw files.

Community
Intermediate
rm2thaddeusrm2thaddeus
4

flowchart-creator

Generate interactive HTML flowcharts with customizable nodes and decision trees.

Community
Intermediate
IoncradeIoncrade

contextmap

Builds and queries knowledge graphs from source code using Python libraries.

Community
Advanced
RepairYourTechRepairYourTech
6

react-flow

Create interactive node-based graph visualizations with React Flow.

Community
Intermediate