jgraph__drawio-mcp/skill-cli/drawio/references/xml-reference.md

draw.io XML Reference

Detailed reference for styles, edge routing, and containers. Consult this when generating complex diagrams.

Common styles

Rounded rectangle:

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

Diamond (decision):

<mxCell id="3" value="Condition?" style="rhombus;whiteSpace=wrap;" vertex="1" parent="1">
  <mxGeometry x="100" y="200" width="120" height="80" as="geometry"/>
</mxCell>

Arrow (edge):

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

Labeled arrow:

<mxCell id="5" value="Yes" style="edgeStyle=orthogonalEdgeStyle;" edge="1" source="3" target="6" parent="1">
  <mxGeometry relative="1" as="geometry"/>
</mxCell>

Style properties

Property	Values	Use for
rounded=1	0 or 1	Rounded corners
whiteSpace=wrap	wrap	Text wrapping
fillColor=#dae8fc	Hex color	Background color
strokeColor=#6c8ebf	Hex color	Border color
fontColor=#333333	Hex color	Text color
shape=cylinder3	shape name	Database cylinders
shape=mxgraph.flowchart.document	shape name	Document shapes
ellipse	style keyword	Circles/ovals
rhombus	style keyword	Diamonds
edgeStyle=orthogonalEdgeStyle	style keyword	Right-angle connectors
edgeStyle=elbowEdgeStyle	style keyword	Elbow connectors
dashed=1	0 or 1	Dashed lines
swimlane	style keyword	Swimlane containers
group	style keyword	Invisible container (pointerEvents=0)
container=1	0 or 1	Enable container behavior on any shape
pointerEvents=0	0 or 1	Prevent container from capturing child connections

Edge routing

CRITICAL: Every edge mxCell must contain a <mxGeometry relative="1" as="geometry" /> child element, even when there are no waypoints. Self-closing edge cells (e.g. <mxCell ... edge="1" ... />) are invalid and will not render correctly. Always use the expanded form:

<mxCell id="e1" edge="1" parent="1" source="a" target="b" style="...">
  <mxGeometry relative="1" as="geometry" />
</mxCell>

draw.io does not have built-in collision detection for edges. Plan layout and routing carefully:

• Use edgeStyle=orthogonalEdgeStyle for right-angle connectors (most common)
• Space nodes generously — at least 60px apart, prefer 200px horizontal / 120px vertical gaps
• Use exitX/exitY and entryX/entryY (values 0-1) to control which side of a node an edge connects to. Spread connections across different sides to prevent overlap
• Leave room for arrowheads: The final straight segment of an edge (between the last bend and the target shape, or between the source shape and the first bend) must be long enough to fit the arrowhead. The default arrow size is 6px (configurable via startSize/endSize styles). If the final segment is too short, the arrowhead overlaps the bend and looks broken. Ensure at least 20px of straight segment before the target and after the source when placing waypoints or positioning nodes
• When using orthogonalEdgeStyle, the auto-router places bends automatically — if source and target are close together or nearly aligned on one axis, the router may place a bend very close to a shape, leaving no room for the arrow. Fix this by either increasing node spacing or adding explicit waypoints that keep the final segment long enough
• Add explicit waypoints when edges would overlap:

  <mxCell id="e1" style="edgeStyle=orthogonalEdgeStyle;" edge="1" parent="1" source="a" target="b">
    <mxGeometry relative="1" as="geometry">
      <Array as="points">
        <mxPoint x="300" y="150"/>
        <mxPoint x="300" y="250"/>
      </Array>
    </mxGeometry>
  </mxCell>
  

• Use rounded=1 on edges for cleaner bends
• Use jettySize=auto for better port spacing on orthogonal edges
• Align all nodes to a grid (multiples of 10)

Containers and groups

For architecture diagrams or any diagram with nested elements, use draw.io's proper parent-child containment — do not just place shapes on top of larger shapes.

How containment works

Set parent="containerId" on child cells. Children use relative coordinates within the container.

Container types

Type	Style	When to use
Group (invisible)	group;	No visual border needed, container has no connections. Includes pointerEvents=0 so child connections are not captured
Swimlane (titled)	swimlane;startSize=30;	Container needs a visible title bar/header, or the container itself has connections
Custom container	Add container=1;pointerEvents=0; to any shape style	Any shape acting as a container without its own connections

Key rules

• Always add pointerEvents=0; to container styles that should not capture connections being rewired between children
• Only omit pointerEvents=0 when the container itself needs to be connectable — in that case, use swimlane style which handles this correctly (the client area is transparent for mouse events while the header remains connectable)
• Children must set parent="containerId" and use coordinates relative to the container

Example: Architecture container with swimlane

<mxCell id="svc1" value="User Service" style="swimlane;startSize=30;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="300" height="200" as="geometry"/>
</mxCell>
<mxCell id="api1" value="REST API" style="rounded=1;whiteSpace=wrap;" vertex="1" parent="svc1">
  <mxGeometry x="20" y="40" width="120" height="60" as="geometry"/>
</mxCell>
<mxCell id="db1" value="Database" style="shape=cylinder3;whiteSpace=wrap;" vertex="1" parent="svc1">
  <mxGeometry x="160" y="40" width="120" height="60" as="geometry"/>
</mxCell>

Example: Invisible group container

<mxCell id="grp1" value="" style="group;" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="300" height="200" as="geometry"/>
</mxCell>
<mxCell id="c1" value="Component A" style="rounded=1;whiteSpace=wrap;" vertex="1" parent="grp1">
  <mxGeometry x="10" y="10" width="120" height="60" as="geometry"/>
</mxCell>