Agent Topology Visualizer
可视化 开发工具安装命令
npx clawhub@latest install agent-topology-visualizer
安装说明
1
确认环境
确保已安装 Node.js 22+ 和 OpenClaw。在终端运行 openclaw --version 确认 OpenClaw 正常工作。
2
执行安装
在终端中运行上方安装命令，ClawHub 会自动下载并安装 Agent Topology Visualizer 到 ~/.openclaw/skills/ 目录。
3
验证安装
运行 openclaw skills list 查看已安装技能列表，确认 Agent Topology Visualizer 已出现在列表中。
4
配置参数（可选）
根据下方介绍中的配置说明，在 ~/.config/openclaw/openclaw.json5 中添加技能的配置项。
手动安装方式：将 Skill 文件夹复制到
~/.openclaw/skills/ 或项目目录下的 skills/ 文件夹，确保文件夹中包含 SKILL.md 文件。
SVG 架构图
交互式可视化
Agent 拓扑
依赖关系
导出分享
详细介绍
Agent Topology Visualizer 让你可以为 AI Agent 系统生成清晰的可视化架构图，帮助理解和分享复杂的多 Agent 系统设计。
核心功能
- 交互式 SVG 图表：生成可交互的架构图
- Agent 拓扑展示：清晰展示 Agent 之间的关系
- 工具和 Provider 可视化：标注 Agent 使用的工具和模型
- 依赖关系分析：识别和展示关键依赖
- 导出和分享：SVG 格式便于嵌入文档
安装命令
clawhub install agent-topology-visualizer
使用场景
- 架构文档：在技术文档中嵌入清晰的架构图
- 设计评审：可视化方案便于团队评审
- 教学演示：向新人介绍 Agent 系统
- 故障分析：快速定位系统中的问题节点
- 博客文章：技术博客的架构示意图
输出示例
生成的 SVG 包括：
- Agent 节点（不同 Agent 用不同颜色）
- Provider 关联（虚线连接）
- 工具调用关系（实线箭头）
- 数据流向标注
- 交互式 tooltip
与 OpenClaw 配合
通过 OpenClaw 自然语言调用：
用户：把我当前的 Agent 系统画成架构图
Agent：[调用 agent-topology-visualizer]
[生成 SVG 架构图]
架构图已生成：[图片]
注意事项
- 复杂系统的图表可能需要手动调整布局
- SVG 文件可以直接导入 Figma、Sketch 等设计工具
- 建议配合文档工具（Notion、飞书）使用