{"id":"bf8dda7d-8423-4597-a691-d2c11b6afb8d","entityType":"agent","slug":"clawhub-gavinnn-m-agent-topology-visualizer","name":"Agent Topology Visualizer","canonicalUrl":"https://www.xpersona.co/agent/clawhub-gavinnn-m-agent-topology-visualizer","canonicalPath":"/agent/clawhub-gavinnn-m-agent-topology-visualizer","generatedAt":"2026-10-11T20:59:04.948Z","source":"CLAWHUB","claimStatus":"UNCLAIMED","verificationTier":"NONE","summary":{"evidence":{"source":"editorial-content","verified":true,"confidence":"high","updatedAt":"2026-10-11T16:05:27.242Z","emptyReason":null},"description":"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","descriptionLabel":"Technical summary","evidenceSummary":"Capability contract not published. No trust telemetry is available yet. 1K downloads reported by the source. Last updated 10/11/2026.","installCommand":"clawhub skill install s1782pmcayxcbv9z6gy31t0tcn884p7m:agent-topology-visualizer","sourceUrl":"https://clawhub.ai/gavinnn-m/agent-topology-visualizer","homepage":"https://clawhub.ai/gavinnn-m/skills/agent-topology-visualizer","primaryLinks":[{"label":"View on ClawHub","url":"https://clawhub.ai/gavinnn-m/agent-topology-visualizer","kind":"source"},{"label":"Homepage","url":"https://clawhub.ai/gavinnn-m/skills/agent-topology-visualizer","kind":"homepage"}],"safetyScore":84,"overallRank":62,"popularityScore":60,"trustScore":null,"claimedByName":null,"isOwner":false,"seoDescription":"Generate interactive SVG architecture diagrams for AI agent systems. Use when visualizing multi-agent setups, orchestration flows, data pipelines, or system... "},"coverage":{"evidence":{"source":"public-profile","verified":false,"confidence":"medium","updatedAt":"2026-10-11T16:05:27.242Z","emptyReason":null},"protocols":[{"protocol":"OPENCLEW","label":"OpenClaw","status":"self-declared","notes":"Declared in the public agent profile."}],"capabilities":[],"verifiedCount":0,"selfDeclaredCount":1,"capabilityMatrix":{"rows":[{"key":"OPENCLEW","type":"protocol","support":"unknown","confidenceSource":"profile","notes":"Listed on profile"}],"flattenedTokens":"protocol:OPENCLEW|unknown|profile"}},"adoption":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T16:05:27.242Z","emptyReason":null},"stars":null,"forks":null,"downloads":1032,"packageName":null,"latestVersion":"1.1.0","tractionLabel":"1K downloads"},"release":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"medium","updatedAt":"2026-10-11T16:05:27.186Z","emptyReason":null},"lastUpdatedAt":"2026-10-11T16:05:27.242Z","lastCrawledAt":"2026-10-11T16:05:27.186Z","lastIndexedAt":null,"nextCrawlAt":"2026-10-12T16:05:27.186Z","lastVerifiedAt":null,"highlights":[{"version":"1.1.0","createdAt":"2026-02-21T19:09:34.721Z","changelog":"Fix XSS vulnerability: sanitize user-provided CSS input before injecting into style block. Strips script tags, style escapes, javascript URIs, expression() calls, and @import rules.","fileCount":6,"zipByteSize":14027},{"version":"1.0.1","createdAt":"2026-02-19T18:40:10.802Z","changelog":"- Removed OpenClaw import support and related documentation. - Deleted references/openclaw-import.md, references/self-generate.md, and scripts/import-openclaw.py. - SKILL.md no longer describes OpenClaw import or self-generation agent patterns. - Advanced section now focuses only on customization and embedding.","fileCount":6,"zipByteSize":13643},{"version":"1.0.0","createdAt":"2026-02-19T18:35:25.858Z","changelog":"Initial release – generate interactive SVG agent architecture diagrams from a JSON definition. - Produces self-contained HTML diagrams with hover-highlighting, tooltips, bezier connections, and zone-based layouts. - Supports multiple agent frameworks (OpenClaw, CrewAI, LangGraph, AutoGen, etc). - Flexible node/connection types, pipelines, and auto-layout by zones. - Fully customizable themes and export formats (HTML, SVG, SVG paths). - No dependencies; all features embedded in single output file.","fileCount":9,"zipByteSize":17982}]},"execution":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No published capability contract is available yet."},"installCommand":"clawhub skill install s1782pmcayxcbv9z6gy31t0tcn884p7m:agent-topology-visualizer","setupComplexity":"low","setupSteps":["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":{"contractStatus":"missing","authModes":[],"requires":[],"forbidden":[],"supportsMcp":false,"supportsA2a":false,"supportsStreaming":false,"inputSchemaRef":null,"outputSchemaRef":null,"dataRegion":null,"contractUpdatedAt":null,"sourceUpdatedAt":null,"freshnessSeconds":null},"invocationGuide":{"preferredApi":{"snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-gavinnn-m-agent-topology-visualizer/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-gavinnn-m-agent-topology-visualizer/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-gavinnn-m-agent-topology-visualizer/trust"},"curlExamples":["curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-gavinnn-m-agent-topology-visualizer/snapshot\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-gavinnn-m-agent-topology-visualizer/contract\"","curl -s \"https://www.xpersona.co/api/v1/agents/clawhub-gavinnn-m-agent-topology-visualizer/trust\""],"jsonRequestTemplate":{"query":"summarize this repo","constraints":{"maxLatencyMs":2000,"protocolPreference":["OPENCLEW"]}},"jsonResponseTemplate":{"ok":true,"result":{"summary":"...","confidence":0.9},"meta":{"source":"CLAWHUB","generatedAt":"2026-10-11T20:59:04.947Z"}},"retryPolicy":{"maxAttempts":3,"backoffMs":[500,1500,3500],"retryableConditions":["HTTP_429","HTTP_503","NETWORK_TIMEOUT"]}},"endpoints":{"dossierUrl":"https://www.xpersona.co/api/v1/agents/clawhub-gavinnn-m-agent-topology-visualizer/dossier","snapshotUrl":"https://www.xpersona.co/api/v1/agents/clawhub-gavinnn-m-agent-topology-visualizer/snapshot","contractUrl":"https://www.xpersona.co/api/v1/agents/clawhub-gavinnn-m-agent-topology-visualizer/contract","trustUrl":"https://www.xpersona.co/api/v1/agents/clawhub-gavinnn-m-agent-topology-visualizer/trust"}},"reliability":{"evidence":{"source":"runtime-metrics","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No trust, reliability, or runtime telemetry is available."},"trust":{"status":"unavailable","handshakeStatus":"UNKNOWN","verificationFreshnessHours":null,"reputationScore":null,"p95LatencyMs":null,"successRate30d":null,"fallbackRate":null,"attempts30d":null,"trustUpdatedAt":null,"trustConfidence":"unknown","sourceUpdatedAt":null,"freshnessSeconds":null},"decisionGuardrails":{"doNotUseIf":["Contract metadata is missing or unavailable for deterministic execution."],"safeUseWhen":[],"riskFlags":["missing_or_unavailable_contract","trust_data_unavailable","schema_references_missing"],"operationalConfidence":"low"},"executionMetrics":{"observedLatencyMsP50":null,"observedLatencyMsP95":null,"estimatedCostUsd":null,"uptime30d":null,"rateLimitRpm":null,"rateLimitBurst":null,"lastVerifiedAt":null,"verificationSource":null},"runtimeMetrics":{"successRate":null,"avgLatencyMs":null,"avgCostUsd":null,"hallucinationRate":null,"retryRate":null,"disputeRate":null,"p50Latency":null,"p95Latency":null,"lastUpdated":null}},"benchmarks":{"evidence":{"source":"no-benchmark-data","verified":false,"confidence":"low","updatedAt":null,"emptyReason":"No benchmark suites or observed failure patterns are available."},"suites":[],"failurePatterns":[]},"artifacts":{"evidence":{"source":"CLAWHUB","verified":false,"confidence":"high","updatedAt":"2026-10-11T16:05:27.242Z","emptyReason":null},"readme":"Skill: Agent Topology Visualizer\n\nOwner: gavinnn-m\n\nSummary: Generate interactive SVG architecture diagrams for AI agent systems. Use when visualizing multi-agent setups, orchestration flows, data pipelines, or system...\n\nTags: latest:1.1.0\n\nVersion history:\n\nv1.1.0 | 2026-02-21T19:09:34.721Z | user\n\nFix XSS vulnerability: sanitize user-provided CSS input before injecting into style block. Strips script tags, style escapes, javascript URIs, expression() calls, and @import rules.\n\nv1.0.1 | 2026-02-19T18:40:10.802Z | user\n\n- Removed OpenClaw import support and related documentation.\n- Deleted references/openclaw-import.md, references/self-generate.md, and scripts/import-openclaw.py.\n- SKILL.md no longer describes OpenClaw import or self-generation agent patterns.\n- Advanced section now focuses only on customization and embedding.\n\nv1.0.0 | 2026-02-19T18:35:25.858Z | user\n\nInitial release – generate interactive SVG agent architecture diagrams from a JSON definition.\n\n- Produces self-contained HTML diagrams with hover-highlighting, tooltips, bezier connections, and zone-based layouts.\n- Supports multiple agent frameworks (OpenClaw, CrewAI, LangGraph, AutoGen, etc).\n- Flexible node/connection types, pipelines, and auto-layout by zones.\n- Fully customizable themes and export formats (HTML, SVG, SVG paths).\n- No dependencies; all features embedded in single output file.\n\nArchive index:\n\nArchive v1.1.0: 6 files, 14027 bytes\n\nFiles: assets/example-topology.json (4787b), references/customization.md (920b), references/schema.md (3460b), scripts/generate.py (26551b), SKILL.md (4467b), _meta.json (144b)\n\nFile v1.1.0:SKILL.md\n\n---\nname: agent-topology\ndescription: 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).\n---\n\n# Agent Topology\n\nGenerate interactive architecture diagrams from a JSON topology definition.\n\n## Quick Start\n\n1. Create a topology JSON file (see `references/schema.md` for full spec)\n2. Run the generator:\n\n```bash\npython3 scripts/generate.py topology.json -o diagram.html\n```\n\n3. Output is a self-contained HTML file with embedded SVG, CSS, and JS.\n\n## Topology JSON Format\n\n```json\n{\n  \"title\": \"My Agent System\",\n  \"theme\": \"dark\",\n  \"viewBox\": [1220, 1000],\n  \"zones\": {\n    \"center\": { \"label\": \"Orchestration\" },\n    \"left\": { \"label\": \"Content Pipeline\" },\n    \"right\": { \"label\": \"Infrastructure\" }\n  },\n  \"nodes\": [\n    {\n      \"id\": \"orchestrator\",\n      \"name\": \"Main Agent\",\n      \"type\": \"orchestrator\",\n      \"emoji\": \"🤖\",\n      \"subtitle\": \"Central Hub\",\n      \"position\": [610, 480],\n      \"radius\": 58\n    },\n    {\n      \"id\": \"tool_agent\",\n      \"name\": \"Tool Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"🔧\",\n      \"subtitle\": \"Executes tools\",\n      \"position\": [400, 300],\n      \"radius\": 32\n    }\n  ],\n  \"connections\": [\n    { \"from\": \"orchestrator\", \"to\": \"tool_agent\", \"type\": \"core\" }\n  ],\n  \"pipelines\": [\"tool_agent\", \"processor\", \"output\"]\n}\n```\n\n### Node Types\n\n| Type | Visual | Use for |\n|------|--------|---------|\n| `orchestrator` | Large glowing circle | Central agent/router |\n| `agent` | Medium teal circle | Sub-agents, workers |\n| `system` | Medium muted circle | External systems (DBs, APIs) |\n| `pipeline` | Small bright circle | Sequential pipeline steps |\n| `ops` | Small circle | Operational/maintenance agents |\n| `human` | Medium circle | Human-in-the-loop nodes |\n\n### Connection Types\n\n| Type | Style | Use for |\n|------|-------|---------|\n| `hub` | Bright, thicker | Orchestrator ↔ systems |\n| `core` | Medium brightness | Orchestrator ↔ agents |\n| `cross` | Subtle | Agent ↔ system (data flow) |\n| `cluster` | Pipeline style | Sequential chain steps |\n| `sys` | Dashed subtle | System ↔ system |\n\n### Pipelines\n\nThe `pipelines` array lists node IDs that form sequential chains. Hovering any pipeline node highlights the full chain transitively (not just direct connections).\n\nMultiple pipelines supported:\n```json\n\"pipelines\": {\n  \"content\": [\"feed_hunter\", \"synthesizer\", \"writer\", \"website\"],\n  \"deploy\": [\"builder\", \"tester\", \"deployer\"]\n}\n```\n\n## Auto-Layout Mode\n\nIf positions are omitted, the generator auto-places nodes by zone:\n\n```json\n{\n  \"nodes\": [\n    { \"id\": \"main\", \"type\": \"orchestrator\", \"zone\": \"center\" },\n    { \"id\": \"researcher\", \"type\": \"agent\", \"zone\": \"top-left\" },\n    { \"id\": \"db\", \"type\": \"system\", \"zone\": \"right\" }\n  ]\n}\n```\n\nAvailable zones: `center`, `top-left`, `top-right`, `left`, `right`, `bottom-left`, `bottom-right`, `bottom`.\n\n## Theming\n\n```json\n{\n  \"theme\": \"dark\",\n  \"colors\": {\n    \"accent\": \"#5d9b93\",\n    \"background\": \"#0a0e14\",\n    \"text\": \"#c8d6e0\",\n    \"nodeStroke\": \"rgba(93,155,147,0.4)\"\n  },\n  \"font\": \"Inter, system-ui, sans-serif\"\n}\n```\n\nBuilt-in themes: `dark` (default), `light`. Override any color individually.\n\n## Output Formats\n\n```bash\n# Self-contained HTML page (default)\npython3 scripts/generate.py topology.json -o diagram.html\n\n# SVG only (for embedding)\npython3 scripts/generate.py topology.json -o diagram.svg --format svg\n\n# SVG paths only (for injection into existing page)\npython3 scripts/generate.py topology.json --format paths\n```\n\n## Features\n\n- **Edge-to-edge connections**: Lines connect at circle perimeters, not centers\n- **Curved bezier paths**: All connections use smooth cubic bezier curves\n- **Hover highlighting**: Hover a node to highlight its connections; dims everything else\n- **Pipeline walk**: Hovering a pipeline node lights up the full sequential chain\n- **Path tooltips**: Hover a connection line to see \"Source → Target\"\n- **Mobile/tap support**: Tap works like hover with auto-dismiss\n- **Responsive**: SVG scales to container width\n- **Zero dependencies**: Output is a single self-contained HTML file\n\n## Advanced\n\n- For custom CSS injection and embedding options, see `references/customization.md`\n\nFile v1.1.0:_meta.json\n\n{\n  \"ownerId\": \"kn724j3rntp039atcv39w7p0hs80kdq4\",\n  \"slug\": \"agent-topology-visualizer\",\n  \"version\": \"1.1.0\",\n  \"publishedAt\": 1771700974721\n}\n\nFile v1.1.0:references/customization.md\n\n# Customization Guide\n\n## Custom CSS\n\nAdd a `css` field to your topology JSON to inject custom styles into the output:\n\n```json\n{\n  \"css\": \".arch-svg { filter: saturate(1.2); }\"\n}\n```\n\nThe CSS is injected into a `<style>` block inside the HTML output. Only use CSS you've written or reviewed.\n\n## Embedding in Existing Pages\n\nUse `--format svg` to get just the SVG element, then embed it in your own page:\n\n```html\n<div class=\"my-diagram-container\">\n  <!-- paste SVG output here -->\n</div>\n```\n\nThe `--format paths` option outputs only the `<path>` elements for injection into an existing SVG.\n\n## Background Options\n\nThe default dark theme includes a constellation-style star field. Control it with:\n\n```json\n{\n  \"background\": {\n    \"stars\": true,\n    \"starCount\": 150,\n    \"starColor\": \"rgba(200,214,224,0.3)\"\n  }\n}\n```\n\nSet `\"stars\": false` to disable the star field for embedding in pages with their own background.\n\nFile v1.1.0:references/schema.md\n\n# Topology JSON Schema Reference\n\n## Full Schema\n\n```json\n{\n  \"title\": \"string (required) — diagram title\",\n  \"theme\": \"dark | light (default: dark)\",\n  \"viewBox\": [width, height] (default: [1220, 1000]),\n  \n  \"colors\": {\n    \"accent\": \"#hex (default: #5d9b93)\",\n    \"background\": \"#hex (default: #0a0e14)\",\n    \"text\": \"#hex (default: #c8d6e0)\",\n    \"nodeStroke\": \"rgba/hex (default: rgba(93,155,147,0.4))\",\n    \"connectionHub\": \"rgba/hex\",\n    \"connectionCore\": \"rgba/hex\",\n    \"connectionCross\": \"rgba/hex\"\n  },\n  \n  \"font\": \"string (default: Inter, system-ui, sans-serif)\",\n  \n  \"zones\": {\n    \"zone-name\": {\n      \"label\": \"string — display label\",\n      \"bounds\": [x, y, width, height] (optional — for auto-layout)\n    }\n  },\n  \n  \"nodes\": [\n    {\n      \"id\": \"string (required) — unique identifier, lowercase with underscores\",\n      \"name\": \"string (required) — display name\",\n      \"type\": \"orchestrator | agent | system | pipeline | ops | human\",\n      \"emoji\": \"string (optional) — emoji icon\",\n      \"subtitle\": \"string (optional) — text below name\",\n      \"position\": [x, y] (optional if zone provided),\n      \"zone\": \"string (optional) — auto-layout zone name\",\n      \"radius\": \"number (optional — default by type: orchestrator=58, system=44, agent=32, pipeline=25, ops=25, human=38)\"\n    }\n  ],\n  \n  \"connections\": [\n    {\n      \"from\": \"string (required) — source node id\",\n      \"to\": \"string (required) — target node id\",\n      \"type\": \"hub | core | cross | cluster | sys (default: core)\"\n    }\n  ],\n  \n  \"pipelines\": {\n    \"pipeline-name\": [\"node_id_1\", \"node_id_2\", \"node_id_3\"]\n  }\n}\n```\n\n## Node Type Defaults\n\n| Type | Radius | Fill Opacity | Stroke Color | Glow |\n|------|--------|-------------|--------------|------|\n| orchestrator | 58 | 0.15 | accent | Yes, animated pulse |\n| agent | 32 | 0.12 | accent | No |\n| system | 44 | 0.08 | muted accent | No |\n| pipeline | 25 | 0.12 | bright accent | No |\n| ops | 25 | 0.06 | muted | No |\n| human | 38 | 0.10 | accent | No |\n\n## Connection Type Styles\n\n| Type | Stroke Opacity | Stroke Width | Dash | Use |\n|------|---------------|-------------|------|-----|\n| hub | 0.35 | 2.0 | solid | Orchestrator ↔ major systems |\n| core | 0.25 | 1.5 | solid | Orchestrator ↔ agents |\n| cross | 0.18 | 1.2 | solid | Agent ↔ system data flows |\n| cluster | 0.30 | 1.5 | solid | Pipeline sequential chain |\n| sys | 0.15 | 1.0 | 4,4 dash | System ↔ system |\n\n## Edge-to-Edge Math\n\nConnections 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:\n\n1. Calculates the angle between node centers\n2. Projects start/end points to circle edge using `(cx + r*cos(θ), cy + r*sin(θ))`\n3. Computes control points perpendicular to the center line for natural curves\n4. Adjusts curve intensity based on distance between nodes\n\n## Optional Fields\n\n- `css` (string): Custom CSS injected into the output `<style>` block. Only styles, no scripts.\n- `background.stars` (bool): Enable/disable star field canvas (default: true)\n- `background.starCount` (int): Number of stars (default: 150)\n- `background.starColor` (string): Star fill color\n\n## Validation Rules\n\n- All `from`/`to` in connections must reference valid node `id`s\n- All node ids in `pipelines` must exist in `nodes`\n- Node `id`s must be unique\n- At least one node required\n- `orchestrator` type nodes limited to 3 per diagram\n\nFile v1.1.0:assets/example-topology.json\n\n{\n  \"title\": \"AI Research Assistant — Agent Architecture\",\n  \"theme\": \"dark\",\n  \"viewBox\": [1220, 1000],\n  \"colors\": {\n    \"accent\": \"#5d9b93\"\n  },\n  \"nodes\": [\n    {\n      \"id\": \"orchestrator\",\n      \"name\": \"Orchestrator\",\n      \"type\": \"orchestrator\",\n      \"emoji\": \"🤖\",\n      \"subtitle\": \"CENTRAL AGENT\",\n      \"position\": [610, 480],\n      \"radius\": 58\n    },\n    {\n      \"id\": \"user\",\n      \"name\": \"User\",\n      \"type\": \"human\",\n      \"emoji\": \"👤\",\n      \"subtitle\": \"Human-in-the-Loop\",\n      \"position\": [900, 100]\n    },\n    {\n      \"id\": \"chat\",\n      \"name\": \"Chat Interface\",\n      \"type\": \"system\",\n      \"emoji\": \"💬\",\n      \"subtitle\": \"Messaging\",\n      \"position\": [780, 160]\n    },\n    {\n      \"id\": \"researcher\",\n      \"name\": \"Research Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"🔍\",\n      \"subtitle\": \"Deep Dives\",\n      \"position\": [350, 280]\n    },\n    {\n      \"id\": \"writer\",\n      \"name\": \"Writer Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"✍️\",\n      \"subtitle\": \"Content Creation\",\n      \"position\": [380, 650]\n    },\n    {\n      \"id\": \"reviewer\",\n      \"name\": \"Review Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"🔎\",\n      \"subtitle\": \"Quality Check\",\n      \"position\": [850, 600]\n    },\n    {\n      \"id\": \"database\",\n      \"name\": \"Vector DB\",\n      \"type\": \"system\",\n      \"emoji\": \"🗄️\",\n      \"subtitle\": \"Embeddings Store\",\n      \"position\": [1000, 400]\n    },\n    {\n      \"id\": \"api_gateway\",\n      \"name\": \"API Gateway\",\n      \"type\": \"system\",\n      \"emoji\": \"🌐\",\n      \"subtitle\": \"External APIs\",\n      \"position\": [950, 260]\n    },\n    {\n      \"id\": \"web_scraper\",\n      \"name\": \"Web Scraper\",\n      \"type\": \"pipeline\",\n      \"emoji\": \"🕷️\",\n      \"subtitle\": \"Crawl\",\n      \"position\": [120, 250]\n    },\n    {\n      \"id\": \"parser\",\n      \"name\": \"Parser\",\n      \"type\": \"pipeline\",\n      \"emoji\": \"📄\",\n      \"subtitle\": \"Extract\",\n      \"position\": [100, 370]\n    },\n    {\n      \"id\": \"embedder\",\n      \"name\": \"Embedder\",\n      \"type\": \"pipeline\",\n      \"emoji\": \"🧮\",\n      \"subtitle\": \"Vectorize\",\n      \"position\": [110, 490]\n    },\n    {\n      \"id\": \"indexer\",\n      \"name\": \"Indexer\",\n      \"type\": \"pipeline\",\n      \"emoji\": \"📇\",\n      \"subtitle\": \"Store\",\n      \"position\": [140, 600]\n    },\n    {\n      \"id\": \"scheduler\",\n      \"name\": \"Scheduler\",\n      \"type\": \"ops\",\n      \"emoji\": \"⏰\",\n      \"subtitle\": \"Cron Jobs\",\n      \"position\": [1050, 550]\n    },\n    {\n      \"id\": \"monitor\",\n      \"name\": \"Monitor\",\n      \"type\": \"ops\",\n      \"emoji\": \"📊\",\n      \"subtitle\": \"Health Checks\",\n      \"position\": [1080, 680]\n    },\n    {\n      \"id\": \"cache\",\n      \"name\": \"Cache\",\n      \"type\": \"system\",\n      \"emoji\": \"⚡\",\n      \"subtitle\": \"Redis\",\n      \"position\": [750, 800]\n    },\n    {\n      \"id\": \"skills\",\n      \"name\": \"Skills Library\",\n      \"type\": \"system\",\n      \"emoji\": \"🧰\",\n      \"subtitle\": \"Extensible Tools\",\n      \"position\": [300, 140]\n    },\n    {\n      \"id\": \"evolver\",\n      \"name\": \"Self-Improver\",\n      \"type\": \"agent\",\n      \"emoji\": \"🧬\",\n      \"subtitle\": \"Auto-Optimize\",\n      \"position\": [160, 80]\n    }\n  ],\n  \"connections\": [\n    { \"from\": \"orchestrator\", \"to\": \"chat\", \"type\": \"hub\" },\n    { \"from\": \"orchestrator\", \"to\": \"database\", \"type\": \"hub\" },\n    { \"from\": \"orchestrator\", \"to\": \"api_gateway\", \"type\": \"hub\" },\n    { \"from\": \"orchestrator\", \"to\": \"cache\", \"type\": \"hub\" },\n    { \"from\": \"orchestrator\", \"to\": \"skills\", \"type\": \"hub\" },\n    { \"from\": \"orchestrator\", \"to\": \"researcher\", \"type\": \"core\" },\n    { \"from\": \"orchestrator\", \"to\": \"writer\", \"type\": \"core\" },\n    { \"from\": \"orchestrator\", \"to\": \"reviewer\", \"type\": \"core\" },\n    { \"from\": \"orchestrator\", \"to\": \"web_scraper\", \"type\": \"core\" },\n    { \"from\": \"orchestrator\", \"to\": \"scheduler\", \"type\": \"core\" },\n    { \"from\": \"orchestrator\", \"to\": \"monitor\", \"type\": \"core\" },\n    { \"from\": \"user\", \"to\": \"chat\", \"type\": \"sys\" },\n    { \"from\": \"researcher\", \"to\": \"database\", \"type\": \"cross\" },\n    { \"from\": \"researcher\", \"to\": \"api_gateway\", \"type\": \"cross\" },\n    { \"from\": \"writer\", \"to\": \"cache\", \"type\": \"cross\" },\n    { \"from\": \"reviewer\", \"to\": \"database\", \"type\": \"cross\" },\n    { \"from\": \"reviewer\", \"to\": \"chat\", \"type\": \"cross\" },\n    { \"from\": \"skills\", \"to\": \"evolver\", \"type\": \"core\" },\n    { \"from\": \"scheduler\", \"to\": \"database\", \"type\": \"cross\" },\n    { \"from\": \"monitor\", \"to\": \"database\", \"type\": \"cross\" },\n    { \"from\": \"web_scraper\", \"to\": \"parser\", \"type\": \"cluster\" },\n    { \"from\": \"parser\", \"to\": \"embedder\", \"type\": \"cluster\" },\n    { \"from\": \"embedder\", \"to\": \"indexer\", \"type\": \"cluster\" },\n    { \"from\": \"indexer\", \"to\": \"database\", \"type\": \"cluster\" }\n  ],\n  \"pipelines\": {\n    \"ingestion\": [\"web_scraper\", \"parser\", \"embedder\", \"indexer\"]\n  }\n}\n\nArchive v1.0.1: 6 files, 13643 bytes\n\nFiles: assets/example-topology.json (4787b), references/customization.md (920b), references/schema.md (3460b), scripts/generate.py (25418b), SKILL.md (4467b), _meta.json (144b)\n\nFile v1.0.1:SKILL.md\n\n---\nname: agent-topology\ndescription: 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).\n---\n\n# Agent Topology\n\nGenerate interactive architecture diagrams from a JSON topology definition.\n\n## Quick Start\n\n1. Create a topology JSON file (see `references/schema.md` for full spec)\n2. Run the generator:\n\n```bash\npython3 scripts/generate.py topology.json -o diagram.html\n```\n\n3. Output is a self-contained HTML file with embedded SVG, CSS, and JS.\n\n## Topology JSON Format\n\n```json\n{\n  \"title\": \"My Agent System\",\n  \"theme\": \"dark\",\n  \"viewBox\": [1220, 1000],\n  \"zones\": {\n    \"center\": { \"label\": \"Orchestration\" },\n    \"left\": { \"label\": \"Content Pipeline\" },\n    \"right\": { \"label\": \"Infrastructure\" }\n  },\n  \"nodes\": [\n    {\n      \"id\": \"orchestrator\",\n      \"name\": \"Main Agent\",\n      \"type\": \"orchestrator\",\n      \"emoji\": \"🤖\",\n      \"subtitle\": \"Central Hub\",\n      \"position\": [610, 480],\n      \"radius\": 58\n    },\n    {\n      \"id\": \"tool_agent\",\n      \"name\": \"Tool Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"🔧\",\n      \"subtitle\": \"Executes tools\",\n      \"position\": [400, 300],\n      \"radius\": 32\n    }\n  ],\n  \"connections\": [\n    { \"from\": \"orchestrator\", \"to\": \"tool_agent\", \"type\": \"core\" }\n  ],\n  \"pipelines\": [\"tool_agent\", \"processor\", \"output\"]\n}\n```\n\n### Node Types\n\n| Type | Visual | Use for |\n|------|--------|---------|\n| `orchestrator` | Large glowing circle | Central agent/router |\n| `agent` | Medium teal circle | Sub-agents, workers |\n| `system` | Medium muted circle | External systems (DBs, APIs) |\n| `pipeline` | Small bright circle | Sequential pipeline steps |\n| `ops` | Small circle | Operational/maintenance agents |\n| `human` | Medium circle | Human-in-the-loop nodes |\n\n### Connection Types\n\n| Type | Style | Use for |\n|------|-------|---------|\n| `hub` | Bright, thicker | Orchestrator ↔ systems |\n| `core` | Medium brightness | Orchestrator ↔ agents |\n| `cross` | Subtle | Agent ↔ system (data flow) |\n| `cluster` | Pipeline style | Sequential chain steps |\n| `sys` | Dashed subtle | System ↔ system |\n\n### Pipelines\n\nThe `pipelines` array lists node IDs that form sequential chains. Hovering any pipeline node highlights the full chain transitively (not just direct connections).\n\nMultiple pipelines supported:\n```json\n\"pipelines\": {\n  \"content\": [\"feed_hunter\", \"synthesizer\", \"writer\", \"website\"],\n  \"deploy\": [\"builder\", \"tester\", \"deployer\"]\n}\n```\n\n## Auto-Layout Mode\n\nIf positions are omitted, the generator auto-places nodes by zone:\n\n```json\n{\n  \"nodes\": [\n    { \"id\": \"main\", \"type\": \"orchestrator\", \"zone\": \"center\" },\n    { \"id\": \"researcher\", \"type\": \"agent\", \"zone\": \"top-left\" },\n    { \"id\": \"db\", \"type\": \"system\", \"zone\": \"right\" }\n  ]\n}\n```\n\nAvailable zones: `center`, `top-left`, `top-right`, `left`, `right`, `bottom-left`, `bottom-right`, `bottom`.\n\n## Theming\n\n```json\n{\n  \"theme\": \"dark\",\n  \"colors\": {\n    \"accent\": \"#5d9b93\",\n    \"background\": \"#0a0e14\",\n    \"text\": \"#c8d6e0\",\n    \"nodeStroke\": \"rgba(93,155,147,0.4)\"\n  },\n  \"font\": \"Inter, system-ui, sans-serif\"\n}\n```\n\nBuilt-in themes: `dark` (default), `light`. Override any color individually.\n\n## Output Formats\n\n```bash\n# Self-contained HTML page (default)\npython3 scripts/generate.py topology.json -o diagram.html\n\n# SVG only (for embedding)\npython3 scripts/generate.py topology.json -o diagram.svg --format svg\n\n# SVG paths only (for injection into existing page)\npython3 scripts/generate.py topology.json --format paths\n```\n\n## Features\n\n- **Edge-to-edge connections**: Lines connect at circle perimeters, not centers\n- **Curved bezier paths**: All connections use smooth cubic bezier curves\n- **Hover highlighting**: Hover a node to highlight its connections; dims everything else\n- **Pipeline walk**: Hovering a pipeline node lights up the full sequential chain\n- **Path tooltips**: Hover a connection line to see \"Source → Target\"\n- **Mobile/tap support**: Tap works like hover with auto-dismiss\n- **Responsive**: SVG scales to container width\n- **Zero dependencies**: Output is a single self-contained HTML file\n\n## Advanced\n\n- For custom CSS injection and embedding options, see `references/customization.md`\n\nFile v1.0.1:_meta.json\n\n{\n  \"ownerId\": \"kn724j3rntp039atcv39w7p0hs80kdq4\",\n  \"slug\": \"agent-topology-visualizer\",\n  \"version\": \"1.0.1\",\n  \"publishedAt\": 1771526410802\n}\n\nFile v1.0.1:references/customization.md\n\n# Customization Guide\n\n## Custom CSS\n\nAdd a `css` field to your topology JSON to inject custom styles into the output:\n\n```json\n{\n  \"css\": \".arch-svg { filter: saturate(1.2); }\"\n}\n```\n\nThe CSS is injected into a `<style>` block inside the HTML output. Only use CSS you've written or reviewed.\n\n## Embedding in Existing Pages\n\nUse `--format svg` to get just the SVG element, then embed it in your own page:\n\n```html\n<div class=\"my-diagram-container\">\n  <!-- paste SVG output here -->\n</div>\n```\n\nThe `--format paths` option outputs only the `<path>` elements for injection into an existing SVG.\n\n## Background Options\n\nThe default dark theme includes a constellation-style star field. Control it with:\n\n```json\n{\n  \"background\": {\n    \"stars\": true,\n    \"starCount\": 150,\n    \"starColor\": \"rgba(200,214,224,0.3)\"\n  }\n}\n```\n\nSet `\"stars\": false` to disable the star field for embedding in pages with their own background.\n\nFile v1.0.1:references/schema.md\n\n# Topology JSON Schema Reference\n\n## Full Schema\n\n```json\n{\n  \"title\": \"string (required) — diagram title\",\n  \"theme\": \"dark | light (default: dark)\",\n  \"viewBox\": [width, height] (default: [1220, 1000]),\n  \n  \"colors\": {\n    \"accent\": \"#hex (default: #5d9b93)\",\n    \"background\": \"#hex (default: #0a0e14)\",\n    \"text\": \"#hex (default: #c8d6e0)\",\n    \"nodeStroke\": \"rgba/hex (default: rgba(93,155,147,0.4))\",\n    \"connectionHub\": \"rgba/hex\",\n    \"connectionCore\": \"rgba/hex\",\n    \"connectionCross\": \"rgba/hex\"\n  },\n  \n  \"font\": \"string (default: Inter, system-ui, sans-serif)\",\n  \n  \"zones\": {\n    \"zone-name\": {\n      \"label\": \"string — display label\",\n      \"bounds\": [x, y, width, height] (optional — for auto-layout)\n    }\n  },\n  \n  \"nodes\": [\n    {\n      \"id\": \"string (required) — unique identifier, lowercase with underscores\",\n      \"name\": \"string (required) — display name\",\n      \"type\": \"orchestrator | agent | system | pipeline | ops | human\",\n      \"emoji\": \"string (optional) — emoji icon\",\n      \"subtitle\": \"string (optional) — text below name\",\n      \"position\": [x, y] (optional if zone provided),\n      \"zone\": \"string (optional) — auto-layout zone name\",\n      \"radius\": \"number (optional — default by type: orchestrator=58, system=44, agent=32, pipeline=25, ops=25, human=38)\"\n    }\n  ],\n  \n  \"connections\": [\n    {\n      \"from\": \"string (required) — source node id\",\n      \"to\": \"string (required) — target node id\",\n      \"type\": \"hub | core | cross | cluster | sys (default: core)\"\n    }\n  ],\n  \n  \"pipelines\": {\n    \"pipeline-name\": [\"node_id_1\", \"node_id_2\", \"node_id_3\"]\n  }\n}\n```\n\n## Node Type Defaults\n\n| Type | Radius | Fill Opacity | Stroke Color | Glow |\n|------|--------|-------------|--------------|------|\n| orchestrator | 58 | 0.15 | accent | Yes, animated pulse |\n| agent | 32 | 0.12 | accent | No |\n| system | 44 | 0.08 | muted accent | No |\n| pipeline | 25 | 0.12 | bright accent | No |\n| ops | 25 | 0.06 | muted | No |\n| human | 38 | 0.10 | accent | No |\n\n## Connection Type Styles\n\n| Type | Stroke Opacity | Stroke Width | Dash | Use |\n|------|---------------|-------------|------|-----|\n| hub | 0.35 | 2.0 | solid | Orchestrator ↔ major systems |\n| core | 0.25 | 1.5 | solid | Orchestrator ↔ agents |\n| cross | 0.18 | 1.2 | solid | Agent ↔ system data flows |\n| cluster | 0.30 | 1.5 | solid | Pipeline sequential chain |\n| sys | 0.15 | 1.0 | 4,4 dash | System ↔ system |\n\n## Edge-to-Edge Math\n\nConnections 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:\n\n1. Calculates the angle between node centers\n2. Projects start/end points to circle edge using `(cx + r*cos(θ), cy + r*sin(θ))`\n3. Computes control points perpendicular to the center line for natural curves\n4. Adjusts curve intensity based on distance between nodes\n\n## Optional Fields\n\n- `css` (string): Custom CSS injected into the output `<style>` block. Only styles, no scripts.\n- `background.stars` (bool): Enable/disable star field canvas (default: true)\n- `background.starCount` (int): Number of stars (default: 150)\n- `background.starColor` (string): Star fill color\n\n## Validation Rules\n\n- All `from`/`to` in connections must reference valid node `id`s\n- All node ids in `pipelines` must exist in `nodes`\n- Node `id`s must be unique\n- At least one node required\n- `orchestrator` type nodes limited to 3 per diagram\n\nFile v1.0.1:assets/example-topology.json\n\n{\n  \"title\": \"AI Research Assistant — Agent Architecture\",\n  \"theme\": \"dark\",\n  \"viewBox\": [1220, 1000],\n  \"colors\": {\n    \"accent\": \"#5d9b93\"\n  },\n  \"nodes\": [\n    {\n      \"id\": \"orchestrator\",\n      \"name\": \"Orchestrator\",\n      \"type\": \"orchestrator\",\n      \"emoji\": \"🤖\",\n      \"subtitle\": \"CENTRAL AGENT\",\n      \"position\": [610, 480],\n      \"radius\": 58\n    },\n    {\n      \"id\": \"user\",\n      \"name\": \"User\",\n      \"type\": \"human\",\n      \"emoji\": \"👤\",\n      \"subtitle\": \"Human-in-the-Loop\",\n      \"position\": [900, 100]\n    },\n    {\n      \"id\": \"chat\",\n      \"name\": \"Chat Interface\",\n      \"type\": \"system\",\n      \"emoji\": \"💬\",\n      \"subtitle\": \"Messaging\",\n      \"position\": [780, 160]\n    },\n    {\n      \"id\": \"researcher\",\n      \"name\": \"Research Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"🔍\",\n      \"subtitle\": \"Deep Dives\",\n      \"position\": [350, 280]\n    },\n    {\n      \"id\": \"writer\",\n      \"name\": \"Writer Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"✍️\",\n      \"subtitle\": \"Content Creation\",\n      \"position\": [380, 650]\n    },\n    {\n      \"id\": \"reviewer\",\n      \"name\": \"Review Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"🔎\",\n      \"subtitle\": \"Quality Check\",\n      \"position\": [850, 600]\n    },\n    {\n      \"id\": \"database\",\n      \"name\": \"Vector DB\",\n      \"type\": \"system\",\n      \"emoji\": \"🗄️\",\n      \"subtitle\": \"Embeddings Store\",\n      \"position\": [1000, 400]\n    },\n    {\n      \"id\": \"api_gateway\",\n      \"name\": \"API Gateway\",\n      \"type\": \"system\",\n      \"emoji\": \"🌐\",\n      \"subtitle\": \"External APIs\",\n      \"position\": [950, 260]\n    },\n    {\n      \"id\": \"web_scraper\",\n      \"name\": \"Web Scraper\",\n      \"type\": \"pipeline\",\n      \"emoji\": \"🕷️\",\n      \"subtitle\": \"Crawl\",\n      \"position\": [120, 250]\n    },\n    {\n      \"id\": \"parser\",\n      \"name\": \"Parser\",\n      \"type\": \"pipeline\",\n      \"emoji\": \"📄\",\n      \"subtitle\": \"Extract\",\n      \"position\": [100, 370]\n    },\n    {\n      \"id\": \"embedder\",\n      \"name\": \"Embedder\",\n      \"type\": \"pipeline\",\n      \"emoji\": \"🧮\",\n      \"subtitle\": \"Vectorize\",\n      \"position\": [110, 490]\n    },\n    {\n      \"id\": \"indexer\",\n      \"name\": \"Indexer\",\n      \"type\": \"pipeline\",\n      \"emoji\": \"📇\",\n      \"subtitle\": \"Store\",\n      \"position\": [140, 600]\n    },\n    {\n      \"id\": \"scheduler\",\n      \"name\": \"Scheduler\",\n      \"type\": \"ops\",\n      \"emoji\": \"⏰\",\n      \"subtitle\": \"Cron Jobs\",\n      \"position\": [1050, 550]\n    },\n    {\n      \"id\": \"monitor\",\n      \"name\": \"Monitor\",\n      \"type\": \"ops\",\n      \"emoji\": \"📊\",\n      \"subtitle\": \"Health Checks\",\n      \"position\": [1080, 680]\n    },\n    {\n      \"id\": \"cache\",\n      \"name\": \"Cache\",\n      \"type\": \"system\",\n      \"emoji\": \"⚡\",\n      \"subtitle\": \"Redis\",\n      \"position\": [750, 800]\n    },\n    {\n      \"id\": \"skills\",\n      \"name\": \"Skills Library\",\n      \"type\": \"system\",\n      \"emoji\": \"🧰\",\n      \"subtitle\": \"Extensible Tools\",\n      \"position\": [300, 140]\n    },\n    {\n      \"id\": \"evolver\",\n      \"name\": \"Self-Improver\",\n      \"type\": \"agent\",\n      \"emoji\": \"🧬\",\n      \"subtitle\": \"Auto-Optimize\",\n      \"position\": [160, 80]\n    }\n  ],\n  \"connections\": [\n    { \"from\": \"orchestrator\", \"to\": \"chat\", \"type\": \"hub\" },\n    { \"from\": \"orchestrator\", \"to\": \"database\", \"type\": \"hub\" },\n    { \"from\": \"orchestrator\", \"to\": \"api_gateway\", \"type\": \"hub\" },\n    { \"from\": \"orchestrator\", \"to\": \"cache\", \"type\": \"hub\" },\n    { \"from\": \"orchestrator\", \"to\": \"skills\", \"type\": \"hub\" },\n    { \"from\": \"orchestrator\", \"to\": \"researcher\", \"type\": \"core\" },\n    { \"from\": \"orchestrator\", \"to\": \"writer\", \"type\": \"core\" },\n    { \"from\": \"orchestrator\", \"to\": \"reviewer\", \"type\": \"core\" },\n    { \"from\": \"orchestrator\", \"to\": \"web_scraper\", \"type\": \"core\" },\n    { \"from\": \"orchestrator\", \"to\": \"scheduler\", \"type\": \"core\" },\n    { \"from\": \"orchestrator\", \"to\": \"monitor\", \"type\": \"core\" },\n    { \"from\": \"user\", \"to\": \"chat\", \"type\": \"sys\" },\n    { \"from\": \"researcher\", \"to\": \"database\", \"type\": \"cross\" },\n    { \"from\": \"researcher\", \"to\": \"api_gateway\", \"type\": \"cross\" },\n    { \"from\": \"writer\", \"to\": \"cache\", \"type\": \"cross\" },\n    { \"from\": \"reviewer\", \"to\": \"database\", \"type\": \"cross\" },\n    { \"from\": \"reviewer\", \"to\": \"chat\", \"type\": \"cross\" },\n    { \"from\": \"skills\", \"to\": \"evolver\", \"type\": \"core\" },\n    { \"from\": \"scheduler\", \"to\": \"database\", \"type\": \"cross\" },\n    { \"from\": \"monitor\", \"to\": \"database\", \"type\": \"cross\" },\n    { \"from\": \"web_scraper\", \"to\": \"parser\", \"type\": \"cluster\" },\n    { \"from\": \"parser\", \"to\": \"embedder\", \"type\": \"cluster\" },\n    { \"from\": \"embedder\", \"to\": \"indexer\", \"type\": \"cluster\" },\n    { \"from\": \"indexer\", \"to\": \"database\", \"type\": \"cluster\" }\n  ],\n  \"pipelines\": {\n    \"ingestion\": [\"web_scraper\", \"parser\", \"embedder\", \"indexer\"]\n  }\n}\n\nArchive v1.0.0: 9 files, 17982 bytes\n\nFiles: assets/example-topology.json (4787b), references/customization.md (1168b), references/openclaw-import.md (834b), references/schema.md (3151b), references/self-generate.md (2416b), scripts/generate.py (25443b), scripts/import-openclaw.py (5045b), SKILL.md (4997b), _meta.json (144b)\n\nFile v1.0.0:SKILL.md\n\n---\nname: agent-topology\ndescription: 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).\n---\n\n# Agent Topology\n\nGenerate interactive architecture diagrams from a JSON topology definition.\n\n## Quick Start\n\n1. Create a topology JSON file (see `references/schema.md` for full spec)\n2. Run the generator:\n\n```bash\npython3 scripts/generate.py topology.json -o diagram.html\n```\n\n3. Output is a self-contained HTML file with embedded SVG, CSS, and JS.\n\n## Topology JSON Format\n\n```json\n{\n  \"title\": \"My Agent System\",\n  \"theme\": \"dark\",\n  \"viewBox\": [1220, 1000],\n  \"zones\": {\n    \"center\": { \"label\": \"Orchestration\" },\n    \"left\": { \"label\": \"Content Pipeline\" },\n    \"right\": { \"label\": \"Infrastructure\" }\n  },\n  \"nodes\": [\n    {\n      \"id\": \"orchestrator\",\n      \"name\": \"Main Agent\",\n      \"type\": \"orchestrator\",\n      \"emoji\": \"🤖\",\n      \"subtitle\": \"Central Hub\",\n      \"position\": [610, 480],\n      \"radius\": 58\n    },\n    {\n      \"id\": \"tool_agent\",\n      \"name\": \"Tool Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"🔧\",\n      \"subtitle\": \"Executes tools\",\n      \"position\": [400, 300],\n      \"radius\": 32\n    }\n  ],\n  \"connections\": [\n    { \"from\": \"orchestrator\", \"to\": \"tool_agent\", \"type\": \"core\" }\n  ],\n  \"pipelines\": [\"tool_agent\", \"processor\", \"output\"]\n}\n```\n\n### Node Types\n\n| Type | Visual | Use for |\n|------|--------|---------|\n| `orchestrator` | Large glowing circle | Central agent/router |\n| `agent` | Medium teal circle | Sub-agents, workers |\n| `system` | Medium muted circle | External systems (DBs, APIs) |\n| `pipeline` | Small bright circle | Sequential pipeline steps |\n| `ops` | Small circle | Operational/maintenance agents |\n| `human` | Medium circle | Human-in-the-loop nodes |\n\n### Connection Types\n\n| Type | Style | Use for |\n|------|-------|---------|\n| `hub` | Bright, thicker | Orchestrator ↔ systems |\n| `core` | Medium brightness | Orchestrator ↔ agents |\n| `cross` | Subtle | Agent ↔ system (data flow) |\n| `cluster` | Pipeline style | Sequential chain steps |\n| `sys` | Dashed subtle | System ↔ system |\n\n### Pipelines\n\nThe `pipelines` array lists node IDs that form sequential chains. Hovering any pipeline node highlights the full chain transitively (not just direct connections).\n\nMultiple pipelines supported:\n```json\n\"pipelines\": {\n  \"content\": [\"feed_hunter\", \"synthesizer\", \"writer\", \"website\"],\n  \"deploy\": [\"builder\", \"tester\", \"deployer\"]\n}\n```\n\n## Auto-Layout Mode\n\nIf positions are omitted, the generator auto-places nodes by zone:\n\n```json\n{\n  \"nodes\": [\n    { \"id\": \"main\", \"type\": \"orchestrator\", \"zone\": \"center\" },\n    { \"id\": \"researcher\", \"type\": \"agent\", \"zone\": \"top-left\" },\n    { \"id\": \"db\", \"type\": \"system\", \"zone\": \"right\" }\n  ]\n}\n```\n\nAvailable zones: `center`, `top-left`, `top-right`, `left`, `right`, `bottom-left`, `bottom-right`, `bottom`.\n\n## Theming\n\n```json\n{\n  \"theme\": \"dark\",\n  \"colors\": {\n    \"accent\": \"#5d9b93\",\n    \"background\": \"#0a0e14\",\n    \"text\": \"#c8d6e0\",\n    \"nodeStroke\": \"rgba(93,155,147,0.4)\"\n  },\n  \"font\": \"Inter, system-ui, sans-serif\"\n}\n```\n\nBuilt-in themes: `dark` (default), `light`. Override any color individually.\n\n## Output Formats\n\n```bash\n# Self-contained HTML page (default)\npython3 scripts/generate.py topology.json -o diagram.html\n\n# SVG only (for embedding)\npython3 scripts/generate.py topology.json -o diagram.svg --format svg\n\n# SVG paths only (for injection into existing page)\npython3 scripts/generate.py topology.json --format paths\n```\n\n## Features\n\n- **Edge-to-edge connections**: Lines connect at circle perimeters, not centers\n- **Curved bezier paths**: All connections use smooth cubic bezier curves\n- **Hover highlighting**: Hover a node to highlight its connections; dims everything else\n- **Pipeline walk**: Hovering a pipeline node lights up the full sequential chain\n- **Path tooltips**: Hover a connection line to see \"Source → Target\"\n- **Mobile/tap support**: Tap works like hover with auto-dismiss\n- **Responsive**: SVG scales to container width\n- **Zero dependencies**: Output is a single self-contained HTML file\n\n## Self-Generation\n\nAgents should proactively maintain their own architecture diagram. See `references/self-generate.md` for:\n- When to auto-regenerate (new agents added, connections changed, 7+ day staleness)\n- How to track generation state in memory files\n- Heartbeat/periodic check patterns for keeping diagrams current\n- Post-change hooks to update topology after adding integrations\n\nStore `topology.json` in your workspace and treat it as a living document.\n\n## Advanced\n\n- For custom CSS or JS injection, see `references/customization.md`\n- For generating from OpenClaw cron configs, see `references/openclaw-import.md`\n\nFile v1.0.0:_meta.json\n\n{\n  \"ownerId\": \"kn724j3rntp039atcv39w7p0hs80kdq4\",\n  \"slug\": \"agent-topology-visualizer\",\n  \"version\": \"1.0.0\",\n  \"publishedAt\": 1771526125858\n}\n\nFile v1.0.0:references/customization.md\n\n# Customization Guide\n\n## Custom CSS Injection\n\nAdd a `css` field to your topology JSON to inject custom styles:\n\n```json\n{\n  \"css\": \".arch-svg { filter: saturate(1.2); }\\n.scout-group { animation: none; }\"\n}\n```\n\nThe CSS is injected into a `<style>` block inside the HTML output.\n\n## Custom JS Injection\n\nAdd a `js` field for custom behavior:\n\n```json\n{\n  \"js\": \"document.querySelectorAll('[data-nid]').forEach(n => n.addEventListener('click', () => console.log(n.dataset.nid)));\"\n}\n```\n\n## Embedding in Existing Pages\n\nUse `--format svg` to get just the SVG element, then embed it:\n\n```html\n<div class=\"my-diagram-container\">\n  <!-- paste SVG output here -->\n</div>\n<script src=\"agent-topology-hover.js\"></script>\n```\n\nThe `--format paths` option outputs only the `<path>` elements for injection into an existing SVG.\n\n## Background Options\n\nThe default dark theme includes a constellation-style star field. Control it with:\n\n```json\n{\n  \"background\": {\n    \"stars\": true,\n    \"starCount\": 150,\n    \"starColor\": \"rgba(200,214,224,0.3)\",\n    \"gradient\": true\n  }\n}\n```\n\nSet `\"stars\": false` to disable the star field for embedding in pages with their own background.\n\nFile v1.0.0:references/openclaw-import.md\n\n# OpenClaw Auto-Import\n\nGenerate a topology diagram directly from an OpenClaw setup by introspecting cron jobs and agent configs.\n\n## Usage\n\n```bash\npython3 scripts/import-openclaw.py --output topology.json\n```\n\nThis script:\n1. Lists all cron jobs via the `cron` tool\n2. Identifies agents, their targets (Telegram, email, etc.), and scheduling\n3. Reads AGENTS.md, TOOLS.md for system references\n4. Generates a topology.json with nodes and connections inferred from real config\n\nThen generate the diagram:\n```bash\npython3 scripts/generate.py topology.json -o diagram.html\n```\n\n## Manual Enrichment\n\nThe auto-import creates a baseline. Enrich it by:\n- Adjusting positions for visual clarity\n- Adding cross-connections the importer can't infer\n- Defining pipelines for sequential workflows\n- Customizing theme colors to match your brand\n\nFile v1.0.0:references/schema.md\n\n# Topology JSON Schema Reference\n\n## Full Schema\n\n```json\n{\n  \"title\": \"string (required) — diagram title\",\n  \"theme\": \"dark | light (default: dark)\",\n  \"viewBox\": [width, height] (default: [1220, 1000]),\n  \n  \"colors\": {\n    \"accent\": \"#hex (default: #5d9b93)\",\n    \"background\": \"#hex (default: #0a0e14)\",\n    \"text\": \"#hex (default: #c8d6e0)\",\n    \"nodeStroke\": \"rgba/hex (default: rgba(93,155,147,0.4))\",\n    \"connectionHub\": \"rgba/hex\",\n    \"connectionCore\": \"rgba/hex\",\n    \"connectionCross\": \"rgba/hex\"\n  },\n  \n  \"font\": \"string (default: Inter, system-ui, sans-serif)\",\n  \n  \"zones\": {\n    \"zone-name\": {\n      \"label\": \"string — display label\",\n      \"bounds\": [x, y, width, height] (optional — for auto-layout)\n    }\n  },\n  \n  \"nodes\": [\n    {\n      \"id\": \"string (required) — unique identifier, lowercase with underscores\",\n      \"name\": \"string (required) — display name\",\n      \"type\": \"orchestrator | agent | system | pipeline | ops | human\",\n      \"emoji\": \"string (optional) — emoji icon\",\n      \"subtitle\": \"string (optional) — text below name\",\n      \"position\": [x, y] (optional if zone provided),\n      \"zone\": \"string (optional) — auto-layout zone name\",\n      \"radius\": \"number (optional — default by type: orchestrator=58, system=44, agent=32, pipeline=25, ops=25, human=38)\"\n    }\n  ],\n  \n  \"connections\": [\n    {\n      \"from\": \"string (required) — source node id\",\n      \"to\": \"string (required) — target node id\",\n      \"type\": \"hub | core | cross | cluster | sys (default: core)\"\n    }\n  ],\n  \n  \"pipelines\": {\n    \"pipeline-name\": [\"node_id_1\", \"node_id_2\", \"node_id_3\"]\n  }\n}\n```\n\n## Node Type Defaults\n\n| Type | Radius | Fill Opacity | Stroke Color | Glow |\n|------|--------|-------------|--------------|------|\n| orchestrator | 58 | 0.15 | accent | Yes, animated pulse |\n| agent | 32 | 0.12 | accent | No |\n| system | 44 | 0.08 | muted accent | No |\n| pipeline | 25 | 0.12 | bright accent | No |\n| ops | 25 | 0.06 | muted | No |\n| human | 38 | 0.10 | accent | No |\n\n## Connection Type Styles\n\n| Type | Stroke Opacity | Stroke Width | Dash | Use |\n|------|---------------|-------------|------|-----|\n| hub | 0.35 | 2.0 | solid | Orchestrator ↔ major systems |\n| core | 0.25 | 1.5 | solid | Orchestrator ↔ agents |\n| cross | 0.18 | 1.2 | solid | Agent ↔ system data flows |\n| cluster | 0.30 | 1.5 | solid | Pipeline sequential chain |\n| sys | 0.15 | 1.0 | 4,4 dash | System ↔ system |\n\n## Edge-to-Edge Math\n\nConnections 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:\n\n1. Calculates the angle between node centers\n2. Projects start/end points to circle edge using `(cx + r*cos(θ), cy + r*sin(θ))`\n3. Computes control points perpendicular to the center line for natural curves\n4. Adjusts curve intensity based on distance between nodes\n\n## Validation Rules\n\n- All `from`/`to` in connections must reference valid node `id`s\n- All node ids in `pipelines` must exist in `nodes`\n- Node `id`s must be unique\n- At least one node required\n- `orchestrator` type nodes limited to 3 per diagram\n\nFile v1.0.0:references/self-generate.md\n\n# Self-Generation Guide\n\nAgents can proactively generate and maintain their own architecture diagrams without being asked.\n\n## When to Self-Generate\n\nTrigger a topology update when:\n- A new agent, cron job, or integration is added\n- An agent is removed or disabled\n- System connections change (new API, new database, etc.)\n- It's been 7+ days since last generation\n- The human asks \"what does your setup look like?\"\n\n## How to Track\n\nAdd an entry to your memory file (MEMORY.md, memory/YYYY-MM-DD.md, or equivalent):\n\n```markdown\n## Architecture Diagram\n- **Last generated:** 2026-02-19\n- **Topology file:** topology.json\n- **Output:** architecture.html\n- **Node count:** 15\n- **Trigger:** Added new research agent\n```\n\nCheck this during heartbeats or periodic maintenance. If stale (>7 days or after changes), regenerate.\n\n## Self-Introspection Pattern\n\nTo build your own topology, introspect what you know:\n\n1. **List your agents** — What cron jobs, sub-agents, or workers do you manage?\n2. **List your systems** — What databases, APIs, messaging platforms do you connect to?\n3. **Map the connections** — Which agents talk to which systems? What's the data flow?\n4. **Identify pipelines** — Are there sequential chains (A → B → C)?\n5. **Find the human** — Where does the human interact? (chat, dashboard, email)\n\nBuild the topology JSON from this knowledge, then run the generator.\n\n## Example: Self-Documenting Heartbeat Task\n\n```markdown\n# In HEARTBEAT.md or equivalent periodic check:\n\n## Architecture Diagram Maintenance\nIf topology has changed since last generation (new agents, removed connections, etc.):\n1. Introspect current cron jobs and integrations\n2. Update topology.json with changes\n3. Run: python3 skills/agent-topology/scripts/generate.py topology.json -o architecture.html\n4. Log the update in memory\n```\n\n## Example: Post-Change Hook\n\nAfter adding a new agent or integration, append to your task:\n```\nAlso update the architecture diagram:\n1. Add the new node to topology.json\n2. Add its connections\n3. Regenerate: python3 skills/agent-topology/scripts/generate.py topology.json -o architecture.html\n```\n\n## Keeping Topology in Sync\n\nStore `topology.json` in your workspace (not /tmp). It's your source of truth.\nWhen regenerating, read the existing topology.json first and modify it rather than rebuilding from scratch — this preserves manual position tweaks and custom theming.\n\nFile v1.0.0:assets/example-topology.json\n\n{\n  \"title\": \"AI Research Assistant — Agent Architecture\",\n  \"theme\": \"dark\",\n  \"viewBox\": [1220, 1000],\n  \"colors\": {\n    \"accent\": \"#5d9b93\"\n  },\n  \"nodes\": [\n    {\n      \"id\": \"orchestrator\",\n      \"name\": \"Orchestrator\",\n      \"type\": \"orchestrator\",\n      \"emoji\": \"🤖\",\n      \"subtitle\": \"CENTRAL AGENT\",\n      \"position\": [610, 480],\n      \"radius\": 58\n    },\n    {\n      \"id\": \"user\",\n      \"name\": \"User\",\n      \"type\": \"human\",\n      \"emoji\": \"👤\",\n      \"subtitle\": \"Human-in-the-Loop\",\n      \"position\": [900, 100]\n    },\n    {\n      \"id\": \"chat\",\n      \"name\": \"Chat Interface\",\n      \"type\": \"system\",\n      \"emoji\": \"💬\",\n      \"subtitle\": \"Messaging\",\n      \"position\": [780, 160]\n    },\n    {\n      \"id\": \"researcher\",\n      \"name\": \"Research Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"🔍\",\n      \"subtitle\": \"Deep Dives\",\n      \"position\": [350, 280]\n    },\n    {\n      \"id\": \"writer\",\n      \"name\": \"Writer Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"✍️\",\n      \"subtitle\": \"Content Creation\",\n      \"position\": [380, 650]\n    },\n    {\n      \"id\": \"reviewer\",\n      \"name\": \"Review Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"🔎\",\n      \"subtitle\": \"Quality Check\",\n      \"position\": [850, 600]\n    },\n    {\n      \"id\": \"database\",\n      \"name\": \"Vector DB\",\n      \"type\": \"system\",\n      \"emoji\": \"🗄️\",\n      \"subtitle\": \"Embeddings Store\",\n      \"position\": [1000, 400]\n    },\n    {\n      \"id\": \"api_gateway\",\n      \"name\": \"API Gateway\",\n      \"type\": \"system\",\n      \"emoji\": \"🌐\",\n      \"subtitle\": \"External APIs\",\n      \"position\": [950, 260]\n    },\n    {\n      \"id\": \"web_scraper\",\n      \"name\": \"Web Scraper\",\n      \"type\": \"pipeline\",\n      \"emoji\": \"🕷️\",\n      \"subtitle\": \"Crawl\",\n      \"position\": [120, 250]\n    },\n    {\n      \"id\": \"parser\",\n      \"name\": \"Parser\",\n      \"type\": \"pipeline\",\n      \"emoji\": \"📄\",\n      \"subtitle\": \"Extract\",\n      \"position\": [100, 370]\n    },\n    {\n      \"id\": \"embedder\",\n      \"name\": \"Embedder\",\n      \"type\": \"pipeline\",\n      \"emoji\": \"🧮\",\n      \"subtitle\": \"Vectorize\",\n      \"position\": [110, 490]\n    },\n    {\n      \"id\": \"indexer\",\n      \"name\": \"Indexer\",\n      \"type\": \"pipeline\",\n      \"emoji\": \"📇\",\n      \"subtitle\": \"Store\",\n      \"position\": [140, 600]\n    },\n    {\n      \"id\": \"scheduler\",\n      \"name\": \"Scheduler\",\n      \"type\": \"ops\",\n      \"emoji\": \"⏰\",\n      \"subtitle\": \"Cron Jobs\",\n      \"position\": [1050, 550]\n    },\n    {\n      \"id\": \"monitor\",\n      \"name\": \"Monitor\",\n      \"type\": \"ops\",\n      \"emoji\": \"📊\",\n      \"subtitle\": \"Health Checks\",\n      \"position\": [1080, 680]\n    },\n    {\n      \"id\": \"cache\",\n      \"name\": \"Cache\",\n      \"type\": \"system\",\n      \"emoji\": \"⚡\",\n      \"subtitle\": \"Redis\",\n      \"position\": [750, 800]\n    },\n    {\n      \"id\": \"skills\",\n      \"name\": \"Skills Library\",\n      \"type\": \"system\",\n      \"emoji\": \"🧰\",\n      \"subtitle\": \"Extensible Tools\",\n      \"position\": [300, 140]\n    },\n    {\n      \"id\": \"evolver\",\n      \"name\": \"Self-Improver\",\n      \"type\": \"agent\",\n      \"emoji\": \"🧬\",\n      \"subtitle\": \"Auto-Optimize\",\n      \"position\": [160, 80]\n    }\n  ],\n  \"connections\": [\n    { \"from\": \"orchestrator\", \"to\": \"chat\", \"type\": \"hub\" },\n    { \"from\": \"orchestrator\", \"to\": \"database\", \"type\": \"hub\" },\n    { \"from\": \"orchestrator\", \"to\": \"api_gateway\", \"type\": \"hub\" },\n    { \"from\": \"orchestrator\", \"to\": \"cache\", \"type\": \"hub\" },\n    { \"from\": \"orchestrator\", \"to\": \"skills\", \"type\": \"hub\" },\n    { \"from\": \"orchestrator\", \"to\": \"researcher\", \"type\": \"core\" },\n    { \"from\": \"orchestrator\", \"to\": \"writer\", \"type\": \"core\" },\n    { \"from\": \"orchestrator\", \"to\": \"reviewer\", \"type\": \"core\" },\n    { \"from\": \"orchestrator\", \"to\": \"web_scraper\", \"type\": \"core\" },\n    { \"from\": \"orchestrator\", \"to\": \"scheduler\", \"type\": \"core\" },\n    { \"from\": \"orchestrator\", \"to\": \"monitor\", \"type\": \"core\" },\n    { \"from\": \"user\", \"to\": \"chat\", \"type\": \"sys\" },\n    { \"from\": \"researcher\", \"to\": \"database\", \"type\": \"cross\" },\n    { \"from\": \"researcher\", \"to\": \"api_gateway\", \"type\": \"cross\" },\n    { \"from\": \"writer\", \"to\": \"cache\", \"type\": \"cross\" },\n    { \"from\": \"reviewer\", \"to\": \"database\", \"type\": \"cross\" },\n    { \"from\": \"reviewer\", \"to\": \"chat\", \"type\": \"cross\" },\n    { \"from\": \"skills\", \"to\": \"evolver\", \"type\": \"core\" },\n    { \"from\": \"scheduler\", \"to\": \"database\", \"type\": \"cross\" },\n    { \"from\": \"monitor\", \"to\": \"database\", \"type\": \"cross\" },\n    { \"from\": \"web_scraper\", \"to\": \"parser\", \"type\": \"cluster\" },\n    { \"from\": \"parser\", \"to\": \"embedder\", \"type\": \"cluster\" },\n    { \"from\": \"embedder\", \"to\": \"indexer\", \"type\": \"cluster\" },\n    { \"from\": \"indexer\", \"to\": \"database\", \"type\": \"cluster\" }\n  ],\n  \"pipelines\": {\n    \"ingestion\": [\"web_scraper\", \"parser\", \"embedder\", \"indexer\"]\n  }\n}","readmeExcerpt":"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","codeSnippets":[],"executableExamples":[{"language":"bash","snippet":"python3 scripts/generate.py topology.json -o diagram.html"},{"language":"json","snippet":"{\n  \"title\": \"My Agent System\",\n  \"theme\": \"dark\",\n  \"viewBox\": [1220, 1000],\n  \"zones\": {\n    \"center\": { \"label\": \"Orchestration\" },\n    \"left\": { \"label\": \"Content Pipeline\" },\n    \"right\": { \"label\": \"Infrastructure\" }\n  },\n  \"nodes\": [\n    {\n      \"id\": \"orchestrator\",\n      \"name\": \"Main Agent\",\n      \"type\": \"orchestrator\",\n      \"emoji\": \"🤖\",\n      \"subtitle\": \"Central Hub\",\n      \"position\": [610, 480],\n      \"radius\": 58\n    },\n    {\n      \"id\": \"tool_agent\",\n      \"name\": \"Tool Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"🔧\",\n      \"subtitle\": \"Executes tools\",\n      \"position\": [400, 300],\n      \"radius\": 32\n    }\n  ],\n  \"connections\": [\n    { \"from\": \"orchestrator\", \"to\": \"tool_agent\", \"type\": \"core\" }\n  ],\n  \"pipelines\": [\"tool_agent\", \"processor\", \"output\"]\n}"},{"language":"json","snippet":"\"pipelines\": {\n  \"content\": [\"feed_hunter\", \"synthesizer\", \"writer\", \"website\"],\n  \"deploy\": [\"builder\", \"tester\", \"deployer\"]\n}"},{"language":"json","snippet":"{\n  \"nodes\": [\n    { \"id\": \"main\", \"type\": \"orchestrator\", \"zone\": \"center\" },\n    { \"id\": \"researcher\", \"type\": \"agent\", \"zone\": \"top-left\" },\n    { \"id\": \"db\", \"type\": \"system\", \"zone\": \"right\" }\n  ]\n}"},{"language":"json","snippet":"{\n  \"theme\": \"dark\",\n  \"colors\": {\n    \"accent\": \"#5d9b93\",\n    \"background\": \"#0a0e14\",\n    \"text\": \"#c8d6e0\",\n    \"nodeStroke\": \"rgba(93,155,147,0.4)\"\n  },\n  \"font\": \"Inter, system-ui, sans-serif\"\n}"},{"language":"bash","snippet":"# Self-contained HTML page (default)\npython3 scripts/generate.py topology.json -o diagram.html\n\n# SVG only (for embedding)\npython3 scripts/generate.py topology.json -o diagram.svg --format svg\n\n# SVG paths only (for injection into existing page)\npython3 scripts/generate.py topology.json --format paths"}],"parameters":null,"dependencies":[],"permissions":[],"extractedFiles":[{"path":"SKILL.md","content":"---\nname: agent-topology\ndescription: 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).\n---\n\n# Agent Topology\n\nGenerate interactive architecture diagrams from a JSON topology definition.\n\n## Quick Start\n\n1. Create a topology JSON file (see `references/schema.md` for full spec)\n2. Run the generator:\n\n```bash\npython3 scripts/generate.py topology.json -o diagram.html\n```\n\n3. Output is a self-contained HTML file with embedded SVG, CSS, and JS.\n\n## Topology JSON Format\n\n```json\n{\n  \"title\": \"My Agent System\",\n  \"theme\": \"dark\",\n  \"viewBox\": [1220, 1000],\n  \"zones\": {\n    \"center\": { \"label\": \"Orchestration\" },\n    \"left\": { \"label\": \"Content Pipeline\" },\n    \"right\": { \"label\": \"Infrastructure\" }\n  },\n  \"nodes\": [\n    {\n      \"id\": \"orchestrator\",\n      \"name\": \"Main Agent\",\n      \"type\": \"orchestrator\",\n      \"emoji\": \"🤖\",\n      \"subtitle\": \"Central Hub\",\n      \"position\": [610, 480],\n      \"radius\": 58\n    },\n    {\n      \"id\": \"tool_agent\",\n      \"name\": \"Tool Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"🔧\",\n      \"subtitle\": \"Executes tools\",\n      \"position\": [400, 300],\n      \"radius\": 32\n    }\n  ],\n  \"connections\": [\n    { \"from\": \"orchestrator\", \"to\": \"tool_agent\", \"type\": \"core\" }\n  ],\n  \"pipelines\": [\"tool_agent\", \"processor\", \"output\"]\n}\n```\n\n### Node Types\n\n| Type | Visual | Use for |\n|------|--------|---------|\n| `orchestrator` | Large glowing circle | Central agent/router |\n| `agent` | Medium teal circle | Sub-agents, workers |\n| `system` | Medium muted circle | External systems (DBs, APIs) |\n| `pipeline` | Small bright circle | Sequential pipeline steps |\n| `ops` | Small circle | Operational/maintenance agents |\n| `human` | Medium circle | Human-in-the-loop nodes |\n\n### Connection Types\n\n| Type | Style | Use for |\n|------|-------|---------|\n| `hub` | Bright, thicker | Orchestrator ↔ systems |\n| `core` | Medium brightness | Orchestrator ↔ agents |\n| `cross` | Subtle | Agent ↔ system (data flow) |\n| `cluster` | Pipeline style | Sequential chain steps |\n| `sys` | Dashed subtle | System ↔ system |\n\n### Pipelines\n\nThe `pipelines` array lists node IDs that form sequential chains. Hovering any pipeline node highlights the full chain transitively (not just direct connections).\n\nMultiple pipelines supported:\n```json\n\"pipelines\": {\n  \"content\": [\"feed_hunter\", \"synthesizer\", \"writer\", \"website\"],\n  \"deploy\": [\"builder\", \"tester\", \"deployer\"]\n}\n```\n\n## Auto-Layout Mode\n\nIf positions are omitted, the generator auto-places nodes by zone:\n\n```json\n{\n  \"nodes\": [\n    { \"id\": \"main\", \"type\": \"orchestrator\", \"zone\": \"center\" },\n    { \"id\": \"researcher\", \"type\": \"agent\", \"zone\": \"top-left\" },\n    { \"id\": \"db\", \"type\": \"system\", \"zone\": \"right\""},{"path":"_meta.json","content":"{\n  \"ownerId\": \"kn724j3rntp039atcv39w7p0hs80kdq4\",\n  \"slug\": \"agent-topology-visualizer\",\n  \"version\": \"1.1.0\",\n  \"publishedAt\": 1771700974721\n}"},{"path":"references/customization.md","content":"# Customization Guide\n\n## Custom CSS\n\nAdd a `css` field to your topology JSON to inject custom styles into the output:\n\n```json\n{\n  \"css\": \".arch-svg { filter: saturate(1.2); }\"\n}\n```\n\nThe CSS is injected into a `<style>` block inside the HTML output. Only use CSS you've written or reviewed.\n\n## Embedding in Existing Pages\n\nUse `--format svg` to get just the SVG element, then embed it in your own page:\n\n```html\n<div class=\"my-diagram-container\">\n  <!-- paste SVG output here -->\n</div>\n```\n\nThe `--format paths` option outputs only the `<path>` elements for injection into an existing SVG.\n\n## Background Options\n\nThe default dark theme includes a constellation-style star field. Control it with:\n\n```json\n{\n  \"background\": {\n    \"stars\": true,\n    \"starCount\": 150,\n    \"starColor\": \"rgba(200,214,224,0.3)\"\n  }\n}\n```\n\nSet `\"stars\": false` to disable the star field for embedding in pages with their own background."},{"path":"references/schema.md","content":"# Topology JSON Schema Reference\n\n## Full Schema\n\n```json\n{\n  \"title\": \"string (required) — diagram title\",\n  \"theme\": \"dark | light (default: dark)\",\n  \"viewBox\": [width, height] (default: [1220, 1000]),\n  \n  \"colors\": {\n    \"accent\": \"#hex (default: #5d9b93)\",\n    \"background\": \"#hex (default: #0a0e14)\",\n    \"text\": \"#hex (default: #c8d6e0)\",\n    \"nodeStroke\": \"rgba/hex (default: rgba(93,155,147,0.4))\",\n    \"connectionHub\": \"rgba/hex\",\n    \"connectionCore\": \"rgba/hex\",\n    \"connectionCross\": \"rgba/hex\"\n  },\n  \n  \"font\": \"string (default: Inter, system-ui, sans-serif)\",\n  \n  \"zones\": {\n    \"zone-name\": {\n      \"label\": \"string — display label\",\n      \"bounds\": [x, y, width, height] (optional — for auto-layout)\n    }\n  },\n  \n  \"nodes\": [\n    {\n      \"id\": \"string (required) — unique identifier, lowercase with underscores\",\n      \"name\": \"string (required) — display name\",\n      \"type\": \"orchestrator | agent | system | pipeline | ops | human\",\n      \"emoji\": \"string (optional) — emoji icon\",\n      \"subtitle\": \"string (optional) — text below name\",\n      \"position\": [x, y] (optional if zone provided),\n      \"zone\": \"string (optional) — auto-layout zone name\",\n      \"radius\": \"number (optional — default by type: orchestrator=58, system=44, agent=32, pipeline=25, ops=25, human=38)\"\n    }\n  ],\n  \n  \"connections\": [\n    {\n      \"from\": \"string (required) — source node id\",\n      \"to\": \"string (required) — target node id\",\n      \"type\": \"hub | core | cross | cluster | sys (default: core)\"\n    }\n  ],\n  \n  \"pipelines\": {\n    \"pipeline-name\": [\"node_id_1\", \"node_id_2\", \"node_id_3\"]\n  }\n}\n```\n\n## Node Type Defaults\n\n| Type | Radius | Fill Opacity | Stroke Color | Glow |\n|------|--------|-------------|--------------|------|\n| orchestrator | 58 | 0.15 | accent | Yes, animated pulse |\n| agent | 32 | 0.12 | accent | No |\n| system | 44 | 0.08 | muted accent | No |\n| pipeline | 25 | 0.12 | bright accent | No |\n| ops | 25 | 0.06 | muted | No |\n| human | 38 | 0.10 | accent | No |\n\n## Connection Type Styles\n\n| Type | Stroke Opacity | Stroke Width | Dash | Use |\n|------|---------------|-------------|------|-----|\n| hub | 0.35 | 2.0 | solid | Orchestrator ↔ major systems |\n| core | 0.25 | 1.5 | solid | Orchestrator ↔ agents |\n| cross | 0.18 | 1.2 | solid | Agent ↔ system data flows |\n| cluster | 0.30 | 1.5 | solid | Pipeline sequential chain |\n| sys | 0.15 | 1.0 | 4,4 dash | System ↔ system |\n\n## Edge-to-Edge Math\n\nConnections 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:\n\n1. Calculates the angle between node centers\n2. Projects start/end points to circle edge using `(cx + r*cos(θ), cy + r*sin(θ))`\n3. Computes control points perpendicular to the center line for natural curves\n4. Adjusts curve intensity based on distance between nodes\n\n## Optional Fields\n\n- `css` (string): Custom CSS injected into the output `<style>` block. Only styles, no scripts.\n- `background"},{"path":"assets/example-topology.json","content":"{\n  \"title\": \"AI Research Assistant — Agent Architecture\",\n  \"theme\": \"dark\",\n  \"viewBox\": [1220, 1000],\n  \"colors\": {\n    \"accent\": \"#5d9b93\"\n  },\n  \"nodes\": [\n    {\n      \"id\": \"orchestrator\",\n      \"name\": \"Orchestrator\",\n      \"type\": \"orchestrator\",\n      \"emoji\": \"🤖\",\n      \"subtitle\": \"CENTRAL AGENT\",\n      \"position\": [610, 480],\n      \"radius\": 58\n    },\n    {\n      \"id\": \"user\",\n      \"name\": \"User\",\n      \"type\": \"human\",\n      \"emoji\": \"👤\",\n      \"subtitle\": \"Human-in-the-Loop\",\n      \"position\": [900, 100]\n    },\n    {\n      \"id\": \"chat\",\n      \"name\": \"Chat Interface\",\n      \"type\": \"system\",\n      \"emoji\": \"💬\",\n      \"subtitle\": \"Messaging\",\n      \"position\": [780, 160]\n    },\n    {\n      \"id\": \"researcher\",\n      \"name\": \"Research Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"🔍\",\n      \"subtitle\": \"Deep Dives\",\n      \"position\": [350, 280]\n    },\n    {\n      \"id\": \"writer\",\n      \"name\": \"Writer Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"✍️\",\n      \"subtitle\": \"Content Creation\",\n      \"position\": [380, 650]\n    },\n    {\n      \"id\": \"reviewer\",\n      \"name\": \"Review Agent\",\n      \"type\": \"agent\",\n      \"emoji\": \"🔎\",\n      \"subtitle\": \"Quality Check\",\n      \"position\": [850, 600]\n    },\n    {\n      \"id\": \"database\",\n      \"name\": \"Vector DB\",\n      \"type\": \"system\",\n      \"emoji\": \"🗄️\",\n      \"subtitle\": \"Embeddings Store\",\n      \"position\": [1000, 400]\n    },\n    {\n      \"id\": \"api_gateway\",\n      \"name\": \"API Gateway\",\n      \"type\": \"system\",\n      \"emoji\": \"🌐\",\n      \"subtitle\": \"External APIs\",\n      \"position\": [950, 260]\n    },\n    {\n      \"id\": \"web_scraper\",\n      \"name\": \"Web Scraper\",\n      \"type\": \"pipeline\",\n      \"emoji\": \"🕷️\",\n      \"subtitle\": \"Crawl\",\n      \"position\": [120, 250]\n    },\n    {\n      \"id\": \"parser\",\n      \"name\": \"Parser\",\n      \"type\": \"pipeline\",\n      \"emoji\": \"📄\",\n      \"subtitle\": \"Extract\",\n      \"position\": [100, 370]\n    },\n    {\n      \"id\": \"embedder\",\n      \"name\": \"Embedder\",\n      \"type\": \"pipeline\",\n      \"emoji\": \"🧮\",\n      \"subtitle\": \"Vectorize\",\n      \"position\": [110, 490]\n    },\n    {\n      \"id\": \"indexer\",\n      \"name\": \"Indexer\",\n      \"type\": \"pipeline\",\n      \"emoji\": \"📇\",\n      \"subtitle\": \"Store\",\n      \"position\": [140, 600]\n    },\n    {\n      \"id\": \"scheduler\",\n      \"name\": \"Scheduler\",\n      \"type\": \"ops\",\n      \"emoji\": \"⏰\",\n      \"subtitle\": \"Cron Jobs\",\n      \"position\": [1050, 550]\n    },\n    {\n      \"id\": \"monitor\",\n      \"name\": \"Monitor\",\n      \"type\": \"ops\",\n      \"emoji\": \"📊\",\n      \"subtitle\": \"Health Checks\",\n      \"position\": [1080, 680]\n    },\n    {\n      \"id\": \"cache\",\n      \"name\": \"Cache\",\n      \"type\": \"system\",\n      \"emoji\": \"⚡\",\n      \"subtitle\": \"Redis\",\n      \"position\": [750, 800]\n    },\n    {\n      \"id\": \"skills\",\n      \"name\": \"Skills Library\",\n      \"type\": \"system\",\n      \"emoji\": \"🧰\",\n      \"subtitle\": \"Extensible Tools\",\n      \"position\": [300, 140]\n    },\n    {\n      \"id\": \"evolver\",\n      \"name\": \"Self-Improver\",\n      \"type"}],"languages":[],"docsSourceLabel":"CLAWHUB","editorialOverview":"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","editorialQuality":{"score":100,"threshold":65,"status":"ready","wordCount":1336,"uniquenessScore":50,"reasons":[]}},"media":{"evidence":{"source":"no-media","verified":false,"confidence":"low","updatedAt":"2026-10-11T16:05:27.242Z","emptyReason":"No screenshots, media assets, or demo links are available."},"primaryImageUrl":null,"mediaAssetCount":0,"assets":[],"demoUrl":null},"ownerResources":{"evidence":{"source":"unclaimed","verified":false,"confidence":"low","updatedAt":"2026-10-11T16:05:27.242Z","emptyReason":"This page has not been claimed by the agent owner."},"hasCustomPage":false,"customPageUpdatedAt":null,"customLinks":[],"structuredLinks":{"docsUrl":null,"demoUrl":null,"supportUrl":null,"pricingUrl":null,"statusUrl":null},"customPage":null},"relatedAgents":{"evidence":{"source":"protocol-neighbors","verified":false,"confidence":"medium","updatedAt":"2026-10-11T20:59:04.948Z","emptyReason":null},"items":[{"id":"8ebccd8e-3863-4187-8355-c3f14e1f9edf","entityType":"agent","canonicalPath":"/agent/iofficeai-aionui","slug":"iofficeai-aionui","name":"AionUi","description":"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!","url":"https://github.com/iOfficeAI/AionUi","homepage":"https://www.aionui.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-10-09T19:11:12.944Z","createdAt":"2026-02-25T03:38:16.584Z","downloads":null},{"id":"b917f68a-ebff-438e-84f8-3f4b2494c0bc","entityType":"agent","canonicalPath":"/agent/activepieces-activepieces","slug":"activepieces-activepieces","name":"activepieces","description":"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","url":"https://github.com/activepieces/activepieces","homepage":"https://www.activepieces.com","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-15T02:22:12.426Z","createdAt":"2026-02-25T03:38:12.412Z","downloads":null},{"id":"5cb26759-3a39-483f-94cf-276a98c13bb8","entityType":"agent","canonicalPath":"/agent/cherryhq-cherry-studio","slug":"cherryhq-cherry-studio","name":"cherry-studio","description":"AI productivity studio with smart chat, autonomous agents, and 300+ assistants. Unified access to frontier LLMs","url":"https://github.com/CherryHQ/cherry-studio","homepage":"https://cherry-ai.com","source":"GITHUB_REPOS","protocols":["MCP","OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-04-11T14:38:40.986Z","createdAt":"2026-02-25T03:38:19.379Z","downloads":null},{"id":"6f6582d0-5d76-4f0f-b81d-86520247950b","entityType":"agent","canonicalPath":"/agent/copilotkit-copilotkit","slug":"copilotkit-copilotkit","name":"CopilotKit","description":"The Frontend for Agents & Generative UI. React + Angular","url":"https://github.com/CopilotKit/CopilotKit","homepage":"https://docs.copilotkit.ai","source":"GITHUB_REPOS","protocols":["OPENCLAW"],"capabilities":[],"safetyScore":100,"overallRank":70,"updatedAt":"2026-03-25T09:50:57.846Z","createdAt":"2026-02-25T03:39:14.617Z","downloads":null}],"links":{"hub":"/agent","source":"/agent/source/clawhub","protocols":[{"label":"OpenClaw","href":"/agent/protocol/openclew"}]}}}