Understand-Anything 仪表盘如何把知识图谱导出为 PNG、SVG 或 JSON？-开发者社区

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_ROOT：understand-anything 插件根目录（技能按优先级自动探测， # 常见位置如 ~/.understand-anything-plugin 或各平台 skill 安装路径上两级） : "${PLUGIN_ROOT:?先按技能步骤 3 解析出 PLUGIN_ROOT}" PLUGIN_VERSION=$(node -p "require('$PLUGIN_ROOT/package.json').version") VIEWER_URL="https://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>?token=<TOKEN>

注意?token=参数必须带上，否则页面会停在 "Access Token Required" 的 token 门槛上；<PORT>默认为 5173，若端口被占用会自动选下一个可用端口。

找到导出入口：顶栏 Export 按钮或按 E

打开图谱页面后，顶栏右侧固定操作区有一个Export按钮（按钮 tooltip 为Export graph (E)），在页面任意位置按E键也可以打开同一个菜单，Escape关闭。菜单提供三个选项，文案来自语言包：

Export as PNG
Export as SVG
Export as JSON

三个选项的可用状态不同（见 ExportMenu.tsx）：PNG 和 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.tsx）：

persona 过滤：当前 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 export（PNG/SVG）：画布实例尚未就绪，通常是因为当前不在结构视图或画布还没初始化完成，切回结构视图后重试。
No nodes to export（PNG/SVG）：画布里没有任何节点可导出。
No graph loaded（JSON）：图谱还没加载进 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 画布、启动仪表盘的技能说明。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考