Draw.io Diagram Skill

Generate a .drawio XML file. Open by dragging onto app.diagrams.net or in VS Code (Draw.io Integration extension). No setup, no dependencies, no render loop.

CORE PRINCIPLE: DIAGRAMS ARGUE

The shape IS the meaning. Before writing XML, answer:

1. What is the core argument this diagram makes?
2. What visual structure mirrors it — layers, fan-out, convergence, timeline, comparison?

The Isomorphism Test: remove all labels. Does the structure still communicate the concept?

FILE STRUCTURE

Every .drawio file follows this wrapper. Never omit the two root cells.

<mxfile host="app.diagrams.net">
  <diagram name="Page-1" id="diagram-1">
    <mxGraphModel grid="0" gridSize="10" pageWidth="1169" pageHeight="827">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <!-- all diagram elements go here, parent="1" -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

MANDATORY RULES

1. Always include <mxCell id="0"/> and <mxCell id="1" parent="0"/> — diagram breaks without them
2. Every vertex needs vertex="1", every edge needs edge="1" — never mix
3. Every element needs parent="1" (or a container ID for child elements)
4. Edges connecting shapes use source="id" and target="id" — never hardcoded coordinates
5. IDs must be unique across the entire file
6. whiteSpace=wrap;html=1; on all vertex styles to enable text wrapping

LAYOUT STRATEGIES

╔══════════════════════════╦══════════════════════════════════════════════════════════════╗ ║ Strategy ║ Use for ║ ╠══════════════════════════╬══════════════════════════════════════════════════════════════╣ ║ Vertical layers ║ System architecture, request flow — swimlanes top to bottom ║ ║ Horizontal timeline ║ Workflows, sequences, interview frameworks ║ ║ Fan-out ║ One-to-many — single source, arrows to N targets below ║ ║ Convergence ║ Aggregation, map-reduce — N inputs to one output ║ ║ Two-column comparison ║ Wrong vs right, senior vs staff — left red, right green ║ ║ Tree ║ Class hierarchy, decision trees — root at top ║ ╚══════════════════════════╩══════════════════════════════════════════════════════════════╝

AWS QUICK-START

When a diagram includes AWS services, keep the existing layout unchanged — same swimlanes, zones, edges, and edge labels. Only swap each AWS service box for a 60×60 icon at the same centre position; all non-AWS nodes stay as plain rectangles. Label icons with service name only (sub-details overlap edge labels).

Icon style: sketch=0;outlineConnect=0;fontColor=#232F3E;gradientColor=none;strokeColor=none;fillColor=__COLOR__;labelBackgroundColor=#ffffff;align=left;labelPosition=right;verticalLabelPosition=middle;verticalAlign=middle;html=1;fontSize=11;fontStyle=0;aspect=fixed;shape=mxgraph.aws4.__SHAPE__;whiteSpace=wrap; — size width="60" height="60".

Label to the right keeps the icon's top/bottom connection points clear of edge labels. Include sub-details as a second line: <b>Service Name</b><br/><font style='font-size:9px;color:#555;'>sub detail</font>.

S3 exception: use shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.s3;fillColor=#7AA116 — the direct S3 shape renders as a plain coloured box.

Shapes and category colours → AWS-REFERENCE.md

OUTPUT INSTRUCTIONS

1. Answer: what is the argument? what structure mirrors it?
2. For AWS diagrams: identify which nodes are AWS services; consult AWS-REFERENCE.md for shape name and colour
3. Follow ROUTING.md — determines delivery (MCP live editor or file write) and XML rules
4. One line on what the diagram argues

Do not print raw XML in the conversation unless asked — write the file directly.

REFERENCES

• Routing decision (MCP vs file, tier selection, XML rules per path) → ROUTING.md
• Generic shapes, colour system, layout rules → REFERENCE.md
• AWS service icons and cheat sheet → AWS-REFERENCE.md
• Worked examples → EXAMPLES.md