Draw.io UML Diagram Implementation

Purpose

This skill enables correct generation of UML diagrams in Draw.io mxGraph XML. It covers the five most common UML diagram types: class, sequence, use case, state machine, and activity. The most common AI mistake is using generic arrows (endArrow=classic) instead of UML-specific connector styles (open diamond for aggregation, filled diamond for composition, hollow triangle for generalization).

Critical Rules (Memorize These)

1. ALWAYS use endArrow=block;endFill=0 for generalization/inheritance — the hollow triangle. NEVER use endFill=1 which produces a filled triangle (wrong UML semantics).
2. ALWAYS use startArrow=diamond;startFill=0 for aggregation — the open diamond. NEVER use startFill=1 which produces composition instead.
3. ALWAYS use startArrow=diamond;startFill=1 for composition — the filled diamond. The fill distinguishes composition from aggregation.
4. ALWAYS use dashed=1 for dependency and realization edges — solid lines are WRONG for these relationship types.
5. ALWAYS use shape=umlLifeline;perimeter=lifelinePerimeter for sequence diagram participants — NEVER use plain rectangles with manual dashed lines.
6. ALWAYS use shape=umlActor for UML actors — NEVER use shape=ellipse or stick-figure images.
7. ALWAYS use the 3-compartment swimlane pattern for UML classes — class name header, attributes compartment, operations compartment, separated by line cells.
8. ALWAYS include both structural cells (id="0" and id="1" with parent="0") in every diagram.
9. ALWAYS use endArrow=open;endFill=0;dashed=1 for return messages in sequence diagrams — NEVER use solid lines for returns.
10. ALWAYS place use cases inside the system boundary container — NEVER place them at parent="1" when a system boundary exists.