agent-topology-visualizer_skill

Overview

This skill generates interactive SVG architecture diagrams for AI agent systems and outputs a self-contained HTML page. It visualizes multi-agent setups, orchestration flows, pipelines, and topology with hover highlighting, tooltips, and curved bezier connections. It works with any agent framework and supports zone-based auto-layout and theming.

How this skill works

The generator takes a JSON topology definition describing nodes, zones, connections, pipelines, and theme settings. It produces an embedded SVG with edge-to-edge curved connections, interactive hover/tap behaviors, tooltips, and responsive layout in a single HTML file (or optional SVG-only outputs). If node positions are omitted, an auto-layout places nodes by zone. Pipelines are recognized and highlighted transitively when hovering any member.

When to use it

• Document multi-agent architectures and orchestration flows
• Visualize data pipelines, sequential processing, or deployment chains
• Share a portable, interactive diagram that needs no external assets
• Embed topology visuals into documentation, demos, or status pages
• Inspect relationships (agent↔system, hub↔node) and runtime responsibilities

Best practices

• Model topology as structured JSON: clear ids, types, zones, and optional positions
• Group related nodes into zones to improve auto-layout and readability
• Define pipelines explicitly to enable full-chain highlighting
• Use node types and subtitles to convey role and behavior concisely
• Customize theme colors and font for brand consistency and contrast

Example use cases

• Show orchestration between a central router and worker agents in OpenClaw, CrewAI, or AutoGen setups
• Map a content pipeline from ingestion to synthesizer to writer and website output
• Illustrate infrastructure dependencies: databases, external APIs, and ops agents
• Generate a standalone diagram for a README, internal wiki, or architecture review
• Embed SVG paths into a web page while keeping interactive styling and tooltips