markus41/plugins/drawio-diagramming/skills/xml-generation

draw.io XML Generation Reference

XML Document Structure

Full Format (mxfile wrapper)

<?xml version="1.0" encoding="UTF-8"?>
<mxfile host="app.diagrams.net" modified="2026-03-14T00:00:00.000Z"
        agent="Claude" version="24.0.0" type="device">
  <diagram id="page-1" name="Page 1">
    <mxGraphModel dx="1422" dy="762" grid="1" gridSize="10"
                  guides="1" tooltips="1" connect="1" arrows="1"
                  fold="1" page="1" pageScale="1"
                  pageWidth="1169" pageHeight="827"
                  math="0" shadow="0">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" parent="0"/>
        <!-- diagram content here -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Simplified Format (IMPORT ONLY — do NOT use for .drawio files)

The mxGraphModel-only format works for clipboard import but causes blank files when saved directly as .drawio. The draw.io desktop app and web editor both expect the full <mxfile> wrapper to render the diagram. Always use the full format above.

<!-- DO NOT save this as a .drawio file — it will appear blank -->
<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- only works for import/paste, not for .drawio files -->
  </root>
</mxGraphModel>

mxGraphModel Attributes

| Attribute | Default | Description | |-----------|---------|-------------| | dx | 0 | Horizontal scroll offset | | dy | 0 | Vertical scroll offset | | grid | 1 | Show grid (0/1) | | gridSize | 10 | Grid spacing in px | | guides | 1 | Enable alignment guides | | tooltips | 1 | Show tooltips | | connect | 1 | Enable connection points | | arrows | 1 | Show arrows on edges | | fold | 1 | Enable container folding | | page | 1 | Show page boundaries | | pageScale | 1 | Page zoom scale | | pageWidth | 1169 | Page width (A4 landscape) | | pageHeight | 827 | Page height (A4 landscape) | | math | 0 | Enable LaTeX math rendering | | shadow | 0 | Default shadow on shapes | | background | none | Background color — always use none (transparent) for clean embedding |

IMPORTANT: Always set background="none" on the <mxGraphModel> element. Transparent backgrounds ensure diagrams embed cleanly in any context (dark mode, light mode, wiki pages, PRs). Never use a solid white background unless explicitly requested.

Mandatory Structural Cells

Every diagram MUST begin with these two cells. They are never rendered but form the cell hierarchy root.

<mxCell id="0"/>                    <!-- Root cell (invisible) -->
<mxCell id="1" parent="0"/>         <!-- Default layer -->

• id="0" is the absolute root. It has no parent.
• id="1" is the default layer. All visible shapes/edges use parent="1" unless placed on a custom layer.
• Omitting either cell causes diagram corruption.

Vertex Cells (Shapes)

Vertices represent boxes, circles, and all other shapes. They require vertex="1" and an mxGeometry child.

<mxCell id="2" value="My Shape" style="rounded=1;whiteSpace=wrap;html=1;"
        vertex="1" parent="1">
  <mxGeometry x="100" y="50" width="120" height="60" as="geometry"/>
</mxCell>

Vertex Attributes

| Attribute | Required | Description | |-----------|----------|-------------| | id | Yes | Unique identifier (string) | | value | No | Label text (plain or HTML) | | style | No | Semicolon-delimited style string | | vertex | Yes | Must be "1" | | parent | Yes | Parent cell ID (usually "1") | | connectable | No | "0" to disable connections |

mxGeometry for Vertices

<mxGeometry x="100" y="50" width="120" height="60" as="geometry"/>

| Attribute | Description | |-----------|-------------| | x | Left edge position (px from canvas origin) | | y | Top edge position (px from canvas origin) | | width | Shape width in px | | height | Shape height in px | | as | Must be "geometry" | | relative | "1" for relative positioning inside parent |

Edge Cells (Connectors)

Edges connect vertices. They require edge="1" and typically source/target attributes.

<mxCell id="3" value="connects to" style="edgeStyle=orthogonalEdgeStyle;"
        edge="1" source="2" target="4" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

Edge Attributes

| Attribute | Required | Description | |-----------|----------|-------------| | id | Yes | Unique identifier | | value | No | Edge label | | style | No | Style string | | edge | Yes | Must be "1" | | source | No | Source vertex ID | | target | No | Target vertex ID | | parent | Yes | Parent cell ID |

mxGeometry for Edges

Edge geometry uses relative="1" and may contain waypoints:

<mxGeometry relative="1" as="geometry">
  <Array as="points">
    <mxPoint x="200" y="150"/>
    <mxPoint x="300" y="150"/>
  </Array>
  <mxPoint x="100" y="100" as="sourcePoint"/>
  <mxPoint x="400" y="200" as="targetPoint"/>
</mxGeometry>

• sourcePoint / targetPoint: fallback when source/target cells are not set.
• Array as="points": intermediate waypoints for routing.

Edge Labels

Position labels along edge using mxGeometry inside a child cell:

<mxCell id="label1" value="0..*" style="edgeLabel;align=left;" vertex="1"
        connectable="0" parent="3">
  <mxGeometry x="-0.5" y="0" relative="1" as="geometry">
    <mxPoint x="-10" y="-10" as="offset"/>
  </mxGeometry>
</mxCell>

• x in [-1, 1]: position along edge (-1=source, 0=middle, 1=target).
• y: perpendicular offset.

Style String Format

Styles are semicolon-separated key=value pairs. Order does not matter. A trailing semicolon is conventional.

rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;fontSize=14;

Named styles can appear as the first token without =:

shape=hexagon;perimeter=hexagonPerimeter2;size=0.25;

Fill Properties

| Property | Values | Description | |----------|--------|-------------| | fillColor | #hex, none | Shape fill color | | gradientColor | #hex, none | Gradient end color | | gradientDirection | south, north, east, west | Gradient direction | | opacity | 0-100 | Overall opacity | | fillOpacity | 0-100 | Fill-only opacity | | glass | 0/1 | Glass/gloss effect | | shadow | 0/1 | Drop shadow | | swimlaneFillColor | #hex | Swimlane body fill |

Stroke Properties

| Property | Values | Description | |----------|--------|-------------| | strokeColor | #hex, none | Border/line color | | strokeWidth | number | Border width in px | | dashed | 0/1 | Dashed line | | dashPattern | string | Dash pattern (e.g., "8 4") | | strokeOpacity | 0-100 | Stroke-only opacity | | fixDash | 0/1 | Keep dash pattern on zoom |

Shape Properties

| Property | Values | Description | |----------|--------|-------------| | shape | shape name | Shape type (see Shape Types below) | | rounded | 0/1 | Round corners on rectangles | | arcSize | number | Corner radius (0-50) | | perimeter | perimeter name | Connection point calculation | | aspect | fixed | Lock aspect ratio | | direction | south, north, east, west | Shape rotation direction | | rotation | degrees | Rotation angle | | flipH | 0/1 | Flip horizontal | | flipV | 0/1 | Flip vertical | | size | number | Shape-specific size parameter | | imageWidth, imageHeight | number | Embedded image dimensions | | image | URL | Image source |

Text Properties

| Property | Values | Description | |----------|--------|-------------| | fontSize | number | Font size in pt | | fontFamily | string | Font name (e.g., "Helvetica") | | fontColor | #hex | Text color | | fontStyle | bitmask | 0=normal, 1=bold, 2=italic, 4=underline (combine with +) | | align | left, center, right | Horizontal text alignment | | verticalAlign | top, middle, bottom | Vertical text alignment | | labelPosition | left, center, right | Label horizontal position relative to shape | | verticalLabelPosition | top, middle, bottom | Label vertical position | | labelBackgroundColor | #hex, none | Label background | | labelBorderColor | #hex, none | Label border | | html | 0/1 | Enable HTML label rendering | | whiteSpace | wrap | Enable text wrapping | | overflow | fill, width, hidden, visible | Text overflow behavior | | spacing | number | Padding around text | | spacingTop, spacingBottom, spacingLeft, spacingRight | number | Directional padding | | textOpacity | 0-100 | Text-only opacity |

fontStyle bitmask examples:

• fontStyle=1 = bold
• fontStyle=2 = italic
• fontStyle=3 = bold + italic
• fontStyle=5 = bold + underline
• fontStyle=7 = bold + italic + underline

Edge Properties

| Property | Values | Description | |----------|--------|-------------| | edgeStyle | style name | Edge routing algorithm | | curved | 0/1 | Curved edges | | rounded | 0/1 | Rounded corners on orthogonal edges | | jettySize | auto, number | Orthogonal edge segment length | | startArrow | arrow name | Arrow at source end | | endArrow | arrow name | Arrow at target end | | startSize | number | Start arrow size | | endSize | number | End arrow size | | startFill | 0/1 | Fill start arrow (1=filled, 0=open) | | endFill | 0/1 | Fill end arrow | | jumpStyle | arc, gap, sharp, line, none | Line crossing style | | jumpSize | number | Jump/gap size | | exitX, exitY | 0-1 | Source connection point (relative) | | entryX, entryY | 0-1 | Target connection point (relative) | | exitDx, exitDy | number | Source connection offset | | entryDx, entryDy | number | Target connection offset | | exitPerimeter | 0/1 | Use perimeter for source | | entryPerimeter | 0/1 | Use perimeter for target | | sourcePortConstraint | north, south, east, west | Constrain source side | | targetPortConstraint | north, south, east, west | Constrain target side |

Container Properties

| Property | Values | Description | |----------|--------|-------------| | container | 0/1 | Cell is a container/group | | collapsible | 0/1 | Show collapse/expand button | | swimlaneFillColor | #hex | Body fill of swimlane | | startSize | number | Header height in swimlane | | childLayout | stackLayout | Auto-layout children | | horizontalStack | 0/1 | Stack direction | | stackFill | 0/1 | Children fill container width | | stackSpacing | number | Gap between stacked children | | resizeParent | 0/1 | Resize parent to fit children | | resizeParentMax | number | Max parent resize |

Sketch Properties

| Property | Values | Description | |----------|--------|-------------| | sketch | 0/1 | Hand-drawn/sketch appearance | | comic | 0/1 | Comic/casual style (same as sketch) | | fillStyle | solid, hachure, cross-hatch, dots, zigzag, dashes | Sketch fill pattern | | hachureGap | number | Gap between fill lines | | hachureAngle | number | Angle of fill lines | | jiggle | number | Hand-drawn jiggle amount (1-5) | | curveFitting | number | Curve smoothness |

Behavior Properties

| Property | Values | Description | |----------|--------|-------------| | movable | 0/1 | Can be moved | | resizable | 0/1 | Can be resized | | rotatable | 0/1 | Can be rotated | | editable | 0/1 | Label can be edited | | deletable | 0/1 | Can be deleted | | connectable | 0/1 | Can have connections | | cloneable | 0/1 | Can be cloned | | pointerEvents | 0/1 | Responds to mouse events | | locked | 0/1 | Locked in place |

Shape Types

Core Shapes

These are built-in and do not require a shape= prefix when used as the default:

| Shape | Style | Notes | |-------|-------|-------| | Rectangle | (default, no shape needed) | Default shape | | Rounded Rectangle | rounded=1; | | | Ellipse | shape=ellipse; or ellipse; | Also perimeter=ellipsePerimeter; | | Rhombus (Diamond) | shape=rhombus; or rhombus; | Decision shape | | Triangle | shape=triangle; | Points right by default | | Hexagon | shape=hexagon;perimeter=hexagonPerimeter2;size=0.25; | | | Cloud | shape=cloud; | | | Cylinder | shape=cylinder3;whiteSpace=wrap; | Database shape | | Circle | ellipse;aspect=fixed; | Fixed aspect ellipse | | Line | shape=line; | Horizontal separator | | Arrow | shape=singleArrow; or shape=doubleArrow; | |

Extended Shapes

| Shape | Style | |-------|-------| | Cube | shape=cube;whiteSpace=wrap; | | Isometric Cube | shape=isoCube;isoAngle=15; | | Document | shape=document; | | Folder | shape=folder;tabWidth=50;tabHeight=14;tabPosition=left; | | Card | shape=card;size=18; | | Tape | shape=tape; | | Note | shape=note;size=15; | | Process | shape=process; | | Step | shape=step;size=0.2;perimeter=stepPerimeter; | | Callout | shape=callout;size=20;position=0.5;position2=0.5;base=20; | | Parallelogram | shape=parallelogram;perimeter=parallelogramPerimeter;size=0.2; | | Trapezoid | shape=trapezoid;perimeter=trapezoidPerimeter;size=0.4; | | Cross | shape=cross;size=0.2; | | Star | shape=mxgraph.basic.star; | | Heart | shape=mxgraph.basic.heart; | | Delay | shape=delay; | | Display | shape=display; | | Data Storage | shape=dataStorage; | | Internal Storage | shape=internalStorage;dx=20;dy=20; | | Or | shape=or; | | And | shape=mxgraph.electrical.logic_gates.and; | | Manual Input | shape=manualInput;size=15; | | Manual Operation | shape=manualOperation;size=15; | | Predefined Process | shape=process;whiteSpace=wrap; |

UML Shapes

| Shape | Style | |-------|-------| | Actor | shape=umlActor;verticalLabelPosition=bottom; | | Boundary | shape=umlBoundary; | | Entity | shape=umlEntity; | | Control | shape=umlControl; | | Lifeline | shape=umlLifeline;perimeter=lifelinePerimeter; | | Activation | points=[]; (narrow rectangle on lifeline) | | Frame | shape=umlFrame; | | Destroy | shape=umlDestroy; | | Package | shape=folder;tabWidth=80;tabHeight=20; | | Component | shape=component; | | Interface | shape=providedRequiredInterface; | | Class | See UML Class example below |

Stencil Libraries

External shape libraries accessed via shape=mxgraph.<library>.<shape>:

| Library Prefix | Domain | |---------------|--------| | mxgraph.flowchart.* | Flowchart symbols | | mxgraph.bpmn.* | BPMN 2.0 elements | | mxgraph.aws4.* | AWS Architecture (v4) | | mxgraph.azure.* | Microsoft Azure icons | | mxgraph.gcp2.* | Google Cloud Platform | | mxgraph.kubernetes.* | Kubernetes resources | | mxgraph.cisco.* | Cisco network equipment | | mxgraph.uml.* | UML 2.x extended | | mxgraph.er.* | Entity-Relationship | | mxgraph.basic.* | Basic shapes | | mxgraph.arrows2.* | Arrow shapes | | mxgraph.lean_mapping.* | Value stream mapping | | mxgraph.electrical.* | Electrical engineering | | mxgraph.floorplan.* | Floor plans | | mxgraph.ios.* | iOS mockups | | mxgraph.android.* | Android mockups | | mxgraph.mockup.* | Web mockups | | mxgraph.archimate3.* | ArchiMate 3.0 | | mxgraph.sysml.* | SysML | | mxgraph.eip.* | Enterprise Integration Patterns | | mxgraph.c4.* | C4 model |

Common AWS Shapes

shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.ec2
shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.s3
shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.lambda
shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.rds
shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.dynamodb
shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.sqs
shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.sns
shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.api_gateway
shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.cloudfront
shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.vpc
shape=mxgraph.aws4.group;grIcon=mxgraph.aws4.region

Common Azure Shapes

shape=mxgraph.azure.app_service
shape=mxgraph.azure.storage_blob
shape=mxgraph.azure.azure_functions
shape=mxgraph.azure.sql_database
shape=mxgraph.azure.virtual_machine
shape=mxgraph.azure.azure_active_directory
shape=mxgraph.azure.key_vaults
shape=mxgraph.azure.kubernetes_services

Common Kubernetes Shapes

shape=mxgraph.kubernetes.pod
shape=mxgraph.kubernetes.svc
shape=mxgraph.kubernetes.deploy
shape=mxgraph.kubernetes.rs
shape=mxgraph.kubernetes.ing
shape=mxgraph.kubernetes.cm
shape=mxgraph.kubernetes.secret
shape=mxgraph.kubernetes.ns
shape=mxgraph.kubernetes.node
shape=mxgraph.kubernetes.vol
shape=mxgraph.kubernetes.pv
shape=mxgraph.kubernetes.pvc

Edge Routing Styles

| Style | Description | |-------|-------------| | edgeStyle=orthogonalEdgeStyle | Right-angle routing (most common) | | edgeStyle=segmentEdgeStyle | Manual segment routing | | edgeStyle=elbowEdgeStyle | Single elbow bend | | edgeStyle=entityRelationEdgeStyle | ER diagram routing | | edgeStyle=isometricEdgeStyle | Isometric routing | | edgeStyle=none | Straight line (no routing) | | curved=1 | Smooth curved connections |

Recommended Edge Style (prevents ugly connections)

Always use this as the base edge style for clean, professional connections:

edgeStyle=orthogonalEdgeStyle;rounded=1;jettySize=auto;orthogonalLoop=1;

Why each property matters:

• rounded=1 — rounds corners at bends instead of sharp right angles
• jettySize=auto — automatically calculates segment length so edges don't overlap shapes
• orthogonalLoop=1 — prevents self-loop edges from collapsing

For edges between non-aligned shapes, specify explicit connection points:

<!-- Exit from right side of source, enter left side of target -->
<mxCell id="e1" style="edgeStyle=orthogonalEdgeStyle;rounded=1;jettySize=auto;
        exitX=1;exitY=0.5;exitDx=0;exitDy=0;
        entryX=0;entryY=0.5;entryDx=0;entryDy=0;"
        edge="1" source="a" target="b" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

Connection point reference (exitX/exitY and entryX/entryY):

• (0, 0.5) = left center
• (1, 0.5) = right center
• (0.5, 0) = top center
• (0.5, 1) = bottom center

For crossing edges, add jump style:

jumpStyle=arc;jumpSize=16;

For primary/important flows, increase stroke width:

strokeWidth=2;

For return/response flows, use dashed:

dashed=1;dashPattern=8 4;

Perimeter Types

Perimeters determine where connection points sit on a shape:

| Perimeter | For Shape | |-----------|-----------| | perimeter=rectanglePerimeter | Rectangle (default) | | perimeter=ellipsePerimeter | Ellipse, circle | | perimeter=rhombusPerimeter | Diamond | | perimeter=trianglePerimeter | Triangle | | perimeter=hexagonPerimeter2 | Hexagon | | perimeter=parallelogramPerimeter | Parallelogram | | perimeter=trapezoidPerimeter | Trapezoid | | perimeter=stepPerimeter | Step/chevron | | perimeter=lifelinePerimeter | UML lifeline | | perimeter=centerPerimeter | Connect to center only | | perimeter=calloutPerimeter | Callout/speech bubble |

Arrow Types

Used with startArrow and endArrow:

| Arrow | Appearance | |-------|-----------| | classic | Standard filled arrowhead | | classicThin | Thin filled arrowhead | | block | Filled block arrow | | blockThin | Thin block arrow | | open | Open (unfilled) arrowhead | | openThin | Thin open arrowhead | | oval | Filled circle | | diamond | Filled diamond | | diamondThin | Thin diamond | | box | Square | | halfCircle | Half circle | | circle | Circle (used with endFill=0 for open) | | cross | X mark | | dash | Short perpendicular line | | async | Half arrowhead (async message) | | ERone | ER "one" notation | | ERmandOne | ER "mandatory one" notation | | ERmany | ER "many" notation | | ERoneToMany | ER "one to many" | | ERzeroToMany | ER "zero to many" | | ERzeroToOne | ER "zero to one" | | none | No arrow |

Standard Color Palette

Fill / Stroke Pairs (draw.io defaults)

| Name | Fill | Stroke | |------|------|--------| | Blue | #dae8fc | #6c8ebf | | Green | #d5e8d4 | #82b366 | | Orange | #ffe6cc | #d6b656 | | Yellow | #fff2cc | #d6b656 | | Red | #f8cecc | #b85450 | | Purple | #e1d5e7 | #9673a6 | | Gray | #f5f5f5 | #666666 | | Dark Blue | #1ba1e2 | #006eaf | | White | #ffffff | #000000 | | Dark | #333333 | #000000 |

Status Colors

| Status | Fill | Stroke | |--------|------|--------| | Healthy / Success | #d5e8d4 | #82b366 | | Warning | #fff2cc | #d6b656 | | Error / Critical | #f8cecc | #b85450 | | Info | #dae8fc | #6c8ebf | | Disabled | #f5f5f5 | #666666 |

HTML Labels

When html=1 is in the style, the value attribute supports HTML:

<mxCell id="5" value="&lt;b&gt;Bold&lt;/b&gt;&lt;br&gt;&lt;i&gt;Italic&lt;/i&gt;"
        style="html=1;whiteSpace=wrap;" vertex="1" parent="1">

Supported HTML tags:

• <b>, <strong> - bold
• <i>, <em> - italic
• <u> - underline
• <br> or <br/> - line break
• <font color="#hex" size="N" face="family"> - font styling
• <sup>, <sub> - superscript, subscript
• <hr> - horizontal rule
• <table>, <tr>, <td> - tables (for UML class boxes, etc.)
• <ul>, <ol>, <li> - lists
• <a href="url"> - hyperlinks
• <span style="..."> - inline CSS

HTML entities must be escaped in XML: < > & "

UML Class Box with HTML Table

<mxCell id="10" value="&lt;table style='border:0;'&gt;
  &lt;tr&gt;&lt;td style='font-weight:bold;border-bottom:1px solid #666;'&gt;ClassName&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td style='text-align:left;border-bottom:1px solid #ccc;'&gt;- name: String&lt;br&gt;- age: int&lt;/td&gt;&lt;/tr&gt;
  &lt;tr&gt;&lt;td style='text-align:left;'&gt;+ getName(): String&lt;br&gt;+ setName(n: String): void&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;"
style="shape=classBox;html=1;whiteSpace=wrap;overflow=fill;" vertex="1" parent="1">

Metadata with Object Tags

Wrap mxCell in <object> to add custom key-value metadata:

<object label="API Gateway" id="20" service-type="gateway"
        owner="platform-team" sla="99.99" environment="production">
  <mxCell style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.api_gateway;"
          vertex="1" parent="1">
    <mxGeometry x="200" y="100" width="60" height="60" as="geometry"/>
  </mxCell>
</object>

• Any attribute on <object> becomes searchable metadata.
• label replaces value (same purpose).
• id moves from mxCell to <object>.
• Use placeholders="1" in style to reference attributes: %owner%, %sla%.

Groups and Containers

Make a cell a container with container=1. Children reference it via parent:

<!-- Container group -->
<mxCell id="group1" value="VPC" style="container=1;collapsible=1;swimlane;
        startSize=30;fillColor=#e6d0de;strokeColor=#ae4132;" vertex="1" parent="1">
  <mxGeometry x="50" y="50" width="400" height="300" as="geometry"/>
</mxCell>

<!-- Child inside container -->
<mxCell id="child1" value="Subnet A" style="rounded=1;" vertex="1" parent="group1">
  <mxGeometry x="20" y="40" width="100" height="50" as="geometry"/>
</mxCell>

• Child x, y coordinates are relative to the container's top-left.
• collapsible=1 adds a collapse/expand toggle.
• swimlane style adds a header bar with startSize height.

Layers

Additional layers are cells with parent="0":

<mxCell id="0"/>
<mxCell id="1" parent="0"/>                            <!-- Layer 1 (default) -->
<mxCell id="layer2" value="Annotations" parent="0"/>    <!-- Layer 2 -->

<!-- Shape on default layer -->
<mxCell id="s1" value="Server" vertex="1" parent="1">...</mxCell>

<!-- Shape on layer 2 -->
<mxCell id="s2" value="Note" vertex="1" parent="layer2">...</mxCell>

Layers can be shown/hidden independently in draw.io.

Multiple Pages

Multiple <diagram> elements inside <mxfile>:

<mxfile>
  <diagram id="page1" name="Overview">
    <mxGraphModel>...</mxGraphModel>
  </diagram>
  <diagram id="page2" name="Detail View">
    <mxGraphModel>...</mxGraphModel>
  </diagram>
</mxfile>

Validation Checklist for AI-Generated Diagrams

Before outputting any draw.io XML, verify:

1. Full mxfile wrapper: XML starts with <mxfile> containing <diagram> containing <mxGraphModel> — bare <mxGraphModel> causes blank files
2. Structural cells present: <mxCell id="0"/> and <mxCell id="1" parent="0"/> exist
3. Unique IDs: Every cell has a unique id attribute
4. Valid parent references: Every parent attribute references an existing cell ID
5. Vertex/edge flag: Shapes have vertex="1", connectors have edge="1"
6. Edge targets exist: source and target on edges reference existing vertex IDs
7. Geometry present: Every vertex has <mxGeometry> with width and height
8. Edge geometry: Every edge has <mxGeometry relative="1" as="geometry"/>
9. Edge routing quality: Edges use rounded=1;jettySize=auto; for clean bends; non-aligned shapes specify exitX/exitY/entryX/entryY for precise connection points
10. Style spelling: All style properties use exact camelCase names from this reference
11. Perimeter matches shape: Hexagons use hexagonPerimeter2, not rectanglePerimeter
12. HTML escaping: If html=1, all < > & in value are XML-escaped
13. No overlapping shapes: Check that shapes have distinct x, y positions
14. Reasonable dimensions: Shapes are 40-300px wide, 30-200px tall typically
15. Connected graph: All edges connect to existing source/target vertices
16. Label readability: Font size >= 10pt for normal text
17. Layers used: At least 2 layers defined (content + annotations or semantic grouping)
18. Containers used: Related elements grouped using container=1 parent cells

Complete Examples

Example 1: Simple Flowchart

<mxfile host="Claude" modified="2026-03-17T00:00:00.000Z" agent="Claude Code" version="24.0.0" type="device">
  <diagram id="flowchart-1" name="Flowchart">
    <mxGraphModel dx="1422" dy="794" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0" background="none">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" value="Flow" parent="0"/>
        <mxCell id="layer-notes" value="Annotations" parent="0"/>
        <mxCell id="title" value="&lt;b&gt;Data Processing Flow&lt;/b&gt;" style="text;html=1;fontSize=16;align=left;" vertex="1" parent="layer-notes">
          <mxGeometry x="40" y="10" width="250" height="30" as="geometry"/>
        </mxCell>
        <mxCell id="2" value="Start" style="ellipse;fillColor=#d5e8d4;strokeColor=#82b366;fontStyle=1;shadow=1;html=1;" vertex="1" parent="1">
          <mxGeometry x="200" y="50" width="100" height="50" as="geometry"/>
        </mxCell>
        <mxCell id="3" value="&lt;b&gt;Process Data&lt;/b&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;shadow=1;" vertex="1" parent="1">
          <mxGeometry x="175" y="140" width="150" height="60" as="geometry"/>
        </mxCell>
        <mxCell id="4" value="&lt;b&gt;Valid?&lt;/b&gt;" style="rhombus;whiteSpace=wrap;html=1;fillColor=#fff2cc;strokeColor=#d6b656;shadow=1;" vertex="1" parent="1">
          <mxGeometry x="195" y="240" width="110" height="90" as="geometry"/>
        </mxCell>
        <mxCell id="5" value="&lt;b&gt;Save&lt;/b&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#dae8fc;strokeColor=#6c8ebf;shadow=1;" vertex="1" parent="1">
          <mxGeometry x="175" y="380" width="150" height="60" as="geometry"/>
        </mxCell>
        <mxCell id="6" value="&lt;b&gt;Handle Error&lt;/b&gt;" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;shadow=1;" vertex="1" parent="1">
          <mxGeometry x="380" y="255" width="130" height="60" as="geometry"/>
        </mxCell>
        <mxCell id="7" value="End" style="ellipse;fillColor=#d5e8d4;strokeColor=#82b366;fontStyle=1;shadow=1;html=1;" vertex="1" parent="1">
          <mxGeometry x="200" y="490" width="100" height="50" as="geometry"/>
        </mxCell>
        <mxCell id="e1" style="edgeStyle=orthogonalEdgeStyle;rounded=1;jettySize=auto;strokeWidth=2;" edge="1" source="2" target="3" parent="1">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="e2" style="edgeStyle=orthogonalEdgeStyle;rounded=1;jettySize=auto;strokeWidth=2;" edge="1" source="3" target="4" parent="1">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="e3" value="Yes" style="edgeStyle=orthogonalEdgeStyle;rounded=1;jettySize=auto;strokeWidth=2;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" source="4" target="5" parent="1">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="e4" value="No" style="edgeStyle=orthogonalEdgeStyle;rounded=1;jettySize=auto;strokeWidth=2;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" source="4" target="6" parent="1">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="e5" style="edgeStyle=orthogonalEdgeStyle;rounded=1;jettySize=auto;strokeWidth=2;" edge="1" source="5" target="7" parent="1">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Example 2: Architecture Diagram with Containers

<mxfile host="Claude" modified="2026-03-17T00:00:00.000Z" agent="Claude Code" version="24.0.0" type="device">
  <diagram id="arch-1" name="AWS Architecture">
    <mxGraphModel dx="1422" dy="794" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0" background="none">
      <root>
        <mxCell id="0"/>
        <mxCell id="1" value="Infrastructure" parent="0"/>
        <mxCell id="layer-data" value="Data Layer" parent="0"/>
        <mxCell id="layer-notes" value="Annotations" parent="0"/>
        <!-- Title -->
        <mxCell id="title" value="&lt;b&gt;AWS VPC Architecture&lt;/b&gt;&lt;br&gt;&lt;font color=&quot;#666&quot; style=&quot;font-size:10px;&quot;&gt;Production Environment&lt;/font&gt;" style="text;html=1;fontSize=16;align=left;" vertex="1" parent="layer-notes">
          <mxGeometry x="50" y="10" width="300" height="40" as="geometry"/>
        </mxCell>
        <!-- VPC Container -->
        <mxCell id="vpc" value="&lt;b&gt;VPC&lt;/b&gt; (10.0.0.0/16)" style="swimlane;container=1;collapsible=0;startSize=30;fillColor=none;strokeColor=#ae4132;strokeWidth=2;rounded=1;dashed=1;dashPattern=5 5;html=1;fontStyle=1;" vertex="1" parent="1">
          <mxGeometry x="50" y="60" width="620" height="360" as="geometry"/>
        </mxCell>
        <!-- Public Subnet -->
        <mxCell id="pub" value="&lt;b&gt;Public Subnet&lt;/b&gt;" style="swimlane;container=1;startSize=25;fillColor=#dae8fc;fillOpacity=40;strokeColor=#6c8ebf;html=1;" vertex="1" parent="vpc">
          <mxGeometry x="20" y="50" width="270" height="290" as="geometry"/>
        </mxCell>
        <mxCell id="alb" value="&lt;b&gt;ALB&lt;/b&gt;" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.elastic_load_balancing;html=1;shadow=1;" vertex="1" parent="pub">
          <mxGeometry x="95" y="40" width="60" height="60" as="geometry"/>
        </mxCell>
        <mxCell id="ec2a" value="&lt;b&gt;EC2&lt;/b&gt;&lt;br&gt;App-1" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.ec2;html=1;shadow=1;" vertex="1" parent="pub">
          <mxGeometry x="30" y="150" width="60" height="60" as="geometry"/>
        </mxCell>
        <mxCell id="ec2b" value="&lt;b&gt;EC2&lt;/b&gt;&lt;br&gt;App-2" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.ec2;html=1;shadow=1;" vertex="1" parent="pub">
          <mxGeometry x="160" y="150" width="60" height="60" as="geometry"/>
        </mxCell>
        <!-- Private Subnet on data layer -->
        <mxCell id="priv" value="&lt;b&gt;Private Subnet&lt;/b&gt;" style="swimlane;container=1;startSize=25;fillColor=#d5e8d4;fillOpacity=40;strokeColor=#82b366;html=1;" vertex="1" parent="vpc">
          <mxGeometry x="330" y="50" width="270" height="290" as="geometry"/>
        </mxCell>
        <mxCell id="rds" value="&lt;b&gt;RDS&lt;/b&gt;&lt;br&gt;Postgres" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.rds;html=1;shadow=1;" vertex="1" parent="priv">
          <mxGeometry x="95" y="60" width="60" height="60" as="geometry"/>
        </mxCell>
        <mxCell id="cache" value="&lt;b&gt;ElastiCache&lt;/b&gt;&lt;br&gt;Redis" style="shape=mxgraph.aws4.resourceIcon;resIcon=mxgraph.aws4.elasticache;html=1;shadow=1;" vertex="1" parent="priv">
          <mxGeometry x="95" y="180" width="60" height="60" as="geometry"/>
        </mxCell>
        <!-- Edges with proper routing -->
        <mxCell id="e1" style="edgeStyle=orthogonalEdgeStyle;rounded=1;jettySize=auto;strokeWidth=2;exitX=0.25;exitY=1;exitDx=0;exitDy=0;" edge="1" source="alb" target="ec2a" parent="vpc">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="e2" style="edgeStyle=orthogonalEdgeStyle;rounded=1;jettySize=auto;strokeWidth=2;exitX=0.75;exitY=1;exitDx=0;exitDy=0;" edge="1" source="alb" target="ec2b" parent="vpc">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="e3" value="TCP/5432" style="edgeStyle=orthogonalEdgeStyle;rounded=1;jettySize=auto;dashed=1;dashPattern=8 4;strokeColor=#82b366;fontSize=9;jumpStyle=arc;jumpSize=16;" edge="1" source="ec2a" target="rds" parent="vpc">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
        <mxCell id="e4" value="TCP/5432" style="edgeStyle=orthogonalEdgeStyle;rounded=1;jettySize=auto;dashed=1;dashPattern=8 4;strokeColor=#82b366;fontSize=9;jumpStyle=arc;jumpSize=16;" edge="1" source="ec2b" target="rds" parent="vpc">
          <mxGeometry relative="1" as="geometry"/>
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Example 3: UML Sequence Diagram

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- Lifelines -->
    <mxCell id="client" value="Client" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;size=40;" vertex="1" parent="1">
      <mxGeometry x="100" y="20" width="100" height="400" as="geometry"/>
    </mxCell>
    <mxCell id="server" value="API Server" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;size=40;" vertex="1" parent="1">
      <mxGeometry x="300" y="20" width="100" height="400" as="geometry"/>
    </mxCell>
    <mxCell id="db" value="Database" style="shape=umlLifeline;perimeter=lifelinePerimeter;whiteSpace=wrap;container=1;collapsible=0;recursiveResize=0;outlineConnect=0;portConstraint=eastwest;size=40;" vertex="1" parent="1">
      <mxGeometry x="500" y="20" width="100" height="400" as="geometry"/>
    </mxCell>
    <!-- Activation on server -->
    <mxCell id="act1" value="" style="points=[];fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="server">
      <mxGeometry x="45" y="80" width="10" height="120" as="geometry"/>
    </mxCell>
    <!-- Messages -->
    <mxCell id="m1" value="POST /api/users" style="endArrow=block;endFill=1;html=1;" edge="1" parent="1">
      <mxGeometry width="160" relative="1" as="geometry">
        <mxPoint x="150" y="100" as="sourcePoint"/>
        <mxPoint x="345" y="100" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="m2" value="INSERT INTO users" style="endArrow=block;endFill=1;html=1;" edge="1" parent="1">
      <mxGeometry width="160" relative="1" as="geometry">
        <mxPoint x="355" y="140" as="sourcePoint"/>
        <mxPoint x="545" y="140" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="m3" value="result" style="endArrow=open;endFill=0;dashed=1;html=1;" edge="1" parent="1">
      <mxGeometry width="160" relative="1" as="geometry">
        <mxPoint x="545" y="180" as="sourcePoint"/>
        <mxPoint x="355" y="180" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
    <mxCell id="m4" value="201 Created" style="endArrow=open;endFill=0;dashed=1;html=1;" edge="1" parent="1">
      <mxGeometry width="160" relative="1" as="geometry">
        <mxPoint x="345" y="200" as="sourcePoint"/>
        <mxPoint x="150" y="200" as="targetPoint"/>
      </mxGeometry>
    </mxCell>
  </root>
</mxGraphModel>

Example 4: Entity-Relationship Diagram

<mxGraphModel>
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- User Entity -->
    <mxCell id="user" value="User" style="shape=table;startSize=30;container=1;collapsible=1;childLayout=tableLayout;fixedRows=1;rowLines=0;fontStyle=1;align=center;resizeLast=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
      <mxGeometry x="80" y="80" width="200" height="150" as="geometry"/>
    </mxCell>
    <mxCell id="u1" value="id : INT PK" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;" vertex="1" parent="user">
      <mxGeometry y="30" width="200" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="u2" value="name : VARCHAR(255)" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;" vertex="1" parent="user">
      <mxGeometry y="60" width="200" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="u3" value="email : VARCHAR(255)" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;" vertex="1" parent="user">
      <mxGeometry y="90" width="200" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="u4" value="created_at : TIMESTAMP" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;" vertex="1" parent="user">
      <mxGeometry y="120" width="200" height="30" as="geometry"/>
    </mxCell>
    <!-- Order Entity -->
    <mxCell id="order" value="Order" style="shape=table;startSize=30;container=1;collapsible=1;childLayout=tableLayout;fixedRows=1;rowLines=0;fontStyle=1;align=center;resizeLast=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
      <mxGeometry x="420" y="80" width="200" height="150" as="geometry"/>
    </mxCell>
    <mxCell id="o1" value="id : INT PK" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;" vertex="1" parent="order">
      <mxGeometry y="30" width="200" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="o2" value="user_id : INT FK" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;" vertex="1" parent="order">
      <mxGeometry y="60" width="200" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="o3" value="total : DECIMAL" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;" vertex="1" parent="order">
      <mxGeometry y="90" width="200" height="30" as="geometry"/>
    </mxCell>
    <mxCell id="o4" value="status : ENUM" style="text;strokeColor=none;fillColor=none;align=left;verticalAlign=middle;spacingLeft=4;" vertex="1" parent="order">
      <mxGeometry y="120" width="200" height="30" as="geometry"/>
    </mxCell>
    <!-- Relationship -->
    <mxCell id="rel1" value="" style="edgeStyle=entityRelationEdgeStyle;endArrow=ERzeroToMany;startArrow=ERmandOne;endFill=0;startFill=0;strokeWidth=2;" edge="1" source="user" target="order" parent="1">
      <mxGeometry relative="1" as="geometry"/>
    </mxCell>
    <mxCell id="rel1_label" value="places" style="edgeLabel;align=center;" vertex="1" connectable="0" parent="rel1">
      <mxGeometry x="0" y="0" relative="1" as="geometry"/>
    </mxCell>
  </root>
</mxGraphModel>