Draw.io Diagram Skill (Unified)

Unified draw.io diagram skill. You are responsible for aesthetics, structure, and content — not just mechanically generating XML. Every diagram should look like it was designed by someone who cares about visual communication.

Philosophy

• Aesthetics — diagrams should be visually clear, not just technically correct
• Structure — logical grouping, meaningful containment, consistent spacing
• Content — accurate labels, proper shape choices, meaningful colors

Aesthetic principles

• Color with purpose: same-function elements share colors, different functions get distinct colors
• Consistent sizing: elements of the same type get the same dimensions
• Meaningful shapes: databases get cylinders, decisions get diamonds, external actors get stick figures
• Balanced layout: distribute nodes evenly across the canvas, avoid clusters in one corner with empty space elsewhere
• Readable labels: concise text that fits within the shape, no truncation
• Consistent spacing: use the rigid grid — x = col * 180 + 40, y = row * 120 + 40