claude-code-flow-visualizer

Claude Code Flow Visualizer turns a Claude Code AI agent setup into a single interactive diagram you can explore visually, instead of manually opening and reading every configuration file. Claude Code projects often spread their setup across many separate files, such as a CLAUDE.md file, subagent definitions, skill files, slash commands, hooks, and MCP connector settings, which makes it hard to see at a glance how everything connects. This tool reads all of those files from a GitHub link, a downloaded ZIP, or a local folder, and draws them as a wired graph in seconds, all directly in your browser with no backend server needed.

On the resulting graph, agents show their assigned model and available tools, with lines drawn to show which agent hands work off to another. Skills, slash commands, hooks, schedulers, and MCP connectors each appear as their own distinct type of node. Clicking any node opens an inspector showing its trigger description, tools, and connections, alongside the original markdown file it came from.

The tool also runs a set of checks meant to catch common ways these multi-agent setups break, such as a delegation pointing to an agent or skill that does not actually exist, an orchestrator agent that delegates work but was not given the tool needed to do so, duplicate agent names, circular delegation loops, skills that nothing ever references, and vague descriptions that would stop an agent from being triggered automatically.

To run it yourself, you clone the repository, install its dependencies with npm, and start a local development server. From there you can paste in a GitHub repository, upload a ZIP file, upload a local folder, or load a built-in demo project to try the tool without any project of your own. Internally it is built as one fairly large React component that parses files, builds a model of the project, lays out a graph, and renders it to the screen, and it is tested end to end with Playwright. The project is released under the MIT license.