AgentFlow — AI Workflow Visualizer
Transform your AI agent session transcripts into interactive visual workflows. AgentFlow parses JSONL session records from AI coding agents (Claude Code, Cursor, and others) and renders them as beautiful, interactive directed acyclic graphs (DAGs) right inside VS Code.
Overview
AgentFlow gives you visual insight into exactly how your AI agent solved a problem—what tools it called, how it handled errors, what files it touched, and how long each operation took. Perfect for debugging, understanding agent behavior, auditing tool usage, and learning how AI agents approach coding tasks.
Why Visualize Workflows?
- Understand agent reasoning — See the complete decision tree at a glance
- Debug failures — Identify where workflows break and trace error resolution
- Audit tool usage — Track every file read/write, bash command, and API call
- Optimize prompts — Learn what makes agents succeed or struggle
- Learn agent patterns — Study how AI agents approach problem-solving
Features
Interactive DAG Visualization
AgentFlow renders your session as a directed acyclic graph with intelligent auto-layout:
- Automatic layout — Topological ordering, crossing minimization, overlap resolution
- 12 node types — Agent, Tool, Read/Write/Edit/Delete, File, Context, Decision, Error, Workflow, Skill
- 6 edge types — Control flow, Spawn (sub-agents), Data flow, Context, Error recovery, Retry
- Zoom & pan — Navigate large workflows smoothly
- Responsive design — Adapts to any window size
Three Operating Modes
1. Open Session (Post-Mortem)
Open any completed session transcript and explore its full workflow graph. Includes a powerful replay engine to step through the session:
- Step-by-step controls: +1, +5, +10 lines
- Play/pause with realistic timing
- Speed controls: 1x → 200x
- Timeline slider to jump to any point
2. Watch Live
Monitor an active Claude Code session in real-time as it runs:
- Live node updates every 150ms
- Watch nodes appear as the agent works
- Sync toggle to auto-scroll to the active node
- Real-time progress indicators
3. Empty Start
Open AgentFlow before starting Claude Code, and watch the graph populate as your session begins.
Advanced Features
- Sub-agent visualization — Collapsible containers showing nested agent workflows
- Node inspector sidebar — Detailed explanations of what each node did, with full tool results
- LLM-enhanced descriptions — GitHub Copilot integration for enhanced node summaries (when available)
- Clickable file paths — Open files directly in VS Code editor from the graph
- Error detection & resolution — Track how errors are resolved or worked around
- Metadata & analytics — Operation duration, tokens used, cost estimates
- Workflow validator overlay — Optional validation feedback for advanced users
Getting Started
Installation
- Install from the VS Code Extensions Marketplace
- Open the Command Palette (
Cmd+Shift+P or Ctrl+Shift+P)
- Run one of the AgentFlow commands (see below)
Basic Workflow
To view a recent session:
Cmd+Shift+A (or Ctrl+Shift+A on Windows/Linux)
Selects the most recent Claude Code session and renders its complete graph.
To watch a session in real-time:
- Start a Claude Code session
- Run:
Cmd+Shift+F10 (or Ctrl+Shift+F10 on Windows/Linux)
- AgentFlow opens and begins watching for updates
To browse for a specific session:
- Run
AgentFlow: Open Session
- Navigate to
~/.claude/projects/ and select your session transcript
- The graph renders instantly
Commands
| Command |
Keyboard |
Description |
| AgentFlow: Open Session |
Cmd+Shift+A |
Open file picker, select a session transcript |
| AgentFlow: Open Latest |
Cmd+Shift+A |
Auto-load the most recent session |
| AgentFlow: Watch Live |
Cmd+Shift+F10 |
Monitor an active Claude Code session |
| AgentFlow: Start Live Empty |
— |
Open empty webview waiting for session to begin |
| AgentFlow: Refresh |
— |
Re-parse current session (live mode) |
| AgentFlow: Install Hook |
— |
Install sidecar hook for instant user prompt display |
Keyboard Shortcuts
| Shortcut |
Action |
Cmd+Shift+A |
Open Session / Open Latest |
Cmd+Shift+F10 |
Watch Live |
Esc |
Close sidebar (when open) |
Scroll |
Pan the graph |
Ctrl+Scroll (or Cmd+Scroll on Mac) |
Zoom in/out |
Settings
AgentFlow can be configured via VS Code settings:
{
"agentflow.anthropicApiKey": "sk-...",
"agentflow.anthropicModel": "claude-sonnet-4-20250514"
}
| Setting |
Type |
Default |
Description |
agentflow.anthropicApiKey |
string |
— |
Optional Anthropic API key for workflow validation |
agentflow.anthropicModel |
string |
claude-sonnet-4-20250514 |
LLM model for validation tasks |
Node Types & Visualization
AgentFlow uses color-coded nodes to represent different workflow elements:
| Node Type |
Color |
Represents |
| Agent |
Blue |
AI agent execution |
| Tool |
Orange |
Generic tool invocation |
| Read |
Teal |
File read operation |
| Write |
Green |
File write operation |
| Edit |
Light Green |
File edit/modification |
| Delete |
Red |
File deletion |
| File |
Cyan |
File reference |
| Context |
Purple |
Context injection |
| Decision |
Gold |
Conditional logic |
| Error |
Red |
Error occurred |
| Workflow |
Teal |
Workflow node |
| Skill |
Purple |
Skill invocation |
Edge Types
| Edge Type |
Meaning |
| Control |
Sequential control flow |
| Spawn |
Sub-agent creation |
| Data |
Data passed between nodes |
| Context |
Context dependency |
| Error-edge |
Error propagation |
| Retry |
Retry attempt |
AgentFlow currently supports session transcripts from:
- Claude Code — Full support, including sub-agents, all tool types, and live streaming
- Other AI agents — JSONL format compatible with the session schema
Session files are stored in ~/.claude/projects/<project-hash>/<session-id>.jsonl
How It Works
- Parse — AgentFlow reads your JSONL session transcript line-by-line
- Structure — Builds a directed acyclic graph with nodes (operations) and edges (connections)
- Layout — Applies intelligent auto-layout to minimize edge crossings and overlaps
- Render — Displays the graph interactively in a VS Code webview
- Explore — Click nodes to inspect details; replay to step through the session
Tips & Best Practices
- Use Open Latest for speed — After a session completes,
Cmd+Shift+A instantly shows the result
- Live Sync — Toggle the Sync button in live mode to auto-follow the active operation
- Replay for learning — Use the replay engine to slow down complex workflows and understand agent behavior
- Node details — Click any node to open the sidebar and see full operation details
- File navigation — Click file paths in nodes to jump directly to the file in VS Code
Troubleshooting
Session not appearing in live mode
- Ensure Claude Code is running in the same workspace
- Check that the session JSONL file is being written to
~/.claude/projects/
- Try
AgentFlow: Refresh to manually re-scan
Graph layout looks cramped
- Use the zoom controls to scale the view
- Scroll to pan around the graph
- Very large workflows may need to be zoomed out to see the full picture
- Click a node to select it and open the sidebar
- If the sidebar was manually closed, use the toggle button in the toolbar
File paths not clickable
- Only file read/write/edit nodes are clickable
- The file must exist in your workspace
Requirements
- VS Code 1.80.0 or later
- Claude Code (for live mode and session generation)
- Optional: GitHub Copilot (for LLM-enhanced node descriptions)
Version
Current version: 0.39.65
See full release history and changelog at: https://github.com/hercieAI/agentflow-extension
Contributing & Feedback
Have ideas? Found a bug? Open an issue on GitHub:
https://github.com/hercieAI/agentflow-extension/issues
License
MIT License. See LICENSE for details.
Questions? Check the GitHub repo or open an issue.
Happy visualizing!
