How do I install the XML Generation skill?

Run npx skillmds@latest add lobbi-docs/xml-generation in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the XML Generation skill do?

Complete draw.io XML generation reference including mxGraphModel structure, cell types, style properties, and validation rules It is listed under Coding & Dev Tools on SkillMD.

Is XML Generation safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with XML Generation?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is XML Generation free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published XML Generation?

Lobbi-Docs (@lobbi-docs) published this skill. Their other Agent Skills are listed on their SkillMD profile.

XML Generation by lobbi-docs — Agent Skill

Name: XML Generation
Author: Lobbi-Docs

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:

,  - bold
,  - italic
 - underline
  or   - line break
 - font styling
,  - superscript, subscript
<hr> - horizontal rule
<table>, <tr>, <td> - tables (for UML class boxes, etc.)
<ul>, <ol>, <li> - lists
<a href="url"> - hyperlinks
 - 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:

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

…(truncated)

XML Generation

File contents