GitHub 上 2300 人 Star 的 Claude Code 可视化工作流编辑器。 - 链载Ai

这个叫ClaudeCode Workflow Studio的开源项目是专为设计的有点意思。

ingFang SC", system-ui, -apple-system, "system-ui", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 17px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: 0.544px;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;background-color: rgb(255, 255, 255);line-height: 2em;visibility: visible;">01

ingFang SC", system-ui, -apple-system, "system-ui", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 17px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: 0.544px;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;color: rgb(34, 34, 34);background-color: rgb(255, 255, 255);visibility: visible;">ingFang SC", system-ui, -apple-system, "system-ui", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;color: rgba(0, 0, 0, 0.9);font-size: 17px;visibility: visible;">开源项目简介

使用这个开源项目，你可以通过「拖拽节点」的方式，像画流程图一样来设计 Claude Code 的自动化任务、技能（Skills）和复杂的 Agent 逻辑，而不需要纯靠手写复杂的代码或配置文件。

除了部分你需要联网的 MCP 工具外，这个插件的所有编辑和生成逻辑都是在你的 VS Code 本地运行的，不会把你的隐私配置乱传到云端。

如果你懒得自己拖拽，可以直接点击 Edit with AI，然后用自然语言告诉它，它就会自动帮你把节点画好、线连好。

比如上面视频演示的就是一句话生成一个自动化的代码审查工作流。

你只需要输入：1）使用 GitHub MCP 工具获取 PR 详情；2）根据 PR 的规模，将其路由到小型/中型/大型代码审查流程3）如果发现问题则向用户报告，如果审查通过则请求批准权限

可以通过 MCP 直接调用外部工具，也可以复用你之前写好的特定 Skill。

同时支持添加「询问用户」的节点，比如 AI 干完活了，弹个选项让你选通过还是打回。

支持导出

你在画布上画完之后，点击导出，它会自动生成 Claude Code 能直接识别的 .claude/agents/ 和 .claude/commands/ 文件。

不需要你再去手动转换格式，导出后在终端里直接敲命令就能跑。

ingFang SC", system-ui, -apple-system, "system-ui", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;font-size: 17px;font-style: normal;font-variant-ligatures: normal;font-variant-caps: normal;font-weight: 400;letter-spacing: 0.544px;orphans: 2;text-align: justify;text-indent: 0px;text-transform: none;widows: 2;word-spacing: 0px;-webkit-text-stroke-width: 0px;white-space: normal;text-decoration-thickness: initial;text-decoration-style: initial;text-decoration-color: initial;color: rgb(34, 34, 34);background-color: rgb(255, 255, 255);visibility: visible;">ingFang SC", system-ui, -apple-system, "system-ui", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;color: rgba(0, 0, 0, 0.9);font-size: 17px;visibility: visible;">怎么玩？

使用这个项目其实非常简单，你的电脑里需要先装好 Claude Code 命令行工具。如果你没装过，可以在终端运行：

npminstall-g@anthropic-ai/claude-code

然后打开你的 VS Code，搜索 Claude Code Workflow Studio 然后安装就行了。

然后在 VS Code 里按下 Ctrl+Shift+P 打开命令面板，输入 Claude Code，选择 Claude Code Workflow Studio: Open Editor。

这时候你会看到一个新的标签页打开了，里面是一块空白的画布，这就是你的工作台。

开源地址：https://github.com/breaking-brake/cc-wf-studio