# Canvas Skill
Create visual diagrams, flowcharts, mind maps, and drawings using HTML5 Canvas.
## Triggers
- "draw", "diagram", "flowchart", "mindmap", "sketch", "visualize", "chart", "canvas"
## Capabilities
### Diagram Types
- **Flowcharts**: Process flows, decision trees, workflows
- **Mind Maps**: Idea mapping, brainstorming, concept visualization
- **Org Charts**: Team structures, hierarchies
- **Network Diagrams**: System architecture, connections
- **Timelines**: Project schedules, event sequences
- **Simple Drawings**: Shapes, arrows, annotations
## Output
Generate standalone HTML files with embedded Canvas JavaScript that:
- Render immediately in any browser
- Are self-contained (no external dependencies)
- Support responsive sizing
- Include clear labels and colors
## Template
```html
Canvas Diagram
```
## Colors
| Use | Color |
|-----|-------|
| Primary/Process | #4A90D9 (blue) |
| Success/Start | #27AE60 (green) |
| Warning/Decision | #E67E22 (orange) |
| Error/Stop | #E74C3C (red) |
| Neutral | #95A5A6 (gray) |
| Accent | #9B59B6 (purple) |
## Instructions
1. Understand what the user wants to visualize
2. Choose appropriate diagram type
3. Plan layout (spacing, alignment)
4. Generate complete HTML file
5. Save to workspace and provide path
6. Optionally open in browser for preview
## Save Location
Save diagrams to: `C:\Users\okenw\OneDrive\Documents\claudeclaw\workspace\canvas\`