OpenClaw

agent-topology

Generate interactive SVG architecture diagrams for AI agent systems. Use when visualizing multi-agent setups, orchestration flows, data pipelines, or system topology. Produces a self-contained HTML page with hover-highlighting, tooltips, curved bezier connections, and zone-based layout. Works with any agent framework (OpenClaw, CrewAI, LangGraph, AutoGen, etc).

gavinnn-m0 来源安装数☆ 0 仓库 Stars

查看来源 ↗安装与使用 SKILL.md ↗

安装与使用

请根据来源仓库和你的 AI 工具说明安装此技能。先阅读技能文件和依赖要求，再添加到工作流。

SkillHub CLI

skillhub install gavinnn-m/agent-topology-visualizer

打开来源仓库，查看说明和兼容环境后，按来源提供的命令或步骤安装。

将来源链接提供给你的 Agent，让它先读取说明、核对依赖，并向你说明将执行的安装步骤。

查看来源 ↗使用指南

技能说明

Agent Topology

Generate interactive architecture diagrams from a JSON topology definition.

Quick Start

Create a topology JSON file (see references/schema.md for full spec)
Run the generator:

python3 scripts/generate.py topology.json -o diagram.html

Output is a self-contained HTML file with embedded SVG, CSS, and JS.

Topology JSON Format

{
  "title": "My Agent System",
  "theme": "dark",
  "viewBox": [1220, 1000],
  "zones": {
    "center": { "label": "Orchestration" },
    "left": { "label": "Content Pipeline" },
    "right": { "label": "Infrastructure" }
  },
  "nodes": [
    {
      "id": "orchestrator",
      "name": "Main Agent",
      "type": "orchestrator",
      "emoji": "🤖",
      "subtitle": "Central Hub",
      "position": [610, 480],
      "radius": 58
    },
    {
      "id": "tool_agent",
      "name": "Tool Agent",
      "type": "agent",
      "emoji": "🔧",
      "subtitle": "Executes tools",
      "position": [400, 300],
      "radius": 32
    }
  ],
  "connections": [
    { "from": "orchestrator", "to": "tool_agent", "type": "core" }
  ],
  "pipelines": ["tool_agent", "processor", "output"]
}

Node Types

Type	Visual	Use for
`orchestrator`	Large glowing circle	Central agent/router
`agent`	Medium teal circle	Sub-agents, workers
`system`	Medium muted circle	External systems (DBs, APIs)
`pipeline`	Small bright circle	Sequential pipeline steps
`ops`	Small circle	Operational/maintenance agents
`human`	Medium circle	Human-in-the-loop nodes

Connection Types

Type	Style	Use for
`hub`	Bright, thicker	Orchestrator ↔ systems
`core`	Medium brightness	Orchestrator ↔ agents
`cross`	Subtle	Agent ↔ system (data flow)
`cluster`	Pipeline style	Sequential chain steps
`sys`	Dashed subtle	System ↔ system

Pipelines

The pipelines array lists node ID...

来源信息

Source: github
Repository: openclaw/skills
Path: skills/gavinnn-m/agent-topology-visualizer
Version: —
Commit: c28d6fc4a72f5dfd9acd2d4b3426c279187a4c08
分类来源: rules
状态: active
可见性: public

这些信息来自收录时的来源分析，可能滞后；使用前请核对最新来源文件。

来源内容

SKILL.md

# Agent Topology

Generate interactive architecture diagrams from a JSON topology definition.

## Quick Start

1. Create a topology JSON file (see `references/schema.md` for full spec)
2. Run the generator:

```bash
python3 scripts/generate.py topology.json -o diagram.html
```

3. Output is a self-contained HTML file with embedded SVG, CSS, and JS.

## Topology JSON Format

```json
{
  "title": "My Agent System",
  "theme": "dark",
  "viewBox": [1220, 1000],
  "zones": {
    "center": { "label": "Orchestration" },
    "left": { "label": "Content Pipeline" },
    "right": { "label": "Infrastructure" }
  },
  "nodes": [
    {
      "id": "orchestrator",
      "name": "Main Agent",
      "type": "orchestrator",
      "emoji": "🤖",
      "subtitle": "Central Hub",
      "position": [610, 480],
      "radius": 58
    },
    {
      "id": "tool_agent",
      "name": "Tool Agent",
      "type": "agent",
      "emoji": "🔧",
      "subtitle": "Executes tools",
      "position": [400, 300],
      "radius": 32
    }
  ],
  "connections": [
    { "from": "orchestrator", "to": "tool_agent", "type": "core" }
  ],
  "pipelines": ["tool_agent", "processor", "output"]
}
```

### Node Types

| Type | Visual | Use for |
|------|--------|---------|
| `orchestrator` | Large glowing circle | Central agent/router |
| `agent` | Medium teal circle | Sub-agents, workers |
| `system` | Medium muted circle | External systems (DBs, APIs) |
| `pipeline` | Small bright circle | Sequential pipeline steps |
| `ops` | Small circle | Operational/maintenance agents |
| `human` | Medium circle | Human-in-the-loop nodes |

### Connection Types

| Type | Style | Use for |
|------|-------|---------|
| `hub` | Bright, thicker | Orchestrator ↔ systems |
| `core` | Medium brightness | Orchestrator ↔ agents |
| `cross` | Subtle | Agent ↔ system (data flow) |
| `cluster` | Pipeline style | Sequential chain steps |
| `sys` | Dashed subtle | System ↔ system |

### Pipelines

The `pipelines` array lists node ID...

搜索