Style reference for AI diagram generation

This document is a companion to mxfile.xsd and provides all information needed to programmatically generate valid draw.io (.drawio) files. All data was extracted from the draw.io source code.

1. File Structure Overview

A minimal valid draw.io file:

<mxfile>
  <diagram id="page-1" name="Page-1">
    <mxGraphModel dx="0" dy="0" grid="1" gridSize="10" guides="1"
                  tooltips="1" connect="1" arrows="1" fold="1"
                  page="1" pageScale="1" pageWidth="850" pageHeight="1100"
                  math="0" shadow="0">
      <root>
        <!-- Root container (always required, always id="0") -->
        <mxCell id="0" />
        <!-- Default layer (always required, always id="1", parent="0") -->
        <mxCell id="1" parent="0" />
        <!-- Diagram elements go here with parent="1" -->
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Critical Rules

The first two mxCell elements are mandatory structural cells:
- id="0" — root container, no parent attribute
- id="1" with parent="0" — default layer
All diagram elements must have parent="1" (or the id of a group/layer).
IDs must be unique within the diagram. Use any string (e.g. "2", "node-1", "abc123").
Vertices need vertex="1", edges need edge="1"** — these are mutually exclusive.
Edges should reference source and target via cell IDs. Edges without connections need explicit mxPoint sourcePoint/targetPoint.
Always use uncompressed XML (no compressed="true"). AI should not generate compressed content.
Style strings end with semicolon. Example: "rounded=1;whiteSpace=wrap;html=1;"
Coordinates: origin (0,0) is top-left, x increases rightward, y increases downward.

2. Style String Format

The style attribute on mxCell is a semicolon-separated list of key=value pairs:

key1=value1;key2=value2;key3=value3;

A style class name or shape name can appear as a bare token (without =):

ellipse;whiteSpace=wrap;html=1;fillColor=#DAE8FC;

Here ellipse sets the shape. Multiple bare tokens are possible for style class inheritance:

text;html=1;align=left;

Rules

Keys and values are case-sensitive
No spaces around = or ;
Boolean values use 0 and 1 (not true/false)
Colors use #RRGGBB hex format (with #), none, or default
The trailing ; is conventional but not strictly required
Unknown keys are silently ignored

3. Shape Types

3.1 Core mxGraph Shapes

These shapes are defined in the mxGraph core library:

shape= value	Description	Notes
`rectangle`	Rectangle (default)	Also the default if no shape specified
`ellipse`	Oval / ellipse	Use `aspect=fixed` for circle
`rhombus`	Diamond	Use `perimeter=rhombusPerimeter`
`triangle`	Triangle	Use `perimeter=trianglePerimeter`
`hexagon`	Hexagon	Use `perimeter=hexagonPerimeter2`
`cloud`	Cloud
`cylinder`	3D Cylinder
`line`	Horizontal line
`arrow`	Block arrow
`arrowConnector`	Arrow-shaped connector
`doubleEllipse`	Double-bordered ellipse
`image`	Image container	Requires `image=<url>`
`label`	Rectangle with icon area	Default vertex shape
`swimlane`	Container with header bar	Use `startSize` for header height
`actor`	Actor (stick figure outline)
`connector`	Edge connector	Default edge shape

3.2 Extended Shapes (draw.io Shapes.js)

These are registered via mxCellRenderer.registerShape():

shape= value	Description
`cube`	3D cube
`isoCube`	Isometric cube
`isoCube2`	Isometric cube (variant 2)
`isoRectangle`	Isometric rectangle
`cylinder2`	Cylinder (variant 2, configurable)
`cylinder3`	Cylinder (variant 3)
`datastore`	Cylindrical data store
`note`	Sticky note
`note2`	Note (variant 2)
`document`	Document page with curled bottom
`folder`	Folder icon
`card`	Card with cut corner
`tape`	Punched tape
`tapeData`	Tape data storage
`process`	Process box (double-sided borders)
`process2`	Same as process
`step`	Step/chevron arrow
`plus`	Plus sign
`ext`	Extended rectangle (supports `double=1`)
`callout`	Speech bubble
`parallelogram`	Parallelogram (use `perimeter=parallelogramPerimeter`)
`trapezoid`	Trapezoid (use `perimeter=trapezoidPerimeter`)
`curlyBracket`	Curly bracket
`switch`	Networking switch shape
`transparent`	Invisible shape
`message`	Envelope/message
`corner`	L-shaped corner
`crossbar`	Cross bar
`tee`	T-shaped connector
`singleArrow`	Single arrow
`doubleArrow`	Double-headed arrow
`flexArrow`	Flexible arrow
`wire`	Wire connector
`waypoint`	Waypoint marker
`manualInput`	Manual input (flowchart)
`internalStorage`	Internal storage (flowchart)
`dataStorage`	Data storage (flowchart)
`loopLimit`	Loop limit (flowchart)
`offPageConnector`	Off-page connector
`delay`	Delay shape
`display`	Display device
`or`	OR gate
`orEllipse`	OR ellipse
`xor`	XOR gate
`sumEllipse`	Sum/sigma ellipse
`sortShape`	Sort shape
`collate`	Collate shape
`cross`	Cross / X shape
`dimension`	Dimension line
`partialRectangle`	Rectangle with configurable borders
`lineEllipse`	Line with ellipse
`link`	Link / chain shape
`pipe`	Pipe connector
`zigzag`	Zigzag connector
`filledEdge`	Filled edge connector
`table`	Table container
`tableRow`	Table row
`tableLine`	Table line
`rect2`	Alternative rectangle

3.3 UML Shapes

shape= value	Description
`umlActor`	UML stick figure
`umlBoundary`	UML boundary
`umlEntity`	UML entity
`umlDestroy`	UML destruction mark
`umlControl`	UML control
`umlLifeline`	UML lifeline
`umlFrame`	UML frame
`umlState`	UML state (use `perimeter=mxPerimeter.StatePerimeter`)
`lollipop`	UML provided interface
`requires`	UML required interface
`requiredInterface`	UML required interface (arc)
`providedRequiredInterface`	UML assembly connector
`module`	UML module
`component`	UML component
`associativeEntity`	ER associative entity
`endState`	State diagram end state
`startState`	State diagram start state

3.4 Stencil Libraries

Additional shapes are available via stencil libraries in the stencils/ directory. Use with: shape=stencil(<library>.<shape>) or shape=mxgraph.<library>.<shape>.

Major libraries:

mxgraph.flowchart.* — Flowchart shapes
mxgraph.bpmn.* — BPMN shapes
mxgraph.aws4.* — AWS architecture icons
mxgraph.azure.* — Azure architecture icons
mxgraph.gcp.* / mxgraph.gcp2.* — Google Cloud icons
mxgraph.cisco.* / mxgraph.cisco19.* — Cisco networking
mxgraph.kubernetes.* — Kubernetes icons
mxgraph.uml.* — UML shapes
mxgraph.er.* — Entity-relationship shapes
mxgraph.electrical.* — Electrical engineering symbols
mxgraph.pid.* — Piping and instrumentation
mxgraph.mockup.* — UI wireframe components
mxgraph.lean_mapping.* — Lean mapping
mxgraph.eip.* — Enterprise integration patterns

4. Style Properties Reference

4.1 Fill and Stroke

Property	Values	Default	Description
`fillColor`	`#RRGGBB`, `none`, `default`	`default`	Shape fill color
`gradientColor`	`#RRGGBB`, `none`	none	Gradient end color (gradient from fillColor to gradientColor)
`gradientDirection`	`north`, `south`, `east`, `west`	`south`	Gradient direction
`strokeColor`	`#RRGGBB`, `none`, `default`	`default`	Border/stroke color
`strokeWidth`	number	`1`	Border width in pixels
`dashed`	`0`, `1`	`0`	Dashed stroke
`dashPattern`	string	—	Dash pattern, e.g. `"1 3"` (1px dash, 3px gap), `"8 8"`
`opacity`	`0`–`100`	`100`	Overall opacity (0=transparent, 100=opaque)
`fillOpacity`	`0`–`100`	`100`	Fill opacity only
`strokeOpacity`	`0`–`100`	`100`	Stroke opacity only
`glass`	`0`, `1`	`0`	Glass/shine overlay effect
`shadow`	`0`, `1`	`0`	Drop shadow (also controlled globally on mxGraphModel)

4.2 Shape Geometry

Property	Values	Default	Description
`shape`	see Shape Types above	`label`	Shape type
`perimeter`	see Perimeters below	`rectanglePerimeter`	Connection point calculation
`rounded`	`0`, `1`	`0`	Round rectangle corners
`arcSize`	number	—	Corner radius for rounded shapes (0–50, as percentage)
`aspect`	`variable`, `fixed`	`variable`	`fixed` preserves width/height ratio
`direction`	`north`, `south`, `east`, `west`	—	Rotate shape by 90° increments
`flipH`	`0`, `1`	`0`	Flip horizontally
`flipV`	`0`, `1`	`0`	Flip vertically
`rotation`	number (degrees)	`0`	Free rotation angle (0–360)
`fixedSize`	`0`, `1`	`0`	Shape keeps size independent of label

4.3 Text and Labels

Property	Values	Default	Description
`html`	`0`, `1`	`1`	Enable HTML label rendering
`whiteSpace`	`wrap`, `nowrap`	—	Text wrapping mode. Use `wrap` for most shapes
`fontSize`	number	`12`	Font size in pixels
`fontFamily`	string	`Helvetica`	Font family name
`fontColor`	`#RRGGBB`, `default`	`default`	Text color
`fontStyle`	bitmask	`0`	Font style: 0=normal, 1=bold, 2=italic, 4=underline (combine by adding: 3=bold+italic)
`align`	`left`, `center`, `right`	`center`	Horizontal text alignment
`verticalAlign`	`top`, `middle`, `bottom`	`middle`	Vertical text alignment
`labelPosition`	`left`, `center`, `right`	`center`	Horizontal label position relative to shape
`verticalLabelPosition`	`top`, `middle`, `bottom`	`middle`	Vertical label position relative to shape
`overflow`	`visible`, `hidden`, `fill`, `width`	—	Text overflow handling
`spacing`	number	`2`	General padding in pixels
`spacingTop`	number	`0`	Top padding
`spacingBottom`	number	`0`	Bottom padding
`spacingLeft`	number	`0`	Left padding
`spacingRight`	number	`0`	Right padding
`textOpacity`	`0`–`100`	`100`	Text opacity
`labelBackgroundColor`	`#RRGGBB`, `none`, `default`	—	Background behind text (useful for edge labels)
`labelBorderColor`	`#RRGGBB`, `none`	—	Border around label
`labelWidth`	number	—	Fixed label width
`textDirection`	`default`, `ltr`, `rtl`	`default`	Text direction
`horizontal`	`0`, `1`	`1`	`0` for vertical text

4.4 Edge / Connector Properties

Property	Values	Default	Description
`edgeStyle`	see Edge Styles below	—	Routing algorithm
`curved`	`0`, `1`	`0`	Curved edge path
`rounded`	`0`, `1`	`1`	Round edge corners (for orthogonal)
`jettySize`	`auto`, number	`auto`	Spacing from port for orthogonal edges
`sourceJettySize`	number	—	Source-side jetty override
`targetJettySize`	number	—	Target-side jetty override
`orthogonalLoop`	`0`, `1`	`1`	Self-loop routing style
`elbow`	`horizontal`, `vertical`	—	Elbow edge direction
`jumpStyle`	`arc`, `gap`, `sharp`	—	Line crossing visualization
`jumpSize`	number	`6`	Jump width at crossings

4.5 Arrow Markers

Property	Values	Default	Description
`startArrow`	arrow type	`none`	Marker at edge start
`endArrow`	arrow type	`classic`	Marker at edge end
`startSize`	number	—	Start marker size
`endSize`	number	—	End marker size
`startFill`	`0`, `1`	`1`	Fill start marker
`endFill`	`0`, `1`	`1`	Fill end marker

Arrow type values:

Value	Description
`none`	No arrow
`classic`	Standard filled triangle
`classicThin`	Thin triangle
`block`	Filled block
`blockThin`	Thin block
`open`	Open (unfilled) triangle
`openThin`	Thin open triangle
`oval`	Circle/oval
`diamond`	Diamond
`diamondThin`	Thin diamond
`box`	Square box
`halfCircle`	Half circle
`circle`	Circle
`circlePlus`	Circle with plus
`cross`	Cross mark
`baseDash`	Perpendicular dash
`doubleBlock`	Double filled block
`dash`	Short dash
`async`	Asynchronous (half-arrow)
`openAsync`	Open asynchronous arrow
`manyOptional`	ER many-optional (crow's foot)

Fill behavior: startFill=0/endFill=0 renders the marker as an outline only. This is important for UML and ER diagram conventions (e.g., open diamond = aggregation, filled diamond = composition).

4.6 Connection Points

Property	Values	Default	Description
`exitX`	`0.0`–`1.0`	—	Relative x of exit point (0=left, 0.5=center, 1=right)
`exitY`	`0.0`–`1.0`	—	Relative y of exit point (0=top, 0.5=middle, 1=bottom)
`exitDx`	number	—	Absolute x offset from exit point
`exitDy`	number	—	Absolute y offset from exit point
`exitPerimeter`	`0`, `1`	`1`	Use perimeter for exit point
`entryX`	`0.0`–`1.0`	—	Relative x of entry point
`entryY`	`0.0`–`1.0`	—	Relative y of entry point
`entryDx`	number	—	Absolute x offset from entry point
`entryDy`	number	—	Absolute y offset from entry point
`entryPerimeter`	`0`, `1`	`1`	Use perimeter for entry point
`portConstraint`	`eastwest`, `northsouth`, `perimeter`, `fixed`	—	Port constraint

4.7 Container / Swimlane Properties

Property	Values	Default	Description
`container`	`0`, `1`	`0`	Cell is a container (children can be placed inside)
`collapsible`	`0`, `1`	`1`	Container can be collapsed
`recursiveResize`	`0`, `1`	`1`	Resize children when container resizes
`swimlaneFillColor`	`#RRGGBB`	—	Swimlane header fill color
`startSize`	number	`23`	Swimlane header height in pixels
`horizontal`	`0`, `1`	`1`	Swimlane orientation (1=header on top, 0=header on left)
`childLayout`	`stackLayout`, `treeLayout`, `flowLayout`	—	Auto-layout for children
`resizeParent`	`0`, `1`	—	Parent resizes to fit children
`resizeParentMax`	`0`, `1`	—	Limit parent resize
`resizeLast`	`0`, `1`	—	Last child fills remaining space
`horizontalStack`	`0`, `1`	—	Stack direction (1=horizontal, 0=vertical)
`marginBottom`	number	—	Bottom margin for stack layout

4.8 Image Properties

Property	Values	Default	Description
`image`	URL string	—	Image URL (data: URIs also supported)
`imageWidth`	number	`42`	Image width
`imageHeight`	number	`42`	Image height
`imageAlign`	`left`, `center`, `right`	—	Image horizontal alignment
`imageVerticalAlign`	`top`, `middle`, `bottom`	—	Image vertical alignment
`imageAspect`	`0`, `1`	`1`	Preserve image aspect ratio

4.9 Sketch / Hand-Drawn Style

Property	Values	Default	Description
`sketch`	`0`, `1`	`0`	Enable hand-drawn/sketch style (uses rough.js)
`comic`	`0`, `1`	`0`	Comic book style
`fillStyle`	`solid`, `hachure`, `cross-hatch`, `dots`	—	Fill pattern for sketch mode
`fillWeight`	number	—	Hatch line weight (negative = thinner)
`hachureGap`	number	—	Gap between hatch lines in pixels
`hachureAngle`	number (degrees)	—	Angle of hatch lines
`jiggle`	number	—	Hand-drawn jiggle amount
`curveFitting`	`0`–`1`	—	Curve fitting quality
`simplification`	`0`–`1`	—	Path simplification
`disableMultiStroke`	`0`, `1`	—	Disable double-stroke effect
`disableMultiStrokeFill`	`0`, `1`	—	Disable double-stroke fill

4.10 Behavior Properties

Property	Values	Default	Description
`movable`	`0`, `1`	`1`	Allow moving
`resizable`	`0`, `1`	`1`	Allow resizing
`rotatable`	`0`, `1`	`1`	Allow rotation
`bendable`	`0`, `1`	`1`	Allow bending edges
`editable`	`0`, `1`	`1`	Allow label editing
`deletable`	`0`, `1`	`1`	Allow deletion
`cloneable`	`0`, `1`	`1`	Allow cloning
`foldable`	`0`, `1`	—	Allow fold/collapse
`connectable`	`0`, `1`	`1`	Allow connections
`pointerEvents`	`0`, `1`	`1`	Enable mouse events
`autosize`	`0`, `1`	`0`	Auto-size to fit content

5. Edge Styles (Routing Algorithms)

edgeStyle= value	Description
`orthogonalEdgeStyle`	Routes with right-angle turns (most common)
`segmentEdgeStyle`	Manual segments with horizontal/vertical segments
`elbowEdgeStyle`	Single elbow (one bend). Combine with `elbow=horizontal` or `elbow=vertical`
`entityRelationEdgeStyle`	Entity-relationship style (perpendicular exits)
`isometricEdgeStyle`	Isometric diagram routing
`loopEdgeStyle`	Self-referencing loop
`sideToSideEdgeStyle`	Side-to-side connection
`topToBottomEdgeStyle`	Top-to-bottom connection
(empty/none)	Straight line, no routing

Common edge style combinations:

edgeStyle=orthogonalEdgeStyle;rounded=1;         # Rounded orthogonal (default-like)
edgeStyle=orthogonalEdgeStyle;curved=1;           # Curved orthogonal
edgeStyle=elbowEdgeStyle;elbow=horizontal;        # Horizontal elbow
edgeStyle=entityRelationEdgeStyle;                # ER-style connections
edgeStyle=none;                                    # Straight line

6. Perimeter Types

The perimeter determines how connection points are calculated on a shape's border:

perimeter= value	Use with
`rectanglePerimeter`	Rectangles (default)
`ellipsePerimeter`	Ellipses, circles
`rhombusPerimeter`	Diamond shapes
`trianglePerimeter`	Triangles
`hexagonPerimeter2`	Hexagons
`parallelogramPerimeter`	Parallelograms
`trapezoidPerimeter`	Trapezoids
`calloutPerimeter`	Callout/speech bubbles
`backbonePerimeter`	Backbone/bus shapes
`centerPerimeter`	Single center point
`stepPerimeter`	Step/chevron shapes

Important: When using non-rectangular shapes, always set the matching perimeter. Otherwise edges will connect to the rectangular bounding box instead of the visible shape border.

7. Predefined Style Classes

These class names can be used as bare tokens in the style string. They set multiple style properties at once:

Class	Sets
`text`	No fill, no stroke, left-aligned, top-aligned
`edgeLabel`	Extends text, adds label background, font size 11
`label`	Bold, left-aligned, with image area (42x42), rounded
`icon`	Extends label, centered image above text
`swimlane`	Swimlane shape, bold, header size 23
`group`	No fill, no stroke, transparent container
`ellipse`	Ellipse shape with ellipsePerimeter
`rhombus`	Diamond shape with rhombusPerimeter
`triangle`	Triangle shape with trianglePerimeter
`line`	Line shape, strokeWidth=4
`image`	Image shape with label below
`arrow`	Arrow shape, no edge routing

Color Theme Classes

Each sets fillColor, gradientColor, strokeColor, plus shadow=1 and glass=1:

Class	fillColor	gradientColor	strokeColor
`blue`	#DAE8FC	#7EA6E0	#6C8EBF
`green`	#D5E8D4	#97D077	#82B366
`yellow`	#FFF2CC	#FFD966	#D6B656
`orange`	#FFCD28	#FFA500	#D79B00
`red`	#F8CECC	#EA6B66	#B85450
`pink`	#E6D0DE	#B5739D	#996185
`purple`	#E1D5E7	#8C6C9C	#9673A6
`gray`	#F5F5F5	#B3B3B3	#666666
`turquoise`	#D5E8D4	#67AB9F	#6A9153

plain-* variants (e.g. plain-blue) set the same colors without shadow and glass.

8. Common Color Palettes

Standard draw.io Colors

These are commonly used in the draw.io UI:

Fill colors (light):

#DAE8FC (light blue)
#D5E8D4 (light green)
#FFF2CC (light yellow)
#F8CECC (light red)
#E1D5E7 (light purple)
#E6D0DE (light pink)
#F5F5F5 (light gray)
#FFCD28 (orange)
#FFE6CC (light orange)

Stroke colors (matching):

#6C8EBF (blue)
#82B366 (green)
#D6B656 (yellow/gold)
#B85450 (red)
#9673A6 (purple)
#996185 (pink)
#666666 (gray)
#D79B00 (orange)

Font/accent colors:

#000000 (black)
#FFFFFF (white)
#333333 (dark gray)
#0000EE (link blue)

Special Color Values

none — transparent / no color (removes fill or stroke)
default — uses the current theme's default (resolves at render time)

9. HTML Labels

When html=1 is set in the style, the cell's value attribute can contain HTML:

Supported HTML Elements

, , , <s> — text formatting
  /   — line break
, <div>,  — block/inline containers
 — font attributes (face, size, color)
<table>, <tr>, <td>, <th> — tables
<ul>, <ol>, <li> — lists
<hr> — horizontal rule
<img> — inline images (with src attribute)
<a> — links (href attribute)
,  — subscript/superscript

HTML in Attributes

HTML in the value attribute must be XML-escaped:

< → <
> → >
& → &
" → "

Example:

<mxCell value="&lt;b&gt;Title&lt;/b&gt;&lt;br&gt;Description"
        style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">

Common HTML Patterns

Bold title with description:

&lt;b&gt;Title&lt;/b&gt;&lt;br&gt;Description text

UML class box (within table container):

&lt;p style=&quot;margin:0px;margin-top:4px;text-align:center;&quot;&gt;&lt;b&gt;ClassName&lt;/b&gt;&lt;/p&gt;
&lt;hr size=&quot;1&quot;/&gt;
&lt;p style=&quot;margin:0px;margin-left:4px;&quot;&gt;+ field: Type&lt;/p&gt;
&lt;hr size=&quot;1&quot;/&gt;
&lt;p style=&quot;margin:0px;margin-left:4px;&quot;&gt;+ method(): ReturnType&lt;/p&gt;

Colored text:

&lt;font color=&quot;#FF0000&quot;&gt;Red text&lt;/font&gt;

10. Layers

Layers are additional mxCell elements with parent="0":

<root>
  <mxCell id="0" />
  <mxCell id="1" parent="0" />               <!-- Default layer -->
  <mxCell id="layer2" value="Background" parent="0" />  <!-- Additional layer -->

  <!-- Elements on default layer -->
  <mxCell id="2" ... parent="1" />

  <!-- Elements on "Background" layer -->
  <mxCell id="3" ... parent="layer2" />
</root>

To hide a layer: add visible="0" to the layer cell.

11. Groups and Containers

A group/container is a vertex that other cells reference as their parent:

<!-- Group container -->
<mxCell id="group1" value="Group" style="group;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="300" height="200" as="geometry" />
</mxCell>

<!-- Children reference the group as parent -->
<mxCell id="child1" value="Inside" style="rounded=1;html=1;" vertex="1" parent="group1">
  <mxGeometry x="10" y="10" width="100" height="40" as="geometry" />
</mxCell>

Key points:

Child coordinates are relative to the parent container
Use style="group;" for invisible containers
Use style="swimlane;startSize=30;" for containers with a visible header
Add container=1; to any style to make it act as a container
collapsible=0; prevents the collapse/expand button

Collapsible Containers and Alternate Bounds

When a container (e.g. swimlane) is collapsible, draw.io stores alternate bounds in an mxRectangle child element inside mxGeometry. When the container is collapsed/expanded, the geometry swaps between the normal and alternate bounds:

<mxCell id="class1" value="ClassName" style="swimlane;fontStyle=1;childLayout=stackLayout;startSize=26;collapsible=1;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="200" height="150" as="geometry">
    <mxRectangle x="100" y="100" width="200" height="26" as="alternateBounds" />
  </mxGeometry>
</mxCell>

The alternateBounds typically has the same x/y but a smaller height (just the header). AI generators generally do not need to produce mxRectangle elements — draw.io adds them automatically when the user collapses a container.

12. Edge Geometry and Labels

Basic Connected Edge

<mxCell id="e1" value="" style="endArrow=classic;html=1;"
        edge="1" parent="1" source="v1" target="v2">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

Edge with Waypoints

<mxCell id="e2" value="" style="edgeStyle=orthogonalEdgeStyle;html=1;"
        edge="1" parent="1" source="v1" target="v2">
  <mxGeometry relative="1" as="geometry">
    <Array as="points">
      <mxPoint x="300" y="150" />
      <mxPoint x="300" y="250" />
    </Array>
  </mxGeometry>
</mxCell>

Edge with Label

Edge labels are usually encoded in the edge cell's value. The label position is controlled by the geometry:

<mxCell id="e3" value="label text" style="endArrow=classic;html=1;"
        edge="1" parent="1" source="v1" target="v2">
  <mxGeometry x="-0.5" y="0" relative="1" as="geometry">
    <mxPoint as="offset" />
  </mxGeometry>
</mxCell>

x on geometry: position along edge (-1 to 1, where 0 = center, -1 = near source, 1 = near target)
y on geometry: perpendicular offset in pixels

Unconnected Edge (Floating)

<mxCell id="e4" value="" style="endArrow=classic;html=1;"
        edge="1" parent="1">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="100" y="200" as="sourcePoint" />
    <mxPoint x="300" y="100" as="targetPoint" />
  </mxGeometry>
</mxCell>

13. Complete Examples

Example 1: Simple Flowchart

<mxfile>
  <diagram id="flowchart" name="Flowchart">
    <mxGraphModel dx="0" dy="0" grid="1" gridSize="10" guides="1"
                  tooltips="1" connect="1" arrows="1" fold="1"
                  page="1" pageScale="1" pageWidth="850" pageHeight="1100">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- Start -->
        <mxCell id="start" value="Start" style="ellipse;whiteSpace=wrap;html=1;fillColor=#D5E8D4;strokeColor=#82B366;" vertex="1" parent="1">
          <mxGeometry x="340" y="40" width="120" height="60" as="geometry" />
        </mxCell>

        <!-- Decision -->
        <mxCell id="decision" value="Condition?" style="rhombus;whiteSpace=wrap;html=1;fillColor=#FFF2CC;strokeColor=#D6B656;" vertex="1" parent="1">
          <mxGeometry x="320" y="150" width="160" height="80" as="geometry" />
        </mxCell>

        <!-- Process A -->
        <mxCell id="procA" value="Process A" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#DAE8FC;strokeColor=#6C8EBF;" vertex="1" parent="1">
          <mxGeometry x="160" y="290" width="120" height="60" as="geometry" />
        </mxCell>

        <!-- Process B -->
        <mxCell id="procB" value="Process B" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#DAE8FC;strokeColor=#6C8EBF;" vertex="1" parent="1">
          <mxGeometry x="520" y="290" width="120" height="60" as="geometry" />
        </mxCell>

        <!-- End -->
        <mxCell id="end" value="End" style="ellipse;whiteSpace=wrap;html=1;fillColor=#F8CECC;strokeColor=#B85450;" vertex="1" parent="1">
          <mxGeometry x="340" y="420" width="120" height="60" as="geometry" />
        </mxCell>

        <!-- Edges -->
        <mxCell id="e1" style="endArrow=classic;html=1;" edge="1" parent="1" source="start" target="decision">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e2" value="Yes" style="endArrow=classic;html=1;" edge="1" parent="1" source="decision" target="procA">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e3" value="No" style="endArrow=classic;html=1;" edge="1" parent="1" source="decision" target="procB">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e4" style="endArrow=classic;html=1;" edge="1" parent="1" source="procA" target="end">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
        <mxCell id="e5" style="endArrow=classic;html=1;" edge="1" parent="1" source="procB" target="end">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Example 2: UML Class Diagram

<mxfile>
  <diagram id="uml" name="Classes">
    <mxGraphModel dx="0" dy="0" grid="1" gridSize="10" guides="1"
                  tooltips="1" connect="1" arrows="1" fold="1"
                  page="1" pageScale="1" pageWidth="850" pageHeight="1100">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- Class: Animal -->
        <mxCell id="animal" value="&lt;p style=&quot;margin:0px;margin-top:4px;text-align:center;&quot;&gt;&lt;i&gt;&amp;lt;&amp;lt;abstract&amp;gt;&amp;gt;&lt;/i&gt;&lt;br&gt;&lt;b&gt;Animal&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0px;margin-left:4px;&quot;&gt;+ name: String&lt;br&gt;+ age: int&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0px;margin-left:4px;&quot;&gt;+ speak(): void&lt;br&gt;+ move(): void&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;whiteSpace=wrap;" vertex="1" parent="1">
          <mxGeometry x="300" y="40" width="200" height="140" as="geometry" />
        </mxCell>

        <!-- Class: Dog -->
        <mxCell id="dog" value="&lt;p style=&quot;margin:0px;margin-top:4px;text-align:center;&quot;&gt;&lt;b&gt;Dog&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0px;margin-left:4px;&quot;&gt;+ breed: String&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0px;margin-left:4px;&quot;&gt;+ fetch(): void&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;whiteSpace=wrap;" vertex="1" parent="1">
          <mxGeometry x="180" y="260" width="160" height="120" as="geometry" />
        </mxCell>

        <!-- Class: Cat -->
        <mxCell id="cat" value="&lt;p style=&quot;margin:0px;margin-top:4px;text-align:center;&quot;&gt;&lt;b&gt;Cat&lt;/b&gt;&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0px;margin-left:4px;&quot;&gt;+ indoor: boolean&lt;/p&gt;&lt;hr size=&quot;1&quot;/&gt;&lt;p style=&quot;margin:0px;margin-left:4px;&quot;&gt;+ purr(): void&lt;/p&gt;" style="verticalAlign=top;align=left;overflow=fill;fontSize=12;fontFamily=Helvetica;html=1;whiteSpace=wrap;" vertex="1" parent="1">
          <mxGeometry x="460" y="260" width="160" height="120" as="geometry" />
        </mxCell>

        <!-- Inheritance: Dog extends Animal -->
        <mxCell id="e1" style="endArrow=block;endFill=0;html=1;" edge="1" parent="1" source="dog" target="animal">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>

        <!-- Inheritance: Cat extends Animal -->
        <mxCell id="e2" style="endArrow=block;endFill=0;html=1;" edge="1" parent="1" source="cat" target="animal">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Example 3: Network Diagram with Groups

<mxfile>
  <diagram id="network" name="Network">
    <mxGraphModel dx="0" dy="0" grid="1" gridSize="10" guides="1"
                  tooltips="1" connect="1" arrows="1" fold="1"
                  page="1" pageScale="1" pageWidth="850" pageHeight="1100">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- DMZ Group -->
        <mxCell id="dmz" value="DMZ" style="swimlane;startSize=25;fillColor=#F5F5F5;strokeColor=#666666;fontStyle=1;html=1;" vertex="1" parent="1">
          <mxGeometry x="50" y="50" width="300" height="200" as="geometry" />
        </mxCell>

        <!-- Firewall inside DMZ -->
        <mxCell id="fw" value="Firewall" style="shape=mxgraph.cisco.firewalls.firewall;sketch=0;html=1;whiteSpace=wrap;" vertex="1" parent="dmz">
          <mxGeometry x="100" y="60" width="80" height="60" as="geometry" />
        </mxCell>

        <!-- Internal Group -->
        <mxCell id="internal" value="Internal Network" style="swimlane;startSize=25;fillColor=#DAE8FC;strokeColor=#6C8EBF;fontStyle=1;html=1;" vertex="1" parent="1">
          <mxGeometry x="450" y="50" width="300" height="200" as="geometry" />
        </mxCell>

        <!-- Server -->
        <mxCell id="srv" value="App Server" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#D5E8D4;strokeColor=#82B366;" vertex="1" parent="internal">
          <mxGeometry x="90" y="60" width="120" height="60" as="geometry" />
        </mxCell>

        <!-- Connection -->
        <mxCell id="conn" style="endArrow=classic;startArrow=classic;html=1;strokeWidth=2;" edge="1" parent="1" source="fw" target="srv">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

Example 4: Custom Metadata with UserObject

<mxfile>
  <diagram id="metadata" name="Servers">
    <mxGraphModel dx="0" dy="0" grid="1" gridSize="10" guides="1"
                  tooltips="1" connect="1" arrows="1" fold="1"
                  page="1" pageScale="1" pageWidth="850" pageHeight="1100">
      <root>
        <mxCell id="0" />
        <mxCell id="1" parent="0" />

        <!-- Server with custom attributes -->
        <UserObject id="srv1" label="Web Server" tooltip="Production web server"
                    ip="10.0.1.10" environment="production" owner="ops-team">
          <mxCell style="rounded=1;whiteSpace=wrap;html=1;fillColor=#D5E8D4;strokeColor=#82B366;" vertex="1" parent="1">
            <mxGeometry x="100" y="100" width="140" height="70" as="geometry" />
          </mxCell>
        </UserObject>

        <!-- Database with custom attributes -->
        <object id="db1" label="PostgreSQL" ip="10.0.2.20"
                environment="production" port="5432">
          <mxCell style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;fillColor=#DAE8FC;strokeColor=#6C8EBF;" vertex="1" parent="1">
            <mxGeometry x="350" y="90" width="100" height="90" as="geometry" />
          </mxCell>
        </object>

        <mxCell id="conn1" style="endArrow=classic;html=1;" edge="1" parent="1" source="srv1" target="db1">
          <mxGeometry relative="1" as="geometry" />
        </mxCell>
      </root>
    </mxGraphModel>
  </diagram>
</mxfile>

14. Additional mxGraphModel Attributes

These optional attributes on <mxGraphModel> are less commonly used but appear in real-world files:

Attribute	Values	Description
`adaptiveColors`	`auto`, `simple`, `none`, `default`	Controls color adaptation for light/dark mode viewing

adaptiveColors example:

<mxGraphModel dx="0" dy="0" grid="1" ... adaptiveColors="auto">

AI generators typically do not need to set this attribute.

15. Validation Checklist for AI-Generated Files

Use this checklist to verify generated draw.io files:

Valid XML: File is well-formed XML with proper escaping
Root element: <mxfile> as root, contains at least one <diagram>
Diagram IDs: Each diagram has a unique id attribute
Structural cells: Root contains <mxCell id="0"/> and <mxCell id="1" parent="0"/>
Unique IDs: All cell IDs are unique within the diagram
Parent references: Every cell (except id="0") has a valid parent referencing an existing cell
Type flags: Each content cell has either vertex="1" or edge="1" (not both)
Edge references: Edge source and target reference existing vertex IDs
Geometry: Vertices have mxGeometry with x, y, width, height; edges have relative="1"
Style format: Style strings use key=value; format, valid keys and values
Perimeter match: Non-rectangular shapes have matching perimeter in style
HTML escaping: HTML in value attributes is properly XML-escaped
Coordinate system: x increases right, y increases down, no negative dimensions
Group hierarchy: Children of groups have coordinates relative to the group

1. File Structure Overview​

Critical Rules​

2. Style String Format​

Rules​

3. Shape Types​

3.1 Core mxGraph Shapes​

3.2 Extended Shapes (draw.io Shapes.js)​

3.3 UML Shapes​

3.4 Stencil Libraries​

4. Style Properties Reference​

4.1 Fill and Stroke​

4.2 Shape Geometry​

4.3 Text and Labels​

4.4 Edge / Connector Properties​

4.5 Arrow Markers​

4.6 Connection Points​

4.7 Container / Swimlane Properties​

4.8 Image Properties​

4.9 Sketch / Hand-Drawn Style​

4.10 Behavior Properties​

5. Edge Styles (Routing Algorithms)​

6. Perimeter Types​

7. Predefined Style Classes​

Color Theme Classes​

8. Common Color Palettes​

Standard draw.io Colors​

Special Color Values​

9. HTML Labels​

Supported HTML Elements​

HTML in Attributes​

Common HTML Patterns​

10. Layers​

11. Groups and Containers​

Collapsible Containers and Alternate Bounds​

12. Edge Geometry and Labels​

Basic Connected Edge​

Edge with Waypoints​

Edge with Label​

Unconnected Edge (Floating)​

13. Complete Examples​

Example 1: Simple Flowchart​

Example 2: UML Class Diagram​

Example 3: Network Diagram with Groups​

Example 4: Custom Metadata with UserObject​

14. Additional mxGraphModel Attributes​

15. Validation Checklist for AI-Generated Files​