What makes Agent Topology Visualizer notable?

1K downloads. Trust evidence available

How should Agent Topology Visualizer be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

Agent Topology Visualizer

Generate interactive SVG architecture diagrams for AI agent systems. Use when visualizing multi-agent setups, orchestration flows, data pipelines, or system... Skill: Agent Topology Visualizer Owner: gavinnn-m Summary: Generate interactive SVG architecture diagrams for AI agent systems. Use when visualizing multi-agent setups, orchestration flows, data pipelines, or system... Tags: latest:1.1.0 Version history: v1.1.0 | 2026-02-21T19:09:34.721Z | user Fix XSS vulnerability: sanitize user-provided CSS input before injecting into style block. Strips script tags, style escapes

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.0k

Updated

Oct 11, 2026

Version

1.1.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1K downloads reported by the source. Last updated 10/11/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 11, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 11, 2026
Adoption signal: 1K downloadsadoption · observed Oct 11, 2026
Latest release: 1.1.0release · observed Feb 21, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s1782pmcayxcbv9z6gy31t0tcn884p7m:agent-topology-visualizer

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-gavinnn-m-agent-topology-visualizer/snapshot"

Run-check

$0.02 USD

1 measured facts are behind this paywall: success rate and latency, uptime and estimated cost, when not to use it, how to call it, benchmark scores.

Agents pay $0.02 in USDC. A card payment is $0.50, the smallest a card allows.

Documentation

CLAWHUB

47,527 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: agent-topology
description: 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).
---

# 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 IDs that form sequential chains. Hovering any pipeline node highlights the full chain transitively (not just direct connections).

Multiple pipelines supported:
```json
"pipelines": {
  "content": ["feed_hunter", "synthesizer", "writer", "website"],
  "deploy": ["builder", "tester", "deployer"]
}
```

## Auto-Layout Mode

If positions are omitted, the generator auto-places nodes by zone:

```json
{
  "nodes": [
    { "id": "main", "type": "orchestrator", "zone": "center" },
    { "id": "researcher", "type": "agent", "zone": "top-left" },
    { "id": "db", "type": "system", "zone": "right"

_meta.json

{
  "ownerId": "kn724j3rntp039atcv39w7p0hs80kdq4",
  "slug": "agent-topology-visualizer",
  "version": "1.1.0",
  "publishedAt": 1771700974721
}

references/customization.md

# Customization Guide

## Custom CSS

Add a `css` field to your topology JSON to inject custom styles into the output:

```json
{
  "css": ".arch-svg { filter: saturate(1.2); }"
}
```

The CSS is injected into a `<style>` block inside the HTML output. Only use CSS you've written or reviewed.

## Embedding in Existing Pages

Use `--format svg` to get just the SVG element, then embed it in your own page:

```html
<div class="my-diagram-container">
  <!-- paste SVG output here -->
</div>
```

The `--format paths` option outputs only the `<path>` elements for injection into an existing SVG.

## Background Options

The default dark theme includes a constellation-style star field. Control it with:

```json
{
  "background": {
    "stars": true,
    "starCount": 150,
    "starColor": "rgba(200,214,224,0.3)"
  }
}
```

Set `"stars": false` to disable the star field for embedding in pages with their own background.

references/schema.md

# Topology JSON Schema Reference

## Full Schema

```json
{
  "title": "string (required) — diagram title",
  "theme": "dark | light (default: dark)",
  "viewBox": [width, height] (default: [1220, 1000]),
  
  "colors": {
    "accent": "#hex (default: #5d9b93)",
    "background": "#hex (default: #0a0e14)",
    "text": "#hex (default: #c8d6e0)",
    "nodeStroke": "rgba/hex (default: rgba(93,155,147,0.4))",
    "connectionHub": "rgba/hex",
    "connectionCore": "rgba/hex",
    "connectionCross": "rgba/hex"
  },
  
  "font": "string (default: Inter, system-ui, sans-serif)",
  
  "zones": {
    "zone-name": {
      "label": "string — display label",
      "bounds": [x, y, width, height] (optional — for auto-layout)
    }
  },
  
  "nodes": [
    {
      "id": "string (required) — unique identifier, lowercase with underscores",
      "name": "string (required) — display name",
      "type": "orchestrator | agent | system | pipeline | ops | human",
      "emoji": "string (optional) — emoji icon",
      "subtitle": "string (optional) — text below name",
      "position": [x, y] (optional if zone provided),
      "zone": "string (optional) — auto-layout zone name",
      "radius": "number (optional — default by type: orchestrator=58, system=44, agent=32, pipeline=25, ops=25, human=38)"
    }
  ],
  
  "connections": [
    {
      "from": "string (required) — source node id",
      "to": "string (required) — target node id",
      "type": "hub | core | cross | cluster | sys (default: core)"
    }
  ],
  
  "pipelines": {
    "pipeline-name": ["node_id_1", "node_id_2", "node_id_3"]
  }
}
```

## Node Type Defaults

| Type | Radius | Fill Opacity | Stroke Color | Glow |
|------|--------|-------------|--------------|------|
| orchestrator | 58 | 0.15 | accent | Yes, animated pulse |
| agent | 32 | 0.12 | accent | No |
| system | 44 | 0.08 | muted accent | No |
| pipeline | 25 | 0.12 | bright accent | No |
| ops | 25 | 0.06 | muted | No |
| human | 38 | 0.10 | accent | No |

## Connection Type Styles

| Type | Stroke Opacity | Stroke Width | Dash | Use |
|------|---------------|-------------|------|-----|
| hub | 0.35 | 2.0 | solid | Orchestrator ↔ major systems |
| core | 0.25 | 1.5 | solid | Orchestrator ↔ agents |
| cross | 0.18 | 1.2 | solid | Agent ↔ system data flows |
| cluster | 0.30 | 1.5 | solid | Pipeline sequential chain |
| sys | 0.15 | 1.0 | 4,4 dash | System ↔ system |

## Edge-to-Edge Math

Connections are calculated as cubic bezier curves (`M x1,y1 C cx1,cy1 cx2,cy2 x2,y2`) where start/end points are on the circle perimeter (not center). The generator:

1. Calculates the angle between node centers
2. Projects start/end points to circle edge using `(cx + r*cos(θ), cy + r*sin(θ))`
3. Computes control points perpendicular to the center line for natural curves
4. Adjusts curve intensity based on distance between nodes

## Optional Fields

- `css` (string): Custom CSS injected into the output `<style>` block. Only styles, no scripts.
- `background

assets/example-topology.json

{
  "title": "AI Research Assistant — Agent Architecture",
  "theme": "dark",
  "viewBox": [1220, 1000],
  "colors": {
    "accent": "#5d9b93"
  },
  "nodes": [
    {
      "id": "orchestrator",
      "name": "Orchestrator",
      "type": "orchestrator",
      "emoji": "🤖",
      "subtitle": "CENTRAL AGENT",
      "position": [610, 480],
      "radius": 58
    },
    {
      "id": "user",
      "name": "User",
      "type": "human",
      "emoji": "👤",
      "subtitle": "Human-in-the-Loop",
      "position": [900, 100]
    },
    {
      "id": "chat",
      "name": "Chat Interface",
      "type": "system",
      "emoji": "💬",
      "subtitle": "Messaging",
      "position": [780, 160]
    },
    {
      "id": "researcher",
      "name": "Research Agent",
      "type": "agent",
      "emoji": "🔍",
      "subtitle": "Deep Dives",
      "position": [350, 280]
    },
    {
      "id": "writer",
      "name": "Writer Agent",
      "type": "agent",
      "emoji": "✍️",
      "subtitle": "Content Creation",
      "position": [380, 650]
    },
    {
      "id": "reviewer",
      "name": "Review Agent",
      "type": "agent",
      "emoji": "🔎",
      "subtitle": "Quality Check",
      "position": [850, 600]
    },
    {
      "id": "database",
      "name": "Vector DB",
      "type": "system",
      "emoji": "🗄️",
      "subtitle": "Embeddings Store",
      "position": [1000, 400]
    },
    {
      "id": "api_gateway",
      "name": "API Gateway",
      "type": "system",
      "emoji": "🌐",
      "subtitle": "External APIs",
      "position": [950, 260]
    },
    {
      "id": "web_scraper",
      "name": "Web Scraper",
      "type": "pipeline",
      "emoji": "🕷️",
      "subtitle": "Crawl",
      "position": [120, 250]
    },
    {
      "id": "parser",
      "name": "Parser",
      "type": "pipeline",
      "emoji": "📄",
      "subtitle": "Extract",
      "position": [100, 370]
    },
    {
      "id": "embedder",
      "name": "Embedder",
      "type": "pipeline",
      "emoji": "🧮",
      "subtitle": "Vectorize",
      "position": [110, 490]
    },
    {
      "id": "indexer",
      "name": "Indexer",
      "type": "pipeline",
      "emoji": "📇",
      "subtitle": "Store",
      "position": [140, 600]
    },
    {
      "id": "scheduler",
      "name": "Scheduler",
      "type": "ops",
      "emoji": "⏰",
      "subtitle": "Cron Jobs",
      "position": [1050, 550]
    },
    {
      "id": "monitor",
      "name": "Monitor",
      "type": "ops",
      "emoji": "📊",
      "subtitle": "Health Checks",
      "position": [1080, 680]
    },
    {
      "id": "cache",
      "name": "Cache",
      "type": "system",
      "emoji": "⚡",
      "subtitle": "Redis",
      "position": [750, 800]
    },
    {
      "id": "skills",
      "name": "Skills Library",
      "type": "system",
      "emoji": "🧰",
      "subtitle": "Extensible Tools",
      "position": [300, 140]
    },
    {
      "id": "evolver",
      "name": "Self-Improver",
      "type

Github ReposUpdated 2d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.