Code Flow Graph

---

name: code_flow_graph description: > This skill generates interactive HTML node-graph diagrams to visualize codebase structure, class relationships, and function call chains. It should be used when the user asks to visualize, diagram, or map out code architecture, module dependencies, class hierarchies, or UI event flows. It also supports UI layout visualization — generating interactive nested widget hierarchy diagrams for Qt, React, or other UI frameworks (triggered by "UI layout", "widget hierarchy", "界面布局", "控件层级" keywords). The output is a standalone HTML+JS viewer with draggable nodes, bezier-curve connections, group boxes, sidebar navigation, global search (Ctrl+K), call-chain detail panel, localStorage position persistence, click-to-copy function name, Ctrl+Z undo layout moves, interactive widget-box tree with resize handles, and Catppuccin Mocha dark theme.

---

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