Agent Flow Visualization

This VS Code extension visualizes Claude Code agent execution as an interactive node graph in real time. It hooks into Claude Code's lifecycle events to show tool calls, subagent branching, timing, and file access patterns as they happen. Especially useful when debugging why an agent is looping, which tools are failing, or how subagents are coordinating. You can replay past sessions from JSONL logs or watch live runs side by side with your editor. The automatic hook configuration is clean, though you'll need Claude Code CLI already set up. If you've ever wished you could see what Claude Code is thinking instead of just waiting for output, this is that.

skills.sh installs: 840
GitHub stars: 61
last updated: Jul 14, 2026

View on GitHub

Install

$ npx -y skills add aradotso/trending-skills --skill agent-flow-visualization --agent claude-code

Installs into .claude/skills of the current project.

Files

Agent Flow

Skill by ara.so — Daily 2026 Skills collection.

Agent Flow is a VS Code extension that provides real-time visualization of Claude Code agent orchestration. It renders agent execution as an interactive node graph, showing tool calls, branching, subagent coordination, and timing — turning Claude Code's black-box execution into a transparent, debuggable flow.

Installation

Via VS Code Marketplace

Open VS Code Extensions (Cmd+Shift+X)
Search for Agent Flow by simon-p
Click Install

Or install directly: marketplace.visualstudio.com/items?itemName=simon-p.agent-flow

Requirements

VS Code 1.85 or later
Claude Code CLI installed and accessible
Node.js (for Claude Code)

Quick Start

# 1. Open Command Palette
Cmd+Shift+P (Mac) / Ctrl+Shift+P (Win/Linux)

# 2. Run the command
> Agent Flow: Open Agent Flow

# 3. Start a Claude Code session in your workspace
# Agent Flow auto-detects it and begins streaming

Or use the keyboard shortcut: