Understand-Anything代码查看器使用教程点击文件节点滑出源码、全屏查看【免费下载链接】Understand-AnythingGraphs that teach graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about. Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, and more.项目地址: https://gitcode.com/GitHub_Trending/un/Understand-AnythingUnderstand-Anything 代码查看器Code Viewer是这款开源知识图谱工具的实用功能把任意代码库变成可交互的知识图谱后点击任意文件节点源码面板会从屏幕底部滑出支持语法高亮、行号定位一键还能全屏查看整个文件。本教程面向新手带你从零打开代码查看器到全屏阅读源码。为什么需要代码查看器 刚接手一个 20 万行的大项目最头疼的就是不知道该从哪个文件读起。Understand-Anything 的思路是先用多智能体流水线分析整个项目生成一份知识图谱然后在交互式仪表盘中把每个文件、函数、类都变成可以点击的节点。当你点击某个文件节点时代码查看器会直接把对应源码滑出来配合节点的中文/英文摘要、依赖关系实现先懂结构再看细节的阅读体验。快速上手先跑起来知识图谱仪表盘代码查看器是仪表盘Dashboard的一部分所以第一步是让仪表盘跑起来在支持 Understand-Anything 的 AI 编程平台如 Claude Code、Codex、Cursor、Copilot 等中安装插件后对项目执行/understand等待分析完成项目目录下会生成.ua/knowledge-graph.json执行/understand-dashboard终端会打印一个带 token 的本地地址形如http://127.0.0.1:5173/?token...浏览器会自动打开仪表盘。 提示必须使用带?token的完整地址否则会被访问令牌拦截。整个仪表盘数据只从本地磁盘读取不会上传任何代码。三种方式打开源码查看器打开仪表盘后有 3 个入口都能调出代码查看器方式一点击图谱中的文件节点最常用在图谱区找到目标文件节点也可以先用搜索栏模糊搜索定位点击该节点右侧边栏会显示节点摘要、所属层级和文件信息在文件信息卡片中点击「打开代码」按钮源码面板立刻从底部滑出。相关实现可查看节点信息组件 understand-anything-plugin/packages/dashboard/src/components/NodeInfo.tsx其中openCodeViewer就是滑出面板的触发点。方式二在文件树中双击文件侧边栏的 Files文件标签页按目录树列出全部源码文件双击任意文件即可同时跳转到图谱对应节点并打开代码查看器适合我知道文件名、但不关心它在图谱哪里的场景。逻辑见 understand-anything-plugin/packages/dashboard/src/components/FileExplorer.tsx。方式三搜索后直达顶部搜索栏支持模糊搜索与语义搜索输入文件名或哪部分处理了登录这类描述选中结果节点后再用方式一打开源码即可。滑出面板与全屏查看两种形态代码查看器有两种展示形态状态由全局 store 的codeViewerExpanded字段控制见 understand-anything-plugin/packages/dashboard/src/store.ts形态触发方式适合场景 底部滑出面板占 40% 高度打开源码时默认进入边看图谱边瞄一眼代码️ 全屏模态窗口点击面板右上角的展开图标精读长文件、对照行号滑出面板源码区域从底部平滑滑入上方仍可看到完整图谱随时可点图谱继续导航全屏模式点击滑出面板右上角的展开箭头图标源码会放大为居中模态窗口最大 1120×820字号也相应加大点击窗口外的遮罩层或右上角 × 即可返回滑出模式再点一次 × 完全关闭。布局代码可参考 understand-anything-plugin/packages/dashboard/src/App.tsx 中Code viewer slide-up overlay与Expanded code viewer modal两段。查看源码时的小细节 ✨语法高亮 行号代码按语言TypeScript、Python、Go、Rust 等十余种着色左侧带行号方便对照讨论行号区间高亮如果节点对应的是某个函数/类带行号范围该区间会以高亮背景标出并在顶部显示行 120-156让你一眼看到该函数在整文件中的位置文件元信息面板底部一行会显示总行数和文件大小B/KB/MBMarkdown 双视图查看.md文档时默认展示渲染后的排版可点击顶部的「渲染 / 源码」切换回原始 Markdown方便核对格式。常见问题 FAQQ1为什么提示源码不可用代码预览需要本地仪表盘服务在运行它从本地磁盘读取源文件。如果你用的是线上演示图demo 模式是没有源码数据的需要在本机执行/understand-dashboard后再点击节点。Q2图谱里看不到对应节点怎么办确认项目目录下已存在.ua/knowledge-graph.json旧项目为.understand-anything/即先成功执行过/understand分析。Q3图谱数据过期了仪表盘顶部会显示新鲜度提示条重新执行一次/understand增量更新只重分析改动过的文件即可。小结Understand-Anything 代码查看器把点节点 → 滑出源码 → 全屏精读做成了三步之内完成的事/understand-dashboard启动仪表盘点击文件节点或双击文件树中的文件源码面板滑出点右上角箭头进入全屏结合行号高亮快速定位目标代码。配合知识图谱的全局视角新人读代码、老手做 Review 都能少绕很多弯路 【免费下载链接】Understand-AnythingGraphs that teach graphs that impress. Turn any code into an interactive knowledge graph you can explore, search, and ask questions about. Works with Claude Code, Codex, Cursor, Copilot, Gemini CLI, and more.项目地址: https://gitcode.com/GitHub_Trending/un/Understand-Anything创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考