Which frameworks are supported by this skill?

It specifically prioritizes JavaScript/TypeScript (Express, Next.js, React) and Python (Django, Flask, FastAPI) but can perform generic parsing for most other common web patterns.

How does the Code Flow Report analyze my code?

It uses static analysis to scan your repository's entry points, identifying routes, controllers, and service layers to map how data moves through your application logic.

Can I adjust the level of detail in the diagrams?

Yes, you can specify granularity levels, allowing you to switch between high-level architectural overviews and detailed views that include helper functions and specific call edges.

Do I need a server to view the generated report?

No, the skill generates a standalone static HTML directory that can be opened in any modern browser or hosted as a simple static site.

Code Flow Visualizer & Reporter

Name: Code Flow Visualizer & Reporter
Author: window-ook

bywindow-ook

0•

Learning & Documentation

Analyzes web application source code to generate interactive, flow-based visual reports of runtime logic from routes to databases.

The Code Flow Report skill acts as an automated architect that maps out the intricate connections within a web application's codebase. By performing static analysis on entry points, routes, controllers, and services, it creates a navigable HTML dashboard featuring interactive diagrams and plain-language summaries. This tool is essential for onboarding new developers, performing architectural audits, or documenting complex logic flows in JavaScript, TypeScript, and Python projects without the need for manual diagramming.

Key Features

01Simplified architecture summaries for non-technical stakeholders

02Multi-framework support including Express, Next.js, Django, and FastAPI

03Automated route-to-database mapping (Routes → Controllers → Services → DB)

040 GitHub stars

05Context-aware code previews and documentation extraction

06Interactive HTML report generation with zoomable flow diagrams

Use Cases

01Identifying hidden dependencies and potential bottlenecks in data flow

02Generating architectural documentation for code reviews or system audits

03Rapidly onboarding new developers to a complex, unfamiliar codebase

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add window-ook/claude-code-lab code-flow-report

For use in Claude.ai and ChatGPT

Download Skill