企业官网建设流程全解析

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-Anything

Understand-Anything 代码查看器（Code Viewer）是这款开源知识图谱工具的实用功能：把任意代码库变成可交互的知识图谱后，点击任意文件节点，源码面板会从屏幕底部滑出，支持语法高亮、行号定位，一键还能全屏查看整个文件。本教程面向新手，带你从零打开代码查看器到全屏阅读源码。

为什么需要代码查看器 🧭

刚接手一个 20 万行的大项目，最头疼的就是"不知道该从哪个文件读起"。Understand-Anything 的思路是：先用多智能体流水线分析整个项目，生成一份知识图谱，然后在交互式仪表盘中把每个文件、函数、类都变成可以点击的节点。

当你点击某个文件节点时，代码查看器会直接把对应源码"滑"出来，配合节点的中文/英文摘要、依赖关系，实现"先懂结构，再看细节"的阅读体验。

快速上手：先跑起来知识图谱仪表盘

代码查看器是仪表盘（Dashboard）的一部分，所以第一步是让仪表盘跑起来：

1. 在支持 Understand-Anything 的 AI 编程平台（如 Claude Code、Codex、Cursor、Copilot 等）中安装插件后，对项目执行/understand，等待分析完成，项目目录下会生成.ua/knowledge-graph.json；
2. 执行/understand-dashboard，终端会打印一个带 token 的本地地址（形如http://127.0.0.1:5173/?token=...），浏览器会自动打开仪表盘。

💡 提示：必须使用带?token=的完整地址，否则会被访问令牌拦截。整个仪表盘数据只从本地磁盘读取，不会上传任何代码。

三种方式打开源码查看器

打开仪表盘后，有 3 个入口都能调出代码查看器：

方式一：点击图谱中的文件节点（最常用）

1. 在图谱区找到目标文件节点（也可以先用搜索栏模糊搜索定位）；
2. 点击该节点，右侧边栏会显示节点摘要、所属层级和文件信息；
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）：

• 滑出面板：源码区域从底部平滑滑入，上方仍可看到完整图谱，随时可点图谱继续导航；
• 全屏模式：点击滑出面板右上角的"展开"箭头图标，源码会放大为居中模态窗口（最大 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/MB）；
• Markdown 双视图：查看.md文档时，默认展示渲染后的排版，可点击顶部的「渲染 / 源码」切换回原始 Markdown，方便核对格式。

常见问题 FAQ

Q1：为什么提示"源码不可用"？代码预览需要本地仪表盘服务在运行（它从本地磁盘读取源文件）。如果你用的是线上演示图（demo 模式），是没有源码数据的，需要在本机执行/understand-dashboard后再点击节点。

Q2：图谱里看不到对应节点怎么办？确认项目目录下已存在.ua/knowledge-graph.json（旧项目为.understand-anything/），即先成功执行过/understand分析。

Q3：图谱数据过期了？仪表盘顶部会显示新鲜度提示条，重新执行一次/understand（增量更新，只重分析改动过的文件）即可。

小结

Understand-Anything 代码查看器把"点节点 → 滑出源码 → 全屏精读"做成了三步之内完成的事：

1. /understand-dashboard启动仪表盘；
2. 点击文件节点或双击文件树中的文件，源码面板滑出；
3. 点右上角箭头进入全屏，结合行号高亮快速定位目标代码。

配合知识图谱的全局视角，新人读代码、老手做 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