oyekamal

Claude Code Flow Visualizer — Git skill for Claude Code

Git community

🔍 Visualize any Claude Code agent harness — CLAUDE.md, subagents, skills, commands, hooks & MCP servers — as an interactive flow graph.

How to install Claude Code Flow Visualizer

This entry records only its repository, not the path inside it, so there is no exact command to give. Open oyekamal/claude-code-flow-visualizer and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Claude Code Flow Visualizer does

🔍 Visualize any Claude Code agent harness — CLAUDE.md, subagents, skills, commands, hooks & MCP servers — as an interactive flow graph. Import from GitHub, ZIP, or local folder. 100% client-side.

Alternatives in Git

Clean Worktrees (Automatic) — Automatically remove all worktrees for branches merged into master 25.5k ★
Ccometixline - Claude Code Statusline — by Haleclipse - A high-performance Claude Code statusline tool written in Rust with Git integration, usage tra 2.3k ★
Codebase To Course — by Zara Zhang - A Claude Code skill that turns any codebase into a beautiful, interactive single-page HTML cou 2.1k ★

README

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

git clone https://github.com/oyekamal/claude-code-flow-visualizer.git
cd claude-code-flow-visualizer
npm install
npm run dev        # → http://localhost:5173

Then either:

Paste a GitHub repo (owner/repo, full URL, or a /tree/branch/subfolder link) and hit VISUALIZE
Upload a ZIP (GitHub → Code → Download ZIP) — fully offline
Upload a folder — point it at any local clone
Or click LOAD DEMO HARNESS to explore a sample multi-agent conte