Code Flow Graph

Code Flow Graph

Generate interactive node-graph HTML diagrams that visualize code structure and call relationships.

When to Use

• User requests code structure visualization, architecture diagrams, or call-chain mapping
• User wants to understand how classes/modules/functions relate to each other
• User wants to see UI event flows (button click → handler → business logic) — UI projects only
• User asks to "diagram", "visualize", "map out", or "graph" the code

Architecture

The output consists of two files placed in a dedicated folder:

1. code_flow_graph.html — rendering engine (from this skill's example/code_flow_graph.html template)
2. code_flow_graph_data.js — diagram data (generated per-project)

The HTML loads the JS via <script src="code_flow_graph_data.js"> and must be in the same directory.

Important: The HTML template lives in this skill's repository, not in the user's project. See Step 3 for the correct procedure to locate and copy it.

Workflow

Core principle: Start fast, go deep on demand. Immediately generate an Overview diagram upon receiving a request — no upfront questions about scope or language. Offer deeper analysis options after the Overview is delivered.

Step 1: Analyze Project & Determine Scope

Begin analysis immediately upon receiving the user's request. Do NOT ask any scoping or language questions.

Scope Rules

• If the user's request explicitly names a module or directory (e.g., "分析 core 模块", "visualize the auth/ package"), restrict analysis to that scope only.
• Otherwise, analyze the entire project.

Analysis Procedure

1. Read the project's top-level structure: README, entry scripts (__main__.py, main.py, index.ts, app.py), config files (setup.py, pyproject.toml, package.json, Cargo.toml), and directory layout
2. Determine whether the project has a UI layer (Qt, React, Web, etc.) or is non-UI (CLI, library, backend, pipeline, etc.)
3. Identify all major modules/packages and their purposes within the determined scope