最近我在折腾 AI 编程工作流——你想让 Claude Code 自动做 PR 审查或者让好几个 Agent 分工协作最后发现最麻烦的不是写提示词而是把这一整套流程用 JSON / Markdown 配出来。文本配置有个通病能跑但肉眼基本看不懂。改个分支要翻半天括号想跟同事解释这个流程干嘛的对着一屏幕缩进只能干瞪眼。所以看到CC Workflow Studio这个项目时我第一反应是终于有人把画流程图那套体验搬过来了。它是个 VS Code 插件 [VS Code ExtensionVS Code 的插件装完就能在编辑器里直接用]核心就一件事——把 AI 工作流画出来而不是写出来。先说清楚它是干嘛的一句话版一个给 AI Agent 工作流用的可视化流程图编辑器。你在画布上拖节点、连线条设计完点一下就能导出成 Claude Code、GitHub Copilot、OpenAI Codex 等平台能直接用的格式。它想解决的是几个很实在的痛点工作流配置靠手搓 JSON / Markdown写完自己都懒得看第二眼想改现有流程得在文本里找位置、对括号容易改崩多 Agent 协作、条件分支这种逻辑纯文本里特别绕同一个流程想换平台用比如从 Claude Code 换到 Copilot格式不通用得重写。作者把它自己的定位写得挺妙“你用视觉思考AI 用.md思考这个工具两边都能说。”原话You think visually. AI thinks in.md. CC Workflow Studio speaks both.我为什么觉得它值得一试我翻了下它的实现和社区反馈几个点比较打动我1. 画布是真的画的不是换个皮写配置底层用的是 React Flow [React Flow一个专门画节点图的 React 库就是那种方块用线连起来的画布很多低代码工具都拿它做]。节点能拖、能缩放、能多选连线带箭头条件分支还能标 true/false。比起对着一个 JSON 数组脑补流程这种直观度高太多了。2. 能说人话改流程它有个Edit with AI功能你直接在对话框里写加一个代码安全检查的步骤它就去改画布上的节点和连线你确认后生效。这个后面单独讲。3. 导出覆盖的平台够多不止 Claude Code。我列个表数据来自项目 README目标平台导出到的目录Claude Code.claude/agents/、.claude/commands/GitHub Copilot Chat.github/prompts/GitHub Copilot CLI.github/skills/OpenAI Codex CLI.codex/skills/Zoo Code原 Roo Code.roo/skills/Gemini CLI.gemini/skills/Antigravity.agent/skills/Cursor.cursor/agents/、.cursor/skills/注意除了 Claude Code其他平台要从工具栏的More菜单里手动激活。4. 不只是插件还有 CLI 和 MCP除了 VS Code 里点来点去它也提供了命令行和 MCP 服务器 [MCPModel Context Protocol模型上下文协议让 AI 能统一调用外部工具/数据的接口标准相当于给 AI 装了一排USB 接口]所以可以嵌进你自己的自动化里。一个具体例子PR 代码审查流程怎么画光说功能太虚拿最常见的场景走一遍——用工作流做 Pull Request 代码审查。你希望一次审查覆盖代码分析 → 安全检查 → 性能评估 → 出报告。换成以前这是四段提示词手动串用 CC Workflow Studio就是四个节点一字排开中间加个条件分支比如有问题才进报告。画完导出到 Claude Code就能用/pr-review这种斜杠命令触发。同事接手时看这张图比看配置文件快得多。说人话改流程Edit with AI这是我个人觉得最省事的部分。传统改法打开 JSON找到对应那段改完祈祷语法没错。CC Workflow Studio 的做法是——点Edit with AI在对话框里打字“给审查流程加一个依赖漏洞扫描的步骤放在安全检查之后。”它会把当前工作流的状态发给 AI背后其实是启动了它自带的 MCP 服务器让 Claude Code / Copilot 来改AI 返回一组修改加节点、改连线、调配置画布上实时更新你确认就保存。本质上它把你从编辑配置文件的打字员变成提需求的人。这对不熟 JSON 的人特别友好。怎么装、怎么用装插件任选一种# 方式一命令行直接装code --install-extension breaking-brake.cc-wf-studio# 方式二VS Code 扩展市场搜 CC Workflow Studio 点安装# 方式三OpenVSX 下载 .vsix用 Install from VSIX 装不想装插件也能试# 用 npx 直接跑 CLI不用本地安装npx cc-wf-studio/cli--helpCLI 提供的子命令ccwf render|validate|export|run|preview|canvas|mcp打开编辑器右上角点 CC Workflow Studio 图标或CmdShiftPMac/CtrlShiftPWin→ 输入CC Workflow Studio: Open Editor。画第一个流程从左边节点面板拖节点到画布常见类型Agent、Condition、Action、MCP Tool点节点输出口拖到下一个节点输入口连起来点节点打开右侧配置面板填名称、提示词、参数点保存工作流存成.vscode/workflows/*.json点导出选目标平台生成对应格式文件。工作流文件长啥样导出的本质是一个 JSON节点和连线分开存。摘一段核心结构给你看已精简{nodes:[{id:node-1,type:agent,data:{name:代码审查Agent,description:审查代码质量和安全性,prompt:...,tools:[]},position:{x:100,y:100}}],edges:[{id:edge-1,source:node-1,target:node-2,type:default}],viewport:{x:0,y:0,zoom:1}}节点类型这块源码里大致是这么定义的// 支持的节点类型typeNodeType|agent// Agent 节点|condition// 条件判断节点|action// 动作节点|mcp-tool// MCP 工具节点|input// 输入节点|output;// 输出节点导出到不同平台长什么样导出不是简单拷贝而是按平台格式翻译一遍。给两个例子。Claude Code导出成 Markdown 形式的 Agent 说明书# .claude/agents/code-review-agent.md ## Agent: 代码审查Agent ### Description 审查代码质量和安全性 ### Steps 1. 分析代码结构 2. 检查安全问题 3. 评估代码质量 4. 生成审查报告 ### Tools - file-reader - security-scannerGitHub Copilot导出成 YAML 形式的 Prompt# .github/prompts/code-review.ymlname:Code Reviewdescription:审查代码质量和安全性steps:-name:Analyze Codeaction:analyze-name:Check Securityaction:security-scan进阶多 Agent 编排、条件分支、循环如果你要的不是一条直线而是一队人配合这部分要看看。子 Agent 编排[Sub-Agent子智能体主 Agent 手下的小弟各自负责一段活]支持建多个子 Agent各自有独立提示词还能互相传数据。三种协作模式顺序执行A 干完把结果交给 B像流水线并行执行几个 Agent 同时干最后汇总条件分支按条件挑不同的 Agent 走相当于动态路由。用个比喻顺序像工厂装配线并行像几个人同时包饺子分工条件分支像前台看情况决定转给哪个部门。子 Agent 协作在 JSON 里就是节点 带条件的连线{nodes:[{id:designer,type:agent,data:{name:架构设计师}},{id:developer,type:agent,data:{name:代码开发者}},{id:condition,type:condition,data:{condition:needs_refactor}}],edges:[{source:designer,target:condition},{source:condition,target:developer,condition:true}]}条件分支和循环支持 if-else也支持循环处理。画布上控制流一眼能看清不用在文本里数缩进。MCP 工具集成已装的 MCP 服务器会被扫出来每个工具变成一个节点参数在面板上配工具的输出还能接别的节点——相当于把外部能力拖进流程里。和纯文本配置比到底值不值我做了个粗对比⭐ 越多越好维度CC Workflow Studio纯文本配置其他可视化工具易用性⭐⭐⭐⭐⭐ 拖拽即可⭐⭐ 手搓配置⭐⭐⭐ 中等可视化⭐⭐⭐⭐⭐ 图形画布⭐ 纯文本⭐⭐⭐⭐ 图形AI 辅助⭐⭐⭐⭐⭐ 内置对话改⭐ 无⭐⭐ 部分多平台⭐⭐⭐⭐⭐ 8 种格式⭐⭐ 单平台⭐⭐⭐ 2–3 种上手成本⭐⭐⭐⭐ 较低⭐⭐ 要学语法⭐⭐⭐ 中等调试⭐⭐⭐⭐⭐ 一键运行⭐⭐ 手动测⭐⭐⭐ 部分适合谁用正在用 Claude Code / Copilot 的人想把自己常用的流程固化下来、复用带团队的统一团队的 Agent 工作流标准版本管理也方便毕竟是 JSON能进 Git要设计多 Agent 协作的条件分支、并行、子 Agent 这些在画布上比文本好理想跨平台迁移流程的一套图导出多处用想学工作流设计模式的导入别人的配置看图比读文档快。几点客观提醒说好话也得说实话协议是 AGPL-3.0[AGPL-3.0一种开源协议你改了它的代码也得开源]VS Code 扩展本体npm 库是 MIT。只是用它设计工作流不受影响但如果你要改它源码再发布得注意。AI 编辑要接 AI 提供方Edit with AI 默认走 Claude Code用 Copilot / Codex 得另外装或配 key不是开箱就纯离线。社区还在长GitHub 上 Issues / PR 一直在动但官方说样例工作流和教程还在补新手入门可能得自己多摸索。数据上项目目前 3.4k Star、398 Fork来源原文素材OpenVSX 上最新扩展版本已到 v3.36.0迭代挺活跃。资源地址GitHubhttps://github.com/breaking-brake/cc-wf-studioOpenVSX开源插件市场搜breaking-brake.cc-wf-studioCLI 试用npx cc-wf-studio/cli --help如果你也受够了手搓 Agent 配置建议直接npx跑一下看看画布手感。觉得顺手再装插件不迟——反正不亏。