【免费下载链接】codag-visualizer
Visualize AI/LLM workflows in your codebase.
Codag 是一款 VS Code 扩展，能自动扫描代码库中的 LLM API 调用与 AI 框架，把复杂的 AI/LLM 工作流渲染成可交互的可视化图谱。如果你使用的模型服务不在 Codag 内置的 20 多个供应商列表里，别担心——官方设计让"接入新的 LLM 供应商"只需5 行代码，且完全不需要改动后端。本文带你从零走通整个流程。
为什么 Codag 加供应商如此简单？
先理解 Codag 的架构设计，你就能明白"5 行"是怎么做到的：
- 单一事实来源：所有供应商的检测模式都集中在 frontend/src/providers.ts 这一个文件里。注释里写得很直白："To add a new provider, add an entry to LLM_PROVIDERS array."（添加新供应商 = 往
LLM_PROVIDERS数组里加一条记录） - 派生列表自动生成：文件底部的
ALL_IMPORT_PATTERNS、QUICK_SCAN_PATTERNS等导出项都是通过flatMap从数组自动展开的。你只写一份数据，所有下游功能（快速扫描、导入识别、调用识别）全部自动生效 - 无需后端改动：官方 CONTRIBUTING.md 明确说明"No backend changes needed"，改完前端编译即可
也就是说，你只需要回答两个问题：你的 SDK 的 import 长什么样？你的 API 调用长什么样？
实战：给 Codag 接入 LiteLLM 供应商
假设你的项目用了 LiteLLM 这类聚合 SDK，而 Codag 内置列表里还没有它。三步搞定：
第 1 步：观察你的代码特征
打开你的业务代码，确认两个模式：
from litellm import completion # import 特征 resp = completion(model="gpt-4o", messages=msgs) # 调用特征第 2 步：向 LLM_PROVIDERS 数组添加一个条目
打开 frontend/src/providers.ts#L46，在LLM_PROVIDERS数组的任意位置加入一个对象（对照 DeepSeek 等现有条目 providers.ts#L219-L228 即可理解每个字段）：
{ id: 'litellm', displayName: 'LiteLLM', identifiers: ['litellm'], importPatterns: [/from\s+litellm\s+import/i, /import\s+litellm/i], callPatterns: [/completion\s*\(/], },5 行核心代码，字段含义如下：
| 字段 | 作用 | 填写建议 |
|---|---|---|
id | 唯一标识（小写） | 用于内部标识与缓存，保持短小 |
displayName | UI 中显示的名称 | 面向用户的品牌名 |
identifiers | 简单字符串匹配（小写） | SDK 名、包名，用于快速文本扫描 |
importPatterns | 正则：检测 SDK 导入 | 覆盖 Pythonfrom x import和 JSimport ... from 'x'等写法 |
callPatterns | 正则：检测 API 调用（可选） | 如.chat.completions.create这类标志性调用 |
💡 参考 providers.ts#L50-L64 中 OpenAI 的写法：同时覆盖
from openai import、new OpenAI(等多种语言习惯，正则建议加i标志忽略大小写。
第 3 步：编译并重启扩展
cd frontend npm run compile回到 VS Code 重新加载窗口（Developer: Reload Window），用 Codag 分析包含 LiteLLM 调用的文件，图中对应节点就会带上新的供应商标签 ✅
接入后这些能力会自动点亮
新条目加入数组后，以下模块零改动地开始识别你的供应商，这正是"单一事实来源"设计的价值：
- 快速预扫描：static-analyzer.ts 直接使用
QUICK_SCAN_PATTERNS，在深入解析前先过滤出"可能含 LLM 代码"的文件 - 导入语句识别：cache.ts 调用
isLLMImport()判断缓存中的导入是否属于 LLM SDK - API 调用识别：tree-sitter/extractors.ts 用
isLLMCall()与mightContainLLM()配合 tree-sitter 精确提取工作流节点 - 供应商标签：local-graph-updater.ts 通过
identifyProvider()把识别出的供应商 ID 打到图谱节点上，实现"点击节点 → 看到用的是哪家模型"
常见坑与 FAQ
Q：identifiers写得太宽泛会怎样？identifiers走的是简单字符串包含匹配（小写），像openai这样短的词可能误伤普通文本。建议优先依赖更精确的importPatterns正则，identifiers只保留高置信度的特征词。
Q：为什么我的文件没被识别为工作流？Codag 判定工作流需要"客户端导入 + API 调用"同时出现（或使用了已知框架）。只写callPatterns而没有写对importPatterns，文件会被漏掉——两个正则都要覆盖你代码的实际写法。
Q：这里的"供应商"和 Codag 自己的分析引擎是同一回事吗？不是。本文说的供应商是 Codag在你的代码里检测的模型服务；而 Codag 自己调用 LLM 做分析时用的是 Gemini，通过 backend/config.py 读取backend/.env中的gemini_api_key配置，两者互不影响。
Q：后端 backend/analyzer.py 里也有一份模式列表，要同步改吗？不用。按官方贡献指南，添加供应商只需改前端providers.ts，该文件是供应商检测的权威来源。
进阶：还可以扩展哪些检测列表？
providers.ts里除了LLM_PROVIDERS，还有两个数组值得了解：
LLM_FRAMEWORKS（providers.ts#L412）：框架列表，含 LangChain、LangGraph、CrewAI 等。接入新框架同样是加一个条目AI_SERVICE_DOMAINS（providers.ts#L517）：语音、视频、图像生成类服务的域名匹配，只需追加一行正则
小结
| 步骤 | 操作 | 耗时 |
|---|---|---|
| 1 | 观察目标 SDK 的 import 与调用写法 | ~1 分钟 |
| 2 | 向LLM_PROVIDERS添加 5 行条目 | ~5 分钟 |
| 3 | npm run compile并重新加载窗口 | ~1 分钟 |
Codag 用"单一事实来源 + 自动派生"的设计，把扩展一个 LLM 供应商的成本压到了极限。如果你的团队在用冷门或自研的模型网关，这 5 行代码就是你的入场券 🚀
【免费下载链接】codag-visualizer
Visualize AI/LLM workflows in your codebase.
相关推荐
如何为 Mirrai 接入新的 LLM 提供商？从零实现 LLMProvider 接口完整教程
如何为 Mirrai 接入新的 LLM 提供商？从零实现 LLMProvider 接口完整教程 Mirrai 是一款开源的 AI 情感陪伴应用，内置 12 家
uBlock Origin：免费开源广告拦截插件，被拦请求零字节下载
uBlock Origin：免费开源广告拦截插件，被拦请求零字节下载 浏览器扩展商店里搜 "uBlock Origin"，装上就能用。它免费、GPLv3 开源，
网络安全应用安全Codag支持的17家LLM供应商与10大AI框架清单：你的技术栈能直接可视化吗？
Codag支持的17家LLM供应商与10大AI框架清单：你的技术栈能直接可视化吗？ Codag 是一款 VS Code 插件，专注于 LLM 工作流可视化 ：它
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
