Understand-Anything viewer包深度解析：不用LLM、不用API Key如何本地渲染仪表盘

Understand-Anything viewer包深度解析不用LLM、不用API Key如何本地渲染仪表盘【免费下载链接】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 是一款把代码仓库变成交互式知识图谱的工具扫描、建模、讲解三步走完就能得到一张可以探索、搜索、提问的代码地图。而其中的viewer 包是整条链路里最轻的一环——它不调用任何 LLM、不需要 API Key、不依赖 Claude Code只用一个 Node.js 进程 18就能把已经生成好的knowledge-graph.json渲染成完整的交互式仪表盘且数据全程只在你本机流转。 viewer 是什么一个零依赖的知识图谱查看器viewer 包的定位写在 README.md 里Standalone read-only viewer— 独立的只读查看器。它的输入只有一个项目数据目录.ua/或旧版.understand-anything/中的knowledge-graph.json。这个文件是/understand命令由 LLM Tree-sitter 协同生成的产物本质上就是一份纯 JSON 数据。也就是说昂贵的部分LLM 分析只做一次由团队成员中的某个人完成并随仓库提交查看部分viewer零成本任何同事拉下代码后一条命令即可打开完整仪表盘。这就是不用 LLM、不用 API Key的本质——viewer 只是读取和展示已存在的图谱而不是实时生成。 三步本地渲染仪表盘第 1 步确认图谱存在。被查看的项目目录下需要有.ua/knowledge-graph.json旧项目是.understand-anything/knowledge-graph.jsonviewer 会自动回退兼容。第 2 步用 npx 运行发布版 tarball。每个 Release 都附带一个自包含的understand-anything-viewer.tgz不经过 npm 仓库直接运行即可命令形如npx 发布版的 understand-anything-viewer.tgz 地址 /path/to/analyzed/project参数支持--port n默认 5173被占用时自动 1 递增、--no-open不自动打开浏览器。第 3 步打开终端打印的带令牌 URL。形如http://127.0.0.1:5173/?token…浏览器会自动打开完整仪表盘。打开后你能得到完整的仪表盘体验分层架构视图、语义搜索、节点信息侧栏、引导之旅Guided Tour、主题切换与国际化全部由 dashboard 包 的 React 前端驱动React Flow Zustand TailwindCSS。 自包含打包build 时把整个前端冻进 tarballviewer 之所以能做到零依赖、免安装秘密在 build.mjs构建core包分析引擎的浏览器安全子集构建dashboard前端Vite 产物把编译好的dist/整体拷贝进 viewer 包连同core/dist/staleness.js一起嵌入。最终npm pack出的 tarball 里已经包含了整个前端静态文件运行时不需要安装任何依赖package.json中 dependencies 为空只声明engines: node 18。CLAUDE.md 也提醒维护者每次 dashboard UI 或开发服务器中间件变更后都要重新打包并上传同名 tarball保证releases/latest链接始终可用。 安全设计本地不等于随便看虽然只绑在127.0.0.1viewer 并没有因此躺平。它的数据服务中间件逻辑上镜像自 vite.config.ts内置了多层防线防线机制一次性令牌启动时crypto.randomBytes(16)生成随机 token所有数据端点图谱、新鲜度报告、文件内容必须携带?token否则 403路径脱敏下发图谱前把节点里的绝对路径改写为相对路径避免泄漏你的主目录结构文件白名单/file-content.json只允许返回出现在图谱节点中的文件且拒绝路径穿越../返回 400静态文件越界拦截对dist/之外的静态资源请求一律 403/404新鲜度报告防缓存staleness.json强制Cache-Control: no-store对比图谱记录的 git commit 与当前 HEAD判断图谱是否过期前端侧 App.tsx 拿到 URL 中的 token 后会存入 sessionStorage 并清理地址栏没有 token 时显示TokenGate页面引导用户手动输入而不是直接放行。这些行为都有端到端测试兜底test_viewer.test.mjs 会真实启动 viewer 进程逐条验证令牌拦截、路径脱敏、白名单放行、穿越拒绝、静态越界拦截与旧版.understand-anything/回退。 仪表盘里能看到什么viewer 渲染出的不是静态图而是一个完整的多视图知识图谱工作台。下图是结构视图按 Frontend、Backend、Kubernetes 等架构分层聚合节点右侧面板实时统计节点数、边数、语言与框架分布。切换到领域/学习视图后同一份图谱会展开为业务流程与引导之旅每一步都有自然语言讲解、语言知识点Language Lesson和可跳转的关联组件适合新人 onboarding 或 PR 评审前的快速理解。视图状态、过滤器与导航逻辑集中在 store.tsZustand store支持结构/领域/知识三种视图模式切换以及按节点类型、复杂度、架构层的组合过滤。 相关模块速查模块作用packages/viewer/本地只读 viewer本文主角packages/viewer/build.mjs构建并嵌入 dashboard 产物的打包脚本packages/dashboard/src/App.tsx仪表盘入口token 解析、视图装配packages/dashboard/vite.config.ts开发服务器的数据中间件viewer 的参照实现tests/skill/viewer/test_viewer.test.mjsviewer 端到端测试套件skills/understand-dashboard/SKILL.md/understand-dashboard技能优先走 viewer 快速路径✅ 小结viewer 包用一次 LLM 分析 纯 JSON 存储 本地只读渲染的组合把昂贵的语义分析成本与廉价的浏览体验彻底解耦对分析者跑一次/understand提交.ua/对团队其他成员装好 Node.js 18一条 npx 命令本地 127.0.0.1 打开完整仪表盘无 API Key、无数据外发。这也是 Understand-Anything 的核心理念落地图谱即资产仪表盘即文档——图可以像 README 一样被提交、分享、版本化而查看它只需要一台装了 Node.js 的电脑。【免费下载链接】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），仅供参考