agent-topology
Generate interactive SVG architecture diagrams for AI agent systems. Use when visualizing multi-agent setups, orchestration flows, data pipelines, or system topology. Produces a self-contained HTML page with hover-highlighting, tooltips, curved bezier connections, and zone-based layout. Works with any agent framework (OpenClaw, CrewAI, LangGraph, AutoGen, etc).
Why use this skill?
Generate interactive, high-fidelity SVG architecture diagrams for your AI agent systems with the agent-topology skill. Perfect for visualizing multi-agent flows and complex pipelines.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/gavinnn-m/agent-topology-visualizerWhat This Skill Does
The agent-topology skill provides a powerful visualization layer for AI agent systems, transforming abstract JSON architectures into interactive, high-fidelity SVG diagrams. Designed for developers and architects, it renders complex multi-agent flows, system dependencies, and data pipelines into self-contained HTML pages. The visualizer supports advanced features like hover-highlighting, intelligent tooltips, and curved bezier paths, ensuring that your system architecture is not just documented, but also easy to navigate and understand.
Installation
To install this skill, use the ClawHub CLI tool integrated into your OpenClaw environment:
clawhub install openclaw/skills/skills/gavinnn-m/agent-topology-visualizer
Once installed, you can trigger the generation script directly from your terminal using python3 scripts/generate.py topology.json -o diagram.html, where the topology JSON defines your nodes, connections, and system zones.
Use Cases
This tool is ideal for documenting CrewAI swarms, LangGraph execution flows, or custom multi-agent orchestration setups. It is particularly useful for presenting system design to stakeholders, debugging complex agent communication loops, or visual mapping of data ingestion pipelines in AI infrastructure. By centralizing the visual logic within your repository, you ensure documentation remains in sync with the actual code-based architecture.
Example Prompts
- "Generate an agent topology for my stock market analyzer that uses an orchestrator, three specialized research agents, and a database system connection."
- "Create a system diagram showing the interaction between my user-facing agent and the backend processing pipeline, using the 'dark' theme."
- "Visualize the flow of this agent system: orchestrator connects to web-searcher and file-reader, with the file-reader passing data to the summarizer agent."
Tips & Limitations
- Auto-Layout: If you want to skip manual coordinates, use the 'zone' property (e.g., 'top-left', 'center') to let the engine handle spatial placement.
- Pipelines: Define your pipelines in the JSON to enable transitive highlighting; this is excellent for visualizing data lifecycles.
- Limitations: The skill is a static-to-interactive visualizer. It generates a self-contained HTML file rather than a real-time monitoring dashboard, so you must re-generate the diagram whenever your system architecture changes.
- Formatting: Ensure your JSON schema strictly adheres to the definitions in
references/schema.mdto avoid rendering errors in the generated SVG.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-gavinnn-m-agent-topology-visualizer": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: file-write, file-read