git404hub

what is claude-code-flow-visualizer fr?

oyekamal/claude-code-flow-visualizer — explained in plain English

Analysis updated 2026-05-18

8JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

tl;dr

A browser-based tool that turns a Claude Code agent setup into an interactive flow diagram, with built-in checks for common configuration mistakes.

vibe map

mindmap
  root((repo))
    What it does
      Visualizes agent setup
      Interactive flow graph
      Pipeline lint checks
    Tech stack
      React front end
      GitHub and ZIP import
      Playwright testing
    Use cases
      Understand existing agent setups
      Debug broken delegation
      Explore demo project
    Audience
      Claude Code developers
      Agent pipeline builders

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Visualize how agents, skills, hooks, and MCP connectors in a Claude Code project are wired together.

VIBE 2

Import a GitHub repository, ZIP file, or local folder to inspect its Claude Code configuration visually.

VIBE 3

Catch broken delegation references, circular loops, or unused skills before they cause problems.

VIBE 4

Click into any node to see its raw markdown source alongside its connections.

what's the stack?

JavaScriptReactPlaywrightGitHub API

how it stacks up fr

oyekamal/claude-code-flow-visualizeradguardteam/recoveryadm1nsys/safari-ai-extension
Stars888
LanguageJavaScriptJavaScriptJavaScript
Last pushed2018-03-16
MaintenanceDormant
Setup difficultyeasyeasyhard
Complexity2/52/52/5
Audiencedevelopergeneraldeveloper

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min

Runs entirely client-side after npm install and npm run dev, no backend or API key required for the demo project.

MIT license: free to use, modify, and distribute, including commercially, as long as the copyright notice is kept.

in plain english

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.

prompts (copy fr)

prompt 1
Help me clone and run this Claude Code Flow Visualizer locally with npm install and npm run dev.
prompt 2
Show me how to visualize my own GitHub repository's Claude Code setup by pasting its URL into the tool.
prompt 3
Explain the pipeline lint checks this tool runs, like circular delegation and orphan skills.
prompt 4
Walk me through the demo project to understand what the interactive graph is showing me.

Frequently asked questions

what is claude-code-flow-visualizer fr?

A browser-based tool that turns a Claude Code agent setup into an interactive flow diagram, with built-in checks for common configuration mistakes.

What language is claude-code-flow-visualizer written in?

Mainly JavaScript. The stack also includes JavaScript, React, Playwright.

What license does claude-code-flow-visualizer use?

MIT license: free to use, modify, and distribute, including commercially, as long as the copyright notice is kept.

How hard is claude-code-flow-visualizer to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is claude-code-flow-visualizer for?

Mainly developer.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.