代码流程追踪工具

FlowTracer是一款跨仓库代码流程追踪工具,通过生成Mermaid图表和逐步解释,帮助开发者理解复杂的代码流程。

  • by Nikita172002
  • JavaScript
  • 本地部署
  • 2 星标
  • 更新于
在 GitHub 查看 Nikita172002/flow-tracer

使用说明

流量跟踪器

跟踪代码在多个存储库中流动。用英语提问,获得美人鱼图+逐步解释。

You: "How does order creation work?"
FlowTracer: [mermaid diagram showing Frontend → API → Backend → DB across all repos]
            + step-by-step explanation with file paths and function names

适用于 任何语言 (TypeScript、Haskell、Python、Go、Java、Rust等)和 任意数量的repo.

快速开始

选项A:MCP服务器(建议Claude Code用户使用)

# Add to Claude Code (one-time)
claude mcp add flow-tracer -- npx flow-tracer

# Then in Claude Code, just say:
#   "Register repos /path/to/frontend and /path/to/backend"
#   "How does the checkout flow work?"

选项B:Web用户界面

npx flow-tracer serve
# Open http://localhost:3847
# Enter repo paths, ask questions, see diagrams in browser

选项C:克隆并在本地运行

git clone <repo-url>
cd flow-tracer
npm install
node bin/flow-tracer.js serve     # web UI
# or
node bin/flow-tracer.js mcp       # MCP server

认证

FlowTracer需要访问Claude模型。两种选择:

选项1:Claude Code Pro(无需设置)

如果你有一个Claude Code订阅,它会自动工作——使用 claude CLI在引擎盖下。

选项2:无烟煤API密钥

  1. 首选 console.anthropic.com
  2. 注册/登录
  3. 首选 设置>API密钥
  4. 点击 创建密钥
  5. 复制密钥(以开头 sk-ant-api03-...)
# Set the key
export ANTHROPIC_API_KEY=sk-ant-api03-...

# Then run
npx flow-tracer serve

新帐户获取 $5免费积分每个问题的成本:约3.5美分。

可选环境变量:

ANTHROPIC_API_KEY=sk-ant-...                    # Required if no Claude CLI
FILE_SELECT_MODEL=claude-haiku-4-5-20251001     # Cheap model for file picking (default)
ANALYSIS_MODEL=claude-sonnet-4-20250514         # Quality model for analysis (default)
PORT=3847                                        # Web UI port (default)

运作原理

1. REGISTER: You give it repo paths. It scans all files and builds a
   compact manifest (function signatures + imports for each file).

2. ASK: You ask a question. Two LLM calls happen:
   Call #1 (fast): LLM reads the manifest and picks 15-25 relevant files
   Call #2 (deep): LLM reads those files and generates diagrams + explanation

3. FOLLOW UP: Ask more questions — the conversation context is preserved.

关键见解:我们让LLM读取函数签名和导入,以了解每个文件的功能,然后选择正确的文件,而不是关键字匹配文件路径(这会错过关键文件)。

MCP工具

当用作MCP服务器时,FlowTracer会公开:

工具 说明
register_repos 将repo路径注册到索引。先叫这个。
trace_flow 问一个关于代码流的问题。返回美人鱼+解释。
follow_up 使用之前的对话背景回答后续问题。
list_repos 列出所有已注册的回购组。

项目结构

flow-tracer/
├── bin/flow-tracer.js      # CLI entry point (mcp or serve)
├── src/
│   ├── mcp.js              # MCP server (for Claude Code/Desktop)
│   ├── server.js           # Express web server (browser UI)
│   ├── indexer.js           # Repo scanner + LLM-guided file selection
│   ├── llm.js              # Claude integration (CLI + API dual mode)
│   ├── summarizer.js        # Builds file manifest (signatures + imports)
│   └── public/index.html   # Chat UI with mermaid rendering
├── package.json
└── README.md

例子

"How does order creation work?"
"What happens when a user clicks checkout?"
"Trace the payment flow from frontend to backend"
"How does the cart sync between Shopify and our backend?"
"What services are involved in the refund flow?"
"Show me how authentication works across repos"