Design Agent Workflows on a Canvas With CC Workflow Studio

Multi-step agent workflows live or die as prompt text: one long markdown file nobody can see the shape of. CC Workflow Studio, a 5k-star project, puts the workflow on a canvas instead — you design it visually, and it exports the markdown your AI agent already understands. As the README puts it: "You think visually. AI thinks in .md. CC Workflow Studio speaks both."

Why This Skill Matters

The editor is a drag-and-drop canvas for AI agent orchestrations: sub-agent orchestration, agent skills, and MCP tool integration are the documented building blocks. Workflows save as .vscode/workflows/*.json, and one export click turns that file into a .md slash command or agent skill — you then invoke it as /workflow-name in your AI coding agent. Eight agent targets are documented in the README's table: Claude Code (.claude/agents/, .claude/commands/), GitHub Copilot Chat (.github/prompts/), GitHub Copilot CLI (.github/skills/), OpenAI Codex CLI (.codex/skills/), Zoo Code (.roo/skills/), Gemini CLI (.gemini/skills/), Antigravity (.agent/skills/), and Cursor (.cursor/agents/, .cursor/skills/). Claude Code is the native path; the README notes the other agents require activation from the toolbar's More menu.

The same workflow.json drives three interfaces: the VS Code canvas, a CLI, and an MCP server. The README is explicit that there is no "VSCode-only" path — a workflow you draw is the same file ccwf preview renders in a browser and the same file an external agent edits through MCP.

Installation

The extension installs from the VS Code Marketplace:

code --install-extension breaking-brake.cc-wf-studio

The CLI is the terminal entry point — render, validate, export, run, preview, canvas, and mcp subcommands, usable in CI, SSH, or Codespaces:

npx @cc-wf-studio/cli --help

The MCP server (@cc-wf-studio/mcp, stdio ccwf-mcp) lets an external AI client read and edit workflows; add it to your MCP client's .mcp.json. Note the licensing split: the VS Code extension is AGPL-3.0, while the npm libraries (@cc-wf-studio/core, @cc-wf-studio/cli, @cc-wf-studio/mcp) are MIT.

Real Workflow: From Canvas to Slash Command

Launch the editor from the toolbar icon or the command palette (Cmd+Shift+P → "CC Workflow Studio: Open Editor"), add nodes from the palette, and configure their settings. Save writes .vscode/workflows/*.json; Export creates the .md slash command or agent skill; Run executes the workflow directly in your AI coding agent.

For the AI-assisted route, click Edit with AI and pick an agent in the panel — the MCP server starts automatically behind the scenes, and the agent edits your workflow through get_workflow and apply_workflow while the canvas updates live:

帮我把这个工作流加一个代码评审节点：PR 描述先由一个子代理总结，然后另一个子代理检查测试覆盖，最后汇总成一条评论。

Tips

• Keep the canvas as the source of truth and re-export after every change — the exported .md is a build artifact of the workflow.json.
• Validate from the terminal before committing: ccwf validate checks the file without opening VS Code.
• The README's supported-agents table is the authority on export paths; if you switch agents, re-check which directories that agent reads.
• Non-Claude-Code targets stay dormant until you activate them from the toolbar's More menu, per the README's note.
• The repo's "Usage Examples" section is marked "coming soon", so treat your first workflow as original design work, not a copy-paste.

When Not to Use This

If your workflow is already stable markdown that never changes, a canvas adds a build step without adding clarity. And if you live exclusively in the terminal, the CLI covers render, validate, export, run, preview, and canvas — but the drag-and-drop editing itself is the VS Code extension's job.

See the leaderboard for more skills.