Understand-Anything 仪表盘如何把知识图谱导出为 PNG、SVG 或 JSON【免费下载链接】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 的/understand命令分析过项目之后/understand-dashboard会启动一个交互式仪表盘来展示知识图谱。图谱生成后常见的需求是把它带出仪表盘放进文档、Wiki 或架构评审材料PNG/SVG或者拿到一份结构化数据做后续处理JSON。仪表盘顶栏的Export按钮快捷键E就提供这三种导出。完成本场景的前提是目标项目目录下已经存在分析产物knowledge-graph.json位于.understand-anything/或.ua/数据目录中并且能通过带 token 的 URL 打开仪表盘。先确认图谱数据存在再启动仪表盘导出功能的前提是项目里已经有知识图谱文件。数据目录的解析规则是存在旧的.understand-anything/目录时优先使用它否则使用.ua/。在终端里可以这样检查UA_PROJECT_DIR/path/to/your-project # 替换为你被分析的项目目录 UA_DIR$UA_PROJECT_DIR/.understand-anything [ -d $UA_DIR ] || UA_DIR$UA_PROJECT_DIR/.ua if [ -f $UA_DIR/knowledge-graph.json ]; then echo ok: $UA_DIR/knowledge-graph.json else echo No knowledge graph found. Run /understand first to analyze this project. fi如果输出的是No knowledge graph found...这一句说明项目还没有被分析过需要先在该项目里运行/understand生成图谱再回来启动仪表盘。确认文件存在后启动仪表盘有两条路径摘自 understand-dashboard 技能说明快速路径免安装、免构建使用与插件版本绑定的 viewer 压缩包直接运行会下载并运行一个自包含的 viewer# PLUGIN_ROOTunderstand-anything 插件根目录技能按优先级自动探测 # 常见位置如 ~/.understand-anything-plugin 或各平台 skill 安装路径上两级 : ${PLUGIN_ROOT:?先按技能步骤 3 解析出 PLUGIN_ROOT} PLUGIN_VERSION$(node -p require($PLUGIN_ROOT/package.json).version) VIEWER_URLhttps://github.com/Egonex-AI/Understand-Anything/releases/download/v${PLUGIN_VERSION}/understand-anything-viewer.tgz npx --yes $VIEWER_URL $UA_PROJECT_DIR该命令以后台方式运行它和 Vite 开发服务器一样会打印一行带 token 的 Dashboard URL如果进程退出且没有打印这行该版本没有 release 资产或没有网络就改用下面的回退路径。回退路径安装依赖 Vite 开发服务器cd $PLUGIN_ROOT/packages/dashboard (pnpm install --frozen-lockfile 2/dev/null || pnpm install) cd $PLUGIN_ROOT pnpm --filter understand-anything/core build cd $PLUGIN_ROOT/packages/dashboard GRAPH_DIR$UA_PROJECT_DIR npx vite --host 127.0.0.1其中GRAPH_DIR环境变量告诉开发服务器去哪里找知识图谱core 包是 dashboards 的依赖需要先构建。两条路径启动后从服务器输出中复制完整 URL格式如下文档示例 Dashboard URL: http://127.0.0.1:PORT?tokenTOKEN注意?token参数必须带上否则页面会停在 Access Token Required 的 token 门槛上PORT默认为 5173若端口被占用会自动选下一个可用端口。找到导出入口顶栏 Export 按钮或按 E打开图谱页面后顶栏右侧固定操作区有一个Export按钮按钮 tooltip 为Export graph (E)在页面任意位置按E键也可以打开同一个菜单Escape关闭。菜单提供三个选项文案来自 语言包Export as PNGExport as SVGExport as JSON三个选项的可用状态不同见 ExportMenu.tsxPNG 和 SVG 选项在画布实例未就绪时是禁用态半透明、不可点击JSON 选项在图谱未加载时禁用。PNG/SVG 依赖的是结构视图画布——只有 GraphView.tsx 在onInit时向 store 注册了 React Flow 实例见onInit{setReactFlowInstance}所以当你切换到知识图谱视图KnowledgeGraphView时PNG/SVG 按钮会处于禁用状态。导出 PNG 或 SVG得到当前画布的静态图PNG/SVG 导出的是结构视图中当前布局的画布快照。实现逻辑ExportMenu.tsx从 React Flow 实例读取当前节点和边的位置计算包围盒并加 40px 内边距生成一份独立的 SVG深色背景#0a0a0a、节点渲染为圆角矩形并带居中标签标签做了 XML 转义、边渲染为直线group类型的节点会被跳过PNG会把这份 SVG 先转成图片再绘制到 2 倍尺寸的画布上最终编码为image/png下载SVG则直接下载这份 SVG 文件。文件名规则${项目名}-export.png/${项目名}-export.svg项目名取自图谱的project.name缺失时回退为knowledge-graph-export.png/knowledge-graph-export.svg。点击后浏览器直接触发下载下载完成即表示成功若导出过程中出错页面会弹出对应的 alert 提示见下节。导出 JSON带当前 persona 和筛选条件的图谱数据JSON 导出的不是原始文件的简单复制而是应用了仪表盘当前状态后的图谱ExportMenu.tsxpersona 过滤当前 persona类型定义为non-technical | junior | experienced见 store.ts如果是non-technical会先从节点中剔除function和class两种子节点视图筛选接着应用仪表盘当前的节点/边筛选条件边的处理是两端节点都幸存才保留最后把过滤后的完整KnowledgeGraph对象project等其余字段保持不变以 2 空格缩进的 JSON 序列化后下载。文件名规则同上${项目名}-export.json。可以参考仓库里随 dashboard 提供的样例数据 knowledge-graph.json 了解图谱 JSON 的整体结构。需要拿到全量、未筛选的数据时不要依赖这次导出直接使用数据目录里的原始文件.understand-anything/knowledge-graph.json或.ua/knowledge-graph.json。结果验证与报错处理判断导出是否成功依据的是浏览器下载行为和代码中明确的错误提示成功浏览器下载区出现{项目名}-export.png/.svg/.json文件Export 菜单自动关闭。打开 SVG 应能看到深色背景上的节点与连线JSON 文件可以被标准 JSON 解析器解析。Graph not ready for exportPNG/SVG画布实例尚未就绪通常是因为当前不在结构视图或画布还没初始化完成切回结构视图后重试。No nodes to exportPNG/SVG画布里没有任何节点可导出。No graph loadedJSON图谱还没加载进 store。Failed to export PNG: could not render graph as image./Failed to export PNG: image encoding failed.SVG 转图片或 PNG 编码阶段失败ExportMenu.tsx。限制与边界PNG/SVG 是当前画布的快照布局、缩放下的节点位置取自画布实时状态且group节点不渲染背景与配色是导出逻辑里写死的深色方案不随仪表盘主题变化。JSON 导出反映的是当前 persona 与筛选条件下的子集节点数可能少于原始文件做数据核对时以数据目录中的原始knowledge-graph.json为准。仪表盘启动依赖 token URL忘记带?token时会卡在 Access Token Required 页面先补上参数再谈导出。相关源码与文档入口导出菜单实现、GraphView 画布、启动仪表盘的技能说明。【免费下载链接】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），仅供参考