Claud.ing Workflow
🚀 Visual workflow editor for Claude Code with AI assistance, templates, and enhanced productivity features
✨ What's New in Claud.ing Workflow?
🎯 Workflow Templates Library
- 5+ Pre-built Templates: Get started instantly with ready-to-use workflows
- Categorized & Searchable: Find templates by category, difficulty, or tags
- One-Click Application: Apply templates and customize to your needs
- Templates include:
- PR Code Review (Beginner)
- Data Analysis Pipeline (Intermediate)
- Documentation Generator (Intermediate)
- Unit Test Generator (Advanced)
- Blog Post Creator (Beginner)
📜 Version Control
- Auto-Versioning: Every workflow save creates a version snapshot
- Visual History: See all past versions with timestamps
- One-Click Rollback: Restore any previous version instantly
- Diff Comparison: Compare changes between versions
- Configurable History: Keep 1-50 versions (default: 10)
🎨 Enhanced UI/UX
- Custom Theme: Modern design and improved visual aesthetics
- Better Organization: Improved node palette with categories
- Cleaner Interface: Streamlined property panels
- Responsive Design: Optimized for all screen sizes
- Faster Load Times: Optimized bundle size (<5MB)
- Efficient Rendering: Improved React Flow performance
- Smart Caching: MCP and template caching
🚀 Quick Start
Installation
From VS Code Marketplace (Recommended)
- Open VS Code Extensions (
Ctrl+Shift+X / Cmd+Shift+X)
- Search for "Claud.ing Workflow"
- Click Install
From VSIX
- Download the latest
.vsix from Releases
- Open VS Code Extensions →
... → "Install from VSIX..."
Prerequisites
First Steps
Open the Editor
- Press
Ctrl+Shift+P / Cmd+Shift+P
- Type "Claud.ing Workflow: Open Editor"
- Press Enter
Try a Template (New!)
- Click "Templates" button in toolbar
- Browse available templates
- Click "Use Template" to start
- Customize and save
Take the Tour
- Click ? button in toolbar
- Follow the interactive guide
- Learn workflow creation step-by-step
📚 Core Features
Visual Workflow Editor
Intuitive drag-and-drop canvas for designing AI workflows without code.
Supported Node Types:
- Basic: Start, End, Prompt, Sub-Agent
- Control Flow: IfElse, Switch, AskUserQuestion
- Integration: Skill, MCP (Model Context Protocol)
- Advanced: Sub-Agent Flow (nested workflows)
AI-Assisted Workflow Refinement
Iteratively improve workflows through conversational AI.
How it Works:
- Click "Edit with AI" (✨ button)
- Describe your changes in natural language
- AI modifies your workflow intelligently
- Review, accept, or request more changes
- Repeat until perfect
Example Requests:
"Add error handling after the API call"
"Connect the validator to a logging Sub-Agent"
"Change the question node to have 3 options: High, Medium, Low"
Claude Code Skills Integration
Reference and create Skills directly from the visual editor.
- Browse Skills: Search personal (
~/.claude/skills/) and project (.claude/skills/) Skills
- Create New: Build Skills with guided forms
- Auto-Dependency: Exported workflows include Skill references
MCP (Model Context Protocol) Tools
Integrate external tools and services into workflows.
- Server Discovery: Automatically detect configured MCP servers
- Tool Selection: Browse and search available tools
- Dynamic Forms: Auto-generated parameter configuration
- Type Safety: Real-time validation with JSON Schema
Slack Workflow Sharing (β)
Share workflows with your team via Slack.
Features:
- One-click upload to Slack channels
- AI-generated workflow descriptions
- Deep link imports:
vscode://moecode-workflow/import?...
- Sensitive data detection
Export to Claude Code
Generate ready-to-use .claude files.
Output:
.claude/agents/*.md - Sub-Agent definitions.claude/commands/*.md - Slash Commands
Run Immediately:
/your-workflow-name
🆕 Using Workflow Templates
Browse Templates
- Open Claud.ing Workflow
- Click "Templates" in toolbar
- Filter by:
- Category: Code Review, Data Analysis, Testing, etc.
- Difficulty: Beginner, Intermediate, Advanced
- Tags: git, automation, documentation, etc.
Apply a Template
- Select a template
- Click "Use Template"
- Workflow loads on canvas
- Customize as needed
- Save with your own name
Available Templates
| Template |
Category |
Difficulty |
Nodes |
Use Case |
| Simple PR Review |
Code Review |
Beginner |
3 |
Automated pull request analysis |
| Data Pipeline |
Data Analysis |
Intermediate |
6 |
Process and visualize data files |
| Doc Generator |
Documentation |
Intermediate |
4 |
Auto-generate code documentation |
| Test Generator |
Testing |
Advanced |
6 |
Create comprehensive unit tests |
| Blog Creator |
Content |
Beginner |
4 |
SEO-optimized blog posts |
🕐 Version Control
Auto-Versioning
Every time you save a workflow, a version snapshot is created automatically.
Configuration:
{
"moecode-workflow.version.maxHistory": 10
}
View History
- Open a saved workflow
- Click "History" button (clock icon)
- See all past versions with:
- Version number
- Timestamp
- Description
- File size
Restore Previous Version
- Open version history
- Select a version
- Click "Restore"
- Workflow reverts instantly
- Current version saved as backup
Compare Versions
See what changed between versions:
- Nodes Added: 🟢 Green indicator
- Nodes Removed: 🔴 Red indicator
- Nodes Modified: 🟡 Yellow indicator
- Connections Changed: Summary count
⚙️ Configuration
Settings
Access via Ctrl+, → Search "Claud.ing Workflow"
| Setting |
Default |
Description |
moecode-workflow.ai.schemaFormat |
toon |
AI prompt schema format (toon/json) |
moecode-workflow.ai.collectMetrics |
false |
Collect AI performance metrics |
moecode-workflow.templates.autoLoad |
true |
Auto-load templates on startup |
moecode-workflow.version.maxHistory |
10 |
Max versions to keep (1-50) |
🎨 Keyboard Shortcuts
| Shortcut |
Action |
Ctrl/Cmd + S |
Save workflow |
Ctrl/Cmd + E |
Export to .claude |
Ctrl/Cmd + Enter |
Apply AI refinement |
Esc |
Cancel/Close dialog |
? |
Show interactive tour |
Space (drag) |
Pan canvas |
Ctrl/Cmd + Mouse Wheel |
Zoom |
📖 Documentation
Workflow Schema
- Version: 1.2.0
- Max Nodes: 50 per workflow
- Supported Types: 10 node types
- Validation: Real-time error checking
File Locations
.vscode/
workflows/ # Saved workflows (JSON)
.versions/ # Version history
{workflow-id}/
history.json # Version metadata
.claude/
agents/ # Exported Sub-Agents
commands/ # Exported Slash Commands
skills/ # Project Skills
~/.claude/
skills/ # Personal Skills
API & Extension Development
Claud.ing Workflow supports:
- Custom node types
- Hook integration
- MCP server plugins
- Theme customization
See CONTRIBUTING.md for development guide.
🤝 Contributing
We welcome contributions!
Development Setup
# Clone repository
git clone https://github.com/moecode/moecode-workflow.git
cd moecode-workflow
# Install dependencies
npm install
cd src/webview && npm install && cd ../..
# Build extension
npm run build
# Package VSIX
npx vsce package
# Install locally
code --install-extension moecode-workflow-1.0.0.vsix
Contribution Guidelines
- Fork the repository
- Create a feature branch (
feature/amazing-feature)
- Make your changes
- Run tests:
npm run check
- Commit changes (Conventional Commits)
- Push and create a Pull Request
🐛 Troubleshooting
Common Issues
"Claude Code CLI not found"
"Templates not loading"
- Check:
moecode-workflow.templates.autoLoad is true
- Restart VS Code
- Check Output → "Claud.ing Workflow" for errors
"Version history not working"
- Ensure workflow is saved first
- Check
.vscode/workflows/.versions/ exists
- Increase
moecode-workflow.version.maxHistory
"Build fails"
# Clear caches
rm -rf node_modules src/webview/node_modules dist src/webview/dist
# Reinstall
npm install
cd src/webview && npm install && cd ../..
# Rebuild
npm run build
📄 License
This project is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0-or-later).
What this means:
- ✅ Free to use, modify, and distribute
- ✅ Commercial use allowed
- ⚠️ Modified versions must be open-sourced
- ⚠️ Network use requires source code disclosure
See LICENSE for full text.
🙏 Acknowledgments
Claud.ing Workflow is built upon:
Special thanks to the open-source community!
📞 Support
Made with ❤️
⭐ Star on GitHub •
📦 VS Code Marketplace •
📥 Download Latest
