Installation
You can install using one of the following methods:
Method 1: Direct installation from VS Code Marketplace (Recommended)
https://marketplace.visualstudio.com/items?itemName=breaking-brake.cc-wf-studio
Clicking the link will automatically launch VSCode and display the extension installation screen.
Method 2: Search and install from within VSCode
- Open VSCode
-
Open the Extensions tab (
Ctrl+Shift+X/Cmd+Shift+X) - Search for "Claude Code Workflow Studio"
- Click "Install"
Quick Start
1Open the Visual Editor
Open the visual editor using one of the following methods:
Method 1: From the icon in the top right of the editor
Click the
icon in the top right of the editor
Method 2: From the Command Palette
Open the VSCode Command Palette (Ctrl+Shift+P/
Cmd+Shift+P) and run the following command:
Claude Code Workflow Studio: Open Workflow Editor2Create Your First Workflow
Once the visual editor is open, create a workflow by dragging and dropping nodes from the left palette:
- Drag a Sub-Agent nodeonto the canvas and enter a prompt
- Add Branch nodesor AskUserQuestion nodesas needed
- Connect nodes (drag from output port to input port)
3Save Your Workflow
Save your workflow to the .vscode/workflows/directory:
- Click the "Save" button in the toolbar
-
Enter a file name (e.g.,
my-workflow.json) - Confirm the save
4Export and Run
Export your designed workflow as a .claudefile:
- Click the "Export" button in the toolbar
-
Files will be generated in
.claude/agents/or.claude/commands/ - Run the created slash command in Claude Code
Next Steps
Once you understand the basics, check out these resources: