oyekamal/claude-code-flow-visualizer

README preview

# Claude Code Flow Visualizer — See Your Entire Agent Harness as an Interactive Graph

**Visualize any Claude Code configuration (`CLAUDE.md`, subagents, skills, slash commands, hooks, MCP servers, schedulers) as one interactive flow diagram — straight from a GitHub URL, a ZIP, or a local folder. No install for your target repo, no backend, 100% client-side.**

![Claude Code agent harness visualized as an interactive flow graph](docs/harness-visualization.png)

## Why

Claude Code agent setups live as scattered markdown files: `CLAUDE.md`, `.claude/agents/*.md`, `.claude/skills/*/SKILL.md`, commands, `settings.json` hooks, and `.mcp.json` connectors. To understand how an existing harness works — which agent delegates to which, what skills fire when, where Notion/database/MCP connections plug in — you'd normally have to open and read every single file.

This tool parses the whole project and renders it as a wired graph in seconds:

- 🤖 **Agents** with model + tool badges, delegation edges traced from prompt bodies
- 📚 **Skills** attached to the agents and commands that actually reference them
- ⌨️ **Slash commands**, 🪝 **lifecycle hooks**, ⏰ **schedulers** (GitHub Actions / cron)
- 🔌 **MCP connectors** and 🗄️ **memory / state stores** drawn as distinct node types
- 🚨 **Pipeline lints**: broken delegation references, duplicate agent names, circular delegation, orphan skills, reviewers with write access, orchestrators missing the `Task` tool, vague trigger descriptions

## Quick Start

View full repository on GitHub →