agent-flow-visualization — Claude Code skill: agent flow graphs
Installs the Agent Flow VS Code extension, which draws Claude agent orchestration as a live node graph: tool calls, branches, subagents, timings.
npx skills add reason-machines/trending-skills --skill agent-flow-visualization -a claude-codeWhat agent-flow-visualization does
Agent Flow renders Claude orchestration as an interactive node graph. Every tool call, its result, a branching decision and a subagent's return to its parent becomes a node on the canvas. Instead of reading logs line by line, you watch the run happen.
Events arrive through Claude hooks. The extension starts a local HTTP server, and the PreToolUse and PostToolUse hooks POST JSON to it with curl. Setup runs automatically on first open; to redo it, run Agent Flow: Configure Claude Code Hooks from the Command Palette. There is also a JSONL mode: point agentVisualizer.eventLogPath at a log file and the extension tails it, which suits post-hoc debugging and CI monitoring. Concurrent sessions get their own tabs.
You need VS Code 1.85 or later, the Claude CLI on your PATH, and Node.js. The hooks live in ~/.claude/settings.json or a project-level .claude/settings.json, so if you already route those events somewhere else, check that automatic configuration did not overwrite your entries.
What it helps with
- see which tools an agent actually called
- find the branch where a run spawned a needless subagent
- replay a finished run from a saved JSONL log
- watch several Claude sessions at once
- share a recording of an agent run with a teammate
Example prompts for the agent
- Open Agent Flow and connect to the running Claude session
- Configure Claude hooks so events stream into the visualizer
- Show the graph for
${workspaceFolder}/logs/agent-session.jsonl
How to install agent-flow-visualization
1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill agent-flow-visualization -a claude-code2Manually: put the files in place
~/.claude/skills/agent-flow-visualization/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/agent-flow-visualization/
1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill agent-flow-visualization -a codex2Manually: put the files in place
.agents/skills/agent-flow-visualization/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill agent-flow-visualization -a cursor2Manually: put the files in place
.cursor/skills/agent-flow-visualization/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install reason-machines/trending-skills agent-flow-visualization2Manually: put the files in place
.github/skills/agent-flow-visualization/SKILL.md1Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill agent-flow-visualization -a gemini-cli2Platform CLI
gemini skills install https://github.com/reason-machines/trending-skills --path skills/agent-flow-visualizationManually: put the files in place
.devin/skills/agent-flow-visualization/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add reason-machines/trending-skills --skill agent-flow-visualization -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about agent-flow-visualization
How do I install agent-flow-visualization in Claude?
Run npx skills add reason-machines/trending-skills --skill agent-flow-visualization -a claude-code. The skill lands in ~/.claude/skills/agent-flow-visualization/SKILL.md.
What does agent-flow-visualization do?
It installs the Agent Flow extension for VS Code, which visualizes Claude agent orchestration as an interactive graph of tool calls, branches, subagents and timings.
What do I need for Agent Flow to work?
VS Code 1.85 or later, the Claude CLI installed and reachable, and Node.js. Events come through Claude hooks, so the extension writes to ~/.claude/settings.json or a project-level .claude/settings.json.
