一个基于知识图谱的智能体可视化工具

📝

基于知识图谱的智能体可视化调试工具，用 D3.js 力导向 3D 图谱呈现 Agent 架构，辅助架构调试与自我纠偏

在频繁的智能体调试中，无论是我还是大模型本身，对于我们共同开发出的那些智能体，在架构和细节方面心里都有点打鼓，谁也不敢拍胸脯，于是用知识图谱搞了一个可视化的”神经网络”，辅助我做架构调试，以及智能体的自我纠偏。

01 目前经历的过程

目前能源方向的大模型应用及智能体开发，大部分都不是自上而下、一气呵成的，因为没有成熟的经验可以参考，所以一般还是先从具体需求出发，先实现，再迭代，然后逐步提炼，起码我们是这样。

这个过程中会经历业务场景、技术实现、交互方式、主体架构多方面的反复变化和迭代，甚至推倒重来，需求很真实，过程很刺激，甚至很痛苦。

为了把那些用户说不清，我有点担心，智能体自己也搞不清的东西梳理好，于是有了这个东西：星图（AgentStarMap）。

02 先感受一下

这个小东西的诞生，最初的灵感有两个，远有贾维斯，近有Obsidian，身处可视化的神经网络当中，和它们实时交互，那种感受，想想就相当震撼。

03 我的几个诉求

最初的诉其实很简单：我想直观的看到智能体的思维结构，想知道每个场景怎么流转，想追踪问题出在哪个节点，如果修改它会有哪些关联影响，以及眼前的这个架构还能不能行、要不要改造。

于是有了这个小工具，为了方便聊天，起个名字叫：星图。它有几个典型的使用场景：看结构、跟流程、看关联、分析问题。

以手头正在迭代的某个智能问数的智能体为例，看几个典型场景。

场景 1 · 整体网络结构

一眼看清智能体由哪些模块组成、相互关系如何；左侧分类板可按模块类型筛选，力导向图可自由拖拽各个群组。

场景 2 · 典型交互流程

点击底部场景卡片，完整处理路径自动高亮并逐步播放动画；右侧展示当前各步骤，点击某一步可暂停跟看。

场景 3 · 重点节点关联

点击任意节点，直接关联的上下游节点高亮，其余自动变暗；用于判断某个模块修改后的波及范围，方便影响面分析。

场景 4 · 分析问题

有时候对某个问题想不明白，就点开看看；也有的时候发现智能体自己也懵了，就让它自己查查这个图谱，就当小抄（cheatsheet）用了。

04 Skill 版的诞生

有了野蛮实现后，还是控制不住，试着走精益求精、然后标准化提取的路子，把它做成了个 Agent Skill。

完整的 Skill 结构及设计定位

agent-starmap/
├── SKILL.md          # 主入口：5 阶段工作流（探索→分组→生成数据→渲染→校验）
├── template.html     # 渲染引擎：69KB 的完整前端，D3.js 力导向 3D 图谱，包含动画与触屏交互
├── reference-data.md # 数据规范：节点/关系/场景格式、色板、数量基准与常见缺陷列表
└── reference-engine.md # 引擎文档：3D 投影算法、占位符语法与数据写入说明

SKILL.md 的职责说明

SKILL.md · 智体星图 — 5 阶段工作流说明（业务视角）

[Phase 1] 探索代码库
  自动读取目录树、README、入口文件与核心模块，建立整体结构印象

[Phase 2] 动态划分分组
  不预设分类，根据项目实际情况导出 10–18 个节点大类（如 UI、意图、Handler、向量库等）

[Phase 3] 生成图谱数据
  提取节点（目标 60–120 个）、关系边（120–200 条）与业务场景（查询/训练/知识库）路径

[Phase 4] 写入 HTML
  将数据填充到 template.html 占位符，输出一个自包含、可直接运行的单文件 HTML

[Phase 5] 自动校验
  检查节点与关系一致性，确认分组都有对应节点，场景路径引用的 ID 均存在

PS：目前 Skill 是通过 Cursor 等工具按需触发，后续看需求可以再优化一下：在智能体设计时增加钩子程序，根据智能体修改自动触发更新。好了，今天先到这儿，有兴趣的伙伴欢迎一起探讨。

本文转载自微信公众号「小强匠」，如有侵权请联系删除。