CC Workflow Studio — 視覺化 AI Agent Workflow 編輯器深度教學

把腦中的 multi-agent workflow 拖拉成圖，匯出給 Claude Code / Copilot / Cursor / Codex / Gemini 直接執行。
同一份 workflow.json 同時驅動 VSCode extension、CLI、MCP server — 沒有「VSCode-only」路徑。

1. 專案定位

CC Workflow Studio 解決的核心問題是：人類用視覺方式設計流程，AI 用 markdown 思考工作流，兩者中間缺一個「視覺化編輯 + markdown 匯出」的橋。

對比	傳統做法	CC Workflow Studio
設計 multi-agent 流程	手寫 prompt 拼貼、反覆試錯	拖拉節點、視覺化編輯
跨 agent 部署	每種 agent 重寫一份 skill	一份 workflow.json 匯出 8 種格式
編輯入口	限定一個工具	VSCode / CLI / MCP 三個對等入口
AI 協作編輯	純對話、無持久狀態	MCP server + 雙向 canvas sync

目標使用者：

VSCode 開發者，想用視覺化方式設計 Claude Code / Copilot Chat 的 skill / agent workflow
CLI / CI 重度使用者，需要在無 VSCode 環境（SSH、Codespaces、CI runner）讀寫 workflow
想讓 AI agent 用 MCP 自主編輯 workflow 的進階用戶

與類似工具的差異：

比 Dify 更「貼近 coding agent」（直接輸出 .claude/skills/、.cursor/agents/ 等檔案）
比手寫 prompt 多了「視覺結構化」與「跨 agent 統一」
比 LangFlow 多了 MCP 與 sub-agent 的 first-class 支援

2. 安裝指南

三條安裝路徑，依使用情境選擇：

2.1 VSCode Extension（最完整體驗）

1# Marketplace
2code --install-extension breaking-brake.cc-wf-studio
3
4# OpenVSX（VSCodium / Cursor / 其他相容編輯器）
5# 從 https://open-vsx.org/extension/breaking-brake/cc-wf-studio 下載 .vsix

啟動後在編輯器右上角會出現 ⚙ icon，或從 Command Palette（Cmd+Shift+P）執行 “CC Workflow Studio: Open Editor”。

2.2 CLI（無 VSCode 環境）

1# 一次性執行
2npx @cc-wf-studio/cli --help
3
4# 全域安裝
5npm i -g @cc-wf-studio/cli
6
7ccwf --version
8ccwf render ./my-workflow.json

需求：Node ≥ 20。

2.3 MCP Server（讓 AI agent 自主編輯）

1npx @cc-wf-studio/mcp ./my-workflow.json

或在 .mcp.json 加入：

1{
2  "mcpServers": {
3    "cc-wf-studio": {
4      "type": "stdio",
5      "command": "npx",
6      "args": ["@cc-wf-studio/cli", "mcp", "--file", ".vscode/workflows/my-workflow.json"]
7    }
8  }
9}

2.4 開發者本地建置

1git clone https://github.com/breaking-brake/cc-wf-studio
2cd cc-wf-studio
3pnpm install
4pnpm build       # 建置全 monorepo
5pnpm ccwf:dev render packages/cli/fixtures/sample-workflow.json   # tsx 直跑 src

需求：pnpm@11.1.2、Node ≥ 20。

3. 核心架構解析

CC Workflow Studio 是 pnpm monorepo，分為 4 個 packages，共用 @cc-wf-studio/core 的 workflow schema：


flowchart TD
    A["workflow.json
(single source of truth)"]

    subgraph Core["packages/core"]
        S["JSON Schema
+ validators
+ overview formatter"]
    end

    subgraph VSCode["packages/vscode"]
        UI["React Flow Canvas
+ WebView UI"]
    end

    subgraph CLI["packages/cli"]
        CCWF["ccwf bin
(render / validate / export /
run / preview / canvas / mcp)"]
    end

    subgraph MCP["packages/mcp"]
        MCPSVR["ccwf-mcp bin
(stdio MCP server)"]
    end

    subgraph Agents["AI Coding Agents (匯出目標)"]
        CC[".claude/skills/
.claude/agents/"]
        CUR[".cursor/skills/"]
        CDX[".codex/skills/"]
        GH[".github/skills/"]
        ROO[".roo/skills/"]
        GEM[".gemini/skills/"]
        AG[".agent/skills/"]
    end

    UI <-->|edit| A
    CCWF <-->|read / write| A
    MCPSVR <-->|read / write| A

    S -.->|validate| UI
    S -.->|validate| CCWF
    S -.->|validate| MCPSVR

    CCWF -->|ccwf export --agent X| CC
    CCWF --> CUR
    CCWF --> CDX
    CCWF --> GH
    CCWF --> ROO
    CCWF --> GEM
    CCWF --> AG

設計重點：

層	套件	角色
Schema	`@cc-wf-studio/core`	定義 workflow JSON 結構（nodes / connections / SubAgent / AgentSkill / MCP Tool / SlashCommand）
UI	`packages/vscode`	React Flow canvas + WebView，編輯器入口
CLI	`@cc-wf-studio/cli`	`ccwf` 命令列工具，render / validate / export / run / preview / canvas
MCP	`@cc-wf-studio/mcp`	`ccwf-mcp` stdio MCP server，讓 AI agent 透過工具呼叫讀寫 workflow

關鍵節點型態（workflow 內的 building block）：

SubAgent：呼叫一個 sub-agent（如 Claude Code 的 Task tool 對應的 sub-agent）
AgentSkill：插入一個已存在的 skill 作為步驟
MCP Tool：呼叫一個 MCP server 提供的 tool
SlashCommand：寫一段 slash command（legacy，逐步被 AgentSkill 取代）

MCP 編輯流程（Edit with AI）：


sequenceDiagram
    actor User
    box VS Code (CC Workflow Studio)
        participant UI as Editor UI
        participant MCP as MCP Server
    end
    participant Agent as AI Agent

    User->>UI: Click agent button
    UI->>MCP: Auto start server
    UI->>Agent: Launch with editing skill

    loop AI edits workflow
        Agent->>MCP: get_workflow
        MCP-->>Agent: workflow JSON
        Agent->>MCP: apply_workflow
        MCP->>UI: Update canvas
    end

4. Helper Scripts / CLI 詳細用法

ccwf 是這個專案最重要的命令列入口。9 個子指令：

指令	用途
`ccwf render <file>`	印出 Mermaid + 執行說明 markdown（stdout）
`ccwf validate <file>`	Schema 檢查 workflow JSON，exit 0/1，`--json` 給機器可讀格式
`ccwf mcp --file <file>`	啟動 stdio MCP server 對指定檔案
`ccwf export <file>`	把 workflow 匯出成 agent skill / agent 檔案（`--agent` 指定目標）
`ccwf run <file>`	`export` + 提示「下一步怎麼做」；`--launch` 額外啟動 Claude Code
`ccwf preview <file>`	開唯讀瀏覽器預覽（Mermaid + 每節點 markdown），檔案變更自動 reload
`ccwf canvas <file>`	（experimental）開可編輯的完整 canvas 在瀏覽器
`ccwf install-skills`	安裝 ccwf 自己的 Claude Code skill 到 `~/.claude/skills/`
`ccwf uninstall-skills`	移除 ccwf skill

4.1 典型開發流程

 1# 1. 用 VSCode 畫好 workflow，存成 .vscode/workflows/my-flow.json
 2
 3# 2. 在 terminal 檢查
 4ccwf validate .vscode/workflows/my-flow.json
 5ccwf render .vscode/workflows/my-flow.json | less
 6
 7# 3. 預覽（不可編輯）
 8ccwf preview .vscode/workflows/my-flow.json
 9# → 開 http://localhost:<port>/<uuid>/，瀏覽器自動 reload
10
11# 4. 匯出給 Claude Code
12ccwf export .vscode/workflows/my-flow.json --agent claude-code
13# → 產生 .claude/skills/my-flow/SKILL.md + .claude/agents/<sub-agent>.md
14
15# 5. 跨 agent 部署
16ccwf export .vscode/workflows/my-flow.json --agent cursor
17ccwf export .vscode/workflows/my-flow.json --agent codex --cwd /tmp/proj

4.2 重要參數

--agent：claude-code（預設） / cursor / codex / copilot / gemini / roo-code / antigravity
--cwd：指定匯出根目錄（預設 process.cwd()）
--overwrite：強制覆寫已存在檔案
--launch（限 run）：匯出後自動啟動 claude binary
--port / --host（限 preview / canvas）：綁定埠 / 主機
--keep-alive（限 preview）：不要在 tab 關閉 30 秒後自動關閉 server

4.3 MCP server 模式

ccwf mcp --file <file> 等同於 ccwf-mcp standalone bin，提供以下 MCP tools 給外部 AI agent：

get_workflow — 讀取目前 workflow
apply_workflow — 覆寫整份 workflow
update_nodes — 部分節點更新（partial patch）
get_revision — 取得 canvas revision（樂觀並行控制）

5. 應用場景

5.1 內部 skill / agent 共享

把團隊常用的 multi-step workflow（例如 PR review、release 流程、jira 規劃）畫成 canvas，匯出成 .claude/skills/ 後 commit 到 repo，所有 team member 的 Claude Code 都會自動載入。

5.2 跨 AI agent 部署

同一份 workflow.json 可同時匯出給：

Claude Code（.claude/skills/）
GitHub Copilot Chat（.github/prompts/）
Cursor（.cursor/skills/ + .cursor/agents/）

避免「每個 agent 重寫 prompt」的 N×M 問題。

5.3 AI 自主迭代 workflow

開啟 MCP server，讓 Claude Code 透過自然語言對 workflow 增刪節點：

「加一個 sub-agent 處理 security review」
「把 deploy 節點改成手動確認」

Canvas 即時同步，使用者只負責高層決策。

5.4 CI / Codespaces

在無 VSCode 的環境（CI runner、SSH 進 server、Codespaces 純 web），用 ccwf preview 或 ccwf canvas 在瀏覽器開 workflow，避免被綁定 VSCode。

6. 資安掃描報告

6.1 紅黃綠燈總結

風險面向	等級	說明
任意程式碼執行	🟢 低	無 `eval()` / `exec()` / `child_process.exec()`；只有受控的 `spawn()` 啟動 `claude` binary（從 `PATH` 解析）
網路存取	🟢 低	core / cli / mcp 套件 src 內無 `fetch` / `http.request`；唯一例外是 Snyk badge 與 marketplace 連結（純 README 連結）
檔案系統寫入	🟡 中	`export.ts` / `canvas/handlers.ts` / `mcp/file-adapter.ts` 會寫檔，但路徑都由使用者傳入；`--cwd` + `--overwrite` 提供顯式控制
本機 HTTP / WebSocket	🟢 低	`preview` / `canvas` 預設綁 `127.0.0.1`；URL 含 per-session UUID 前綴（無前綴 → 403）；`--host 0.0.0.0` 時 banner 明確警示
Secret / Token	🟢 低	src 內無 hard-coded API key / token；`.snyk` 規範存在
MCP server 暴露面	🟡 中	`ccwf-mcp` 走 stdio（非 network），但接受任意 `apply_workflow` patch；攻擊面取決於上層 AI agent 是否被 prompt injection
依賴鏈	🟡 中	Snyk 自動掃描 + Dependabot；無已知 CVE；但 `@modelcontextprotocol/sdk` / `commander` / `keytar` 等套件需持續追蹤
License 風險	🟢 低	monorepo root AGPL-3.0；libs（core / cli / mcp / vscode webview）2026-05-24 已 relicense 為 MIT，方便嵌入閉源產品

6.2 主要發現

本機 HTTP server 設計安全：preview 與 canvas 採「loopback + UUID slug + 30 秒 tab-closed auto-shutdown」三層防護，非 loopback 綁定時 banner 顯示明確警告。
MCP server 信任邊界清楚：stdio 模式不開網路埠，攻擊面只在「呼叫 ccwf-mcp 的 AI agent 是否可信」；HTTP 模式（127.0.0.1:6289）的暴露面與 preview 一致。
檔案寫入需注意：ccwf export --overwrite 會無確認覆寫；在 CI 或自動化情境建議先 --dry-run（如未來支援）或在 commit 前人工檢查 diff。
官方安全機制：SECURITY.md 標準完整（GitHub Security Advisory、48 小時 ACK、30 天 fix SLA）；Snyk 每週掃描；Dependabot 自動 PR。

6.3 部署建議

內部團隊使用 ✅ 安全可採用
在 multi-tenant CI runner 使用 ⚠️ 注意 --host 0.0.0.0 一定要關
給不可信 AI agent 直接綁 MCP server ❌ 需先在 sandbox 隔離（pod / 容器）

7. FAQ

Q1：要不要從 VSCode extension 開始？
A：如果你已經用 VSCode / Cursor / VSCodium 寫 code 是最順的。CLI / MCP 是給「沒有 VSCode、但想要 workflow」的進階用戶。

Q2：免費嗎？商用可以嗎？
A：core / cli / mcp / vscode webview 是 MIT，可商用、可閉源嵌入。Monorepo root（含建置腳本）是 AGPL-3.0，自己跑沒事，但若把整個 monorepo 改造後對外提供 SaaS，需開源你的修改。

Q3：和 Dify / LangFlow 差在哪？
A：CC Workflow Studio 直接「輸出 markdown 給 coding agent」（檔案層級整合），Dify / LangFlow 是「self-host 一個 workflow runtime」（執行層級整合）。前者貼近 IDE 與 git workflow，後者貼近 production AI app。

Q4：MCP server 安全嗎？
A：stdio 模式 ✅ 安全（無網路埠）；HTTP 模式 ✅ 安全（127.0.0.1 + UUID slug）。風險主要在「上層 AI agent 是否會被 prompt injection 騙去亂寫 workflow」。

Q5：能離線使用嗎？
A：可以。所有核心功能（畫布、export、preview）都不需要網路；只有 Snyk 掃描 / npm install / VSCode marketplace 更新需要網路。

8. 進階技巧

8.1 Sub-Agent 巢狀

在 canvas 中放一個 SubAgent 節點，可以指向另一份 workflow.json，形成 multi-level orchestration：

1parent-workflow.json
2  ├── SubAgent → child-workflow-1.json
3  ├── SubAgent → child-workflow-2.json
4  └── AgentSkill → existing skill

8.2 結合 Claude Code Skills

ccwf install-skills 會把 ccwf 自己的 skill 裝到 ~/.claude/skills/，這樣 Claude Code 在你說「幫我看一下這個 workflow」時，會自動呼叫 ccwf preview 或 ccwf render。

8.3 在 CI 跑 validate

.github/workflows/validate-workflows.yml：

1- run: npx @cc-wf-studio/cli validate .vscode/workflows/*.json --json

Exit code 0/1，CI 直接擋住格式錯誤的 PR。

8.4 Custom IO Adapter

packages/mcp 提供 IO adapter contract，可實作 git-based、database-based、cloud-storage-based 的 workflow 儲存後端，替代預設的 file-adapter。

9. 整合進其他工作流

9.1 與 AI-Knowledge Template 整合

1ccwf export → .claude/skills/<workflow>/SKILL.md
2            ↓
3gh-tutorial-qd（本 layer）→ inbox/ + Discord 分享
4            ↓
5quarkdown → HTML
6            ↓
7patent-creator / paper-tutorial 引用 workflow 作為 supplementary material

9.2 與 patent-creator / meeting-intel

把 patent draft / meeting prep 流程畫成 workflow，匯出後在 Claude Code 直接執行，每次都走同樣 SOP，避免人工漏步驟。

9.3 與 graphify / gitnexus

ccwf preview 開啟後，可以 side-by-side 對照 graphify 產出的 GRAPH_REPORT.md，視覺化驗證 workflow 是否覆蓋所有關鍵模組。

10. 重點摘要 Checklist

安裝：VSCode extension（最順） / CLI (npm i -g @cc-wf-studio/cli) / MCP server 三選一
核心：一份 workflow.json，三個對等入口（VSCode / CLI / MCP），匯出 8 種 agent 格式
CLI 9 個子指令：render / validate / mcp / export / run / preview / canvas / install-skills / uninstall-skills
資安：🟢 整體低風險；本機 HTTP loopback + UUID 防護；MCP 走 stdio
License：libs (core/cli/mcp) MIT 可商用，monorepo root AGPL-3.0
推薦對象：用 Claude Code / Copilot / Cursor 設計 multi-agent workflow 的開發者
不推薦對象：純文字 prompt 玩家、不想學視覺化編輯的 hacker
升級頻率：高（每週 2-3 個 release），跟著 Changesets + OIDC 自動發佈
內部部署建議：✅ 可採；MCP server 給不可信 agent 時請容器隔離

11. 進一步閱讀

主 README：https://github.com/breaking-brake/cc-wf-studio/blob/main/README.md
CLI 詳細文件：https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/cli/README.md
MCP 詳細文件：https://github.com/breaking-brake/cc-wf-studio/blob/main/packages/mcp/README.md
VSCode extension：https://marketplace.visualstudio.com/items?itemName=breaking-brake.cc-wf-studio
OpenVSX：https://open-vsx.org/extension/breaking-brake/cc-wf-studio
DeepWiki 自動 Q&A：https://deepwiki.com/breaking-brake/cc-wf-studio
Speaker Deck（Why CC Workflow Studio）：https://speakerdeck.com/seiyakobayashi/cc-workflow-studio
SECURITY policy：https://github.com/breaking-brake/cc-wf-studio/blob/main/SECURITY.md
React Flow（底層 canvas）：https://reactflow.dev/
MCP 規範：https://modelcontextprotocol.io/

CC Workflow Studio — 視覺化 AI Agent Workflow 編輯器深度教學

Contents

CC Workflow Studio — 視覺化 AI Agent Workflow 編輯器深度教學

1. 專案定位

2. 安裝指南

2.1 VSCode Extension（最完整體驗）

2.2 CLI（無 VSCode 環境）

2.3 MCP Server（讓 AI agent 自主編輯）

2.4 開發者本地建置

3. 核心架構解析

4. Helper Scripts / CLI 詳細用法

4.1 典型開發流程

4.2 重要參數

4.3 MCP server 模式

5. 應用場景

5.1 內部 skill / agent 共享

5.2 跨 AI agent 部署

5.3 AI 自主迭代 workflow

5.4 CI / Codespaces

6. 資安掃描報告

6.1 紅黃綠燈總結

6.2 主要發現

6.3 部署建議

7. FAQ

8. 進階技巧

8.1 Sub-Agent 巢狀

8.2 結合 Claude Code Skills

8.3 在 CI 跑 validate

8.4 Custom IO Adapter

9. 整合進其他工作流

9.1 與 AI-Knowledge Template 整合

9.2 與 patent-creator / meeting-intel

9.3 與 graphify / gitnexus

10. 重點摘要 Checklist

11. 進一步閱讀

Comments

CC Workflow Studio — 視覺化 AI Agent Workflow 編輯器深度教學

Contents

CC Workflow Studio — 視覺化 AI Agent Workflow 編輯器深度教學

1. 專案定位

2. 安裝指南

2.1 VSCode Extension（最完整體驗）

2.2 CLI（無 VSCode 環境）

2.3 MCP Server（讓 AI agent 自主編輯）

2.4 開發者本地建置

3. 核心架構解析

4. Helper Scripts / CLI 詳細用法

4.1 典型開發流程

4.2 重要參數

4.3 MCP server 模式

5. 應用場景

5.1 內部 skill / agent 共享

5.2 跨 AI agent 部署

5.3 AI 自主迭代 workflow

5.4 CI / Codespaces

6. 資安掃描報告

6.1 紅黃綠燈總結

6.2 主要發現

6.3 部署建議

7. FAQ

8. 進階技巧

8.1 Sub-Agent 巢狀

8.2 結合 Claude Code Skills

8.3 在 CI 跑 validate

8.4 Custom IO Adapter

9. 整合進其他工作流

9.1 與 AI-Knowledge Template 整合

9.2 與 patent-creator / meeting-intel

9.3 與 graphify / gitnexus

10. 重點摘要 Checklist

11. 進一步閱讀

Related Posts

Comments