draw-iolisted

# Draw.io Diagram Builder Create professional, well-structured Draw.io XML diagrams with proper spacing, icons, grouping, and styling. ## Skill Structure This skill is organized as follows: - **SKILL.md** (this file) - Main instructions and workflow for creating diagrams - **templates/** - Example diagrams and starter templates - `example-diagram.drawio.xml` - Complete working example with groups and styling - **references/** - Detailed technical documentation - `api-reference.md` - XML structure, icon library, colors, and validation rules - **assets/** - Static resources (reserved for future use) - **scripts/** - Automation helpers (reserved for future use) 💡 **Quick tip**: Start here for the workflow, refer to `references/api-reference.md` for detailed XML syntax and icon codes. ## Quick Start When the user requests a diagram: 1. Identify the components and their flow (A → B → C) 2. Determine if grouping is needed (e.g., [x, y, z] notation) 3. Create the XML structure with proper canvas size 4. Add styled boxes with icons for each component 5. Connect with arrows 6. Save as `.drawio.xml` file ## Core Components ### Canvas Structure Every diagram needs: - **Page dimensions**: 1400x900 minimum (adjust based on complexity) - **Background color**: ALWAYS set `background="#ffffff"` in mxGraphModel (critical for visibility) - **Title bar**: Blue header with diagram title - **Platform container**: Gray background box (optional, for cloud diagrams) - **Grid**: 10px g