用途:将代码库结构、类/模块/函数关系以及函数调用链可视化为交互式 HTML 节点图,帮助理解代码架构与执行流程。
主要能力:生成两个文件——渲染引擎 code_flow_graph.html 与数据文件 code_flow_graph_data.js,二者须位于同一目录。引擎内置搜索(Ctrl+K 模糊匹配并跨图跳转)、折叠子项连接重定向、点击空白取消高亮、图例与节点类型徽章、签名悬浮提示、调用链详情面板、字段详情面板、节点位置持久化(localStorage)、点击复制函数名、Ctrl+Z 撤销布局移动等。
使用方式:先分析项目顶层结构与入口点,判断是否为 UI 项目,识别主要模块与入口函数,并按重要性过滤函数(高扇出、高扇入、含分支或状态变更者保留)。输出默认放在 <project>/docs/code_graph/。HTML 模板位于技能目录的 example/code_flow_graph.html,需用绝对路径读取并原样复制,不可修改。先交付模块级总览图,再通过询问提供调用链、UI 信号/事件、UI 布局、数据结构等深度分析选项,按选择增量追加到数据文件。生成数据默认使用中文。
适用场景:需要理解类/模块/函数关系、梳理调用链、查看 UI 事件流(按钮点击→处理器→业务逻辑)或对代码进行“图示/可视化/映射”时。
限制:UI 事件流与界面布局分析仅适用于含 UI 层的项目;HTML 模板不在用户项目中,需从技能安装目录定位;深度分析为增量追加,不应重新生成已有图。具体收费、价格与平台信息暂未提供。