Graft viz可视化指南：用交互式三标签依赖图谱看懂你的代码库架构

Graft viz可视化指南用交互式三标签依赖图谱看懂你的代码库架构【免费下载链接】GraftTurbocharge Claude Code, Cursor, Codex, Gemini every coding agent: faster, cheaper, with contextual understanding specific to your codebase.项目地址: https://gitcode.com/gh_mirrors/graft10/GraftGraft 是一款为 Claude Code、Cursor、Codex 等 AI 编码智能体提供上下文理解的开源工具其graft viz命令能将代码库依赖图谱变成交互式三标签可视化页面无需安装、无需构建、无需数据库一条命令在本地浏览器里打开代码库架构全景图。本指南带你快速上手这个功能。一、30秒启动一条命令打开代码库图谱graft viz是 Graft 的可视化入口。它在本机启动一个零依赖的轻量服务把图谱渲染成一个交互式网页npm install -g nanonets/graft # 全局安装 CLI一次性 graft build # 先生成代码符号级图谱无需 API Key graft viz # 打开浏览器交互式查看图谱常用启动参数命令作用graft viz在localhost打开交互式查看器自动拉起浏览器graft viz --port 5000 --no-open指定端口、不自动打开浏览器graft viz --export site/ --title PR #12导出为一个自包含的index.html可发到 CI 或静态托管服务实现只有约百行代码纯node:http静态服务 两个 JSON 接口 一个 SSE 实时刷新通道端口被占用时会自动向后尝试 10 个端口。相关源码src/viz/serve.ts二、三标签详解从架构到符号再到目录树打开页面后顶部有三个标签页对应同一份代码的三个观察视角标签数据源回答的问题Contextgraft/*.md概念节点graft build --deep生成系统由哪些模块构成模块间什么关系Codegraft/.graph/wiring.jsongraft build生成每个函数/类被谁调用、调用谁Outline同 Code 标签的contains层级文件 → 类 → 方法的目录树长什么样Context 标签——节点按类型着色、按连接度定大小。每个节点是一段 Markdown 文件内含大白话摘要、类型标签和类型化链接depends_on、part_of等装配逻辑见 src/viz/assemble.ts。Code 标签——tree-sitter 抽取的符号级图谱每个函数、类、方法都是一个节点边就是真实的调用与导入关系。无需模型、无需密钥graft build一次即可。Outline 标签——把contains层级渲染成可折叠树每个文件标注符号数量支持一键展开/收起全部实现见 viewer/tree.ts。三、读懂有向边琥珀色与青色以及动词词汇表这是 viz 最有价值的交互选中任意一个节点它的边会带上方向——琥珀色 它依赖的东西改它之前要知道会影响谁青色 依赖它的东西改它会波及谁每条高亮边上还会直接写出关系动词。所有边都来自一个封闭词汇表每个动词回答一个真实问题定义见 viewer/data.ts动词回答的问题part_of/contains它住在哪里uses/calls/imports/depends_on改了它什么会坏produces这个输出从哪来configures不改代码什么能改变它的行为validates谁在检查它测试、漂移检查extends/implements它必须遵守什么契约画布上方的 Chips 可按动词过滤边树状图里 tree-sitter 抽取的边是实线LLM 推断的边是虚线一眼分辨可信度。右侧详情面板展示节点摘要、来源文件、以及双向依赖列表可点击逐层跳转实现见 viewer/detail.ts。四、进阶技巧搜索、过滤与实时热重载搜索右上角输入框输入符号名实时高亮所有匹配节点按回车直接聚焦第一个匹配项类型过滤底部图例 Chips 按节点类型file、class、function…显隐缩放右下角 / − / 复位三个按钮控制视图主题右上角月亮图标切换深/浅色偏好会记住实时热重载服务监听graft/目录变化300ms 防抖磁盘上图谱一更新浏览器自动刷新——你改代码、重建图谱页面同步跟上无需手动 F5数据层通过 SSE 事件通道订阅变化viewer/data.ts五、导出单文件可视化页让 PR 评审点开就看graft viz --export把整个查看器内联进一个自包含的index.html——CSS、JS、两份图谱全部打包双击即可打开不依赖任何服务器可发布到静态托管或作为 CI 产物graft viz --export site/ --title PR #12它还有个杀手级组合技——和graft blast联动为一次 PR 生成爆炸半径交互页graft blast --base origin/main --export-viz site/导出的页面中被 diff 触及的区域是琥珀色节点受影响的依赖是蓝色节点评审人点一下节点就能看到精确到file:line的变更代码片段和该区域的 git 历史贡献者。实现见 src/viz/export.ts六、常见问题速查问题答案打开页面是空的先跑graft buildCode/Outline 标签需要 wiring 图谱Context 标签需graft build --deep能分享给别人吗用graft viz --export导出单文件 HTML 分享无需对方装任何东西需要 API Key 吗不需要。结构图谱是纯 tree-sitter 解析确定性生成数据会上传吗不会。服务只监听127.0.0.1全部在本地七、相关源码导航想深入了解实现可以按这条线读本地服务与 SSE 热重载src/viz/serve.tsContext 图谱装配与动词归一化src/viz/assemble.ts单文件导出器src/viz/export.ts标签页与交互主逻辑viewer/main.ts边语义动词 → 家族 → 样式viewer/data.ts功能总览与完整 CLI 参考README.md总结graft viz用 Context、Code、Outline 三个标签把架构是什么、符号怎么连、目录长什么样一次讲清配合有向边高亮和单文件导出从个人探索到 PR 评审都够用。跑通graft build graft viz五分钟就能看懂你代码库的全景架构 ️【免费下载链接】GraftTurbocharge Claude Code, Cursor, Codex, Gemini every coding agent: faster, cheaper, with contextual understanding specific to your codebase.项目地址: https://gitcode.com/gh_mirrors/graft10/Graft创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考