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.