drawio-core-geometry

Use when positioning shapes, routing edges, or placing labels in Draw.io diagrams. Prevents the #1 layout mistake: using absolute coordinates inside containers instead of relative coordinates. Covers the coordinate system, vertex and edge geometry, waypoints, container-relative positioning, and connection points. Keywords: drawio geometry, mxGeometry, coordinates, position, waypoints, connection points, exitX, entryX, shapes overlap, wrong position, edge routing, move shapes, align elements.

Jump to install

Repository: Impertio-Studio/Draw.io-Claude-Skill-Package
Last source activity: March 30, 2026 at 18:25
Detected SKILL.md language: English
Stars: 4
Forks: 1

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

Back to search Back to installation

(0,0) ────────────► +X (right)
  │
  │
  │
  ▼
 +Y (down)

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

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

Attribute	Range	Meaning
`x`	`-1` to `1`	Position along the edge path: `-1` = source end, `0` = midpoint, `1` = target end
`y`	Any pixel value	Perpendicular offset from the edge path. Positive = below/right. Negative = above/left

<!-- Label at midpoint, offset 15px perpendicular -->
<mxGeometry x="0" y="15" relative="1" as="geometry" />

<mxGeometry x="0.5" y="0" relative="1" as="geometry">
  <mxPoint x="10" y="-5" as="offset" />
</mxGeometry>

<mxCell id="5" edge="1" parent="1" style="edgeStyle=orthogonalEdgeStyle;">
  <mxGeometry relative="1" as="geometry">
    <mxPoint x="100" y="200" as="sourcePoint" />
    <mxPoint x="400" y="350" as="targetPoint" />
  </mxGeometry>
</mxCell>

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

Edge Style	Waypoint Effect
`orthogonalEdgeStyle`	Right-angle segments through each waypoint
`elbowEdgeStyle`	First waypoint determines elbow bend location
`curved=1`	Waypoints become Bezier control points
No edgeStyle (straight)	Direct line segments through each waypoint

<!-- Container at canvas position (100, 100) -->
<mxCell id="10" value="Server Group" style="group" vertex="1" parent="1">
  <mxGeometry x="100" y="100" width="300" height="200" as="geometry" />
</mxCell>
<!-- Child at (20, 20) RELATIVE to parent = canvas position (120, 120) -->
<mxCell id="11" value="Web Server" style="rounded=1;" vertex="1" parent="10">
  <mxGeometry x="20" y="20" width="120" height="60" as="geometry" />
</mxCell>

Is the cell a child of a container (parent != "1")?
├── YES → Use coordinates RELATIVE to parent's top-left
│         x=20, y=30 means 20px right and 30px down from parent origin
└── NO  → Use ABSOLUTE canvas coordinates
          x=200, y=150 means 200px right and 150px down from canvas origin

<mxCell id="10" value="Server Group" style="swimlane;" vertex="1"
        collapsed="1" parent="1">
  <mxGeometry x="100" y="100" width="300" height="200" as="geometry">
    <mxRectangle x="100" y="100" width="160" height="30" as="alternateBounds" />
  </mxGeometry>
</mxCell>

(0,0)──────(0.5,0)──────(1,0)
  │                        │
(0,0.5)   (0.5,0.5)   (1,0.5)
  │                        │
(0,1)──────(0.5,1)──────(1,1)

Property	Range	Meaning
`exitX`	0.0 - 1.0	Relative X where edge leaves the source shape
`exitY`	0.0 - 1.0	Relative Y where edge leaves the source shape
`entryX`	0.0 - 1.0	Relative X where edge enters the target shape
`entryY`	0.0 - 1.0	Relative Y where edge enters the target shape
`exitDx`	pixel value	Absolute X offset from exit point
`exitDy`	pixel value	Absolute Y offset from exit point
`entryDx`	pixel value	Absolute X offset from entry point
`entryDy`	pixel value	Absolute Y offset from entry point
`exitPerimeter`	`0` or `1`	Project exit point onto shape perimeter (default: `1`)
`entryPerimeter`	`0` or `1`	Project entry point onto shape perimeter (default: `1`)

exitX=1;exitY=0.5;entryX=0;entryY=0.5;     → Right-to-left (horizontal flow)
exitX=0.5;exitY=1;entryX=0.5;entryY=0;     → Bottom-to-top (vertical flow)
exitX=1;exitY=0;entryX=0;entryY=1;         → Diagonal: top-right to bottom-left
exitX=0.5;exitY=0.5;entryX=0.5;entryY=0.5; → Center-to-center

Property	Values	Default	Purpose
`labelPosition`	`left`, `center`, `right`	`center`	Horizontal label position relative to shape
`verticalLabelPosition`	`top`, `middle`, `bottom`	`middle`	Vertical label position relative to shape
`align`	`left`, `center`, `right`	`center`	Text alignment within label bounds
`verticalAlign`	`top`, `middle`, `bottom`	`middle`	Vertical text alignment within label bounds

labelPosition=left;align=right;                        → Label left of shape
labelPosition=right;align=left;                        → Label right of shape
verticalLabelPosition=top;verticalAlign=bottom;        → Label above shape
verticalLabelPosition=bottom;verticalAlign=top;        → Label below shape

Is labelPosition set to something other than "center"?
├── YES → Set align to the OPPOSITE value
│         labelPosition=left → align=right
│         labelPosition=right → align=left
└── NO  → align controls text alignment within the shape (default: center)

Is verticalLabelPosition set to something other than "middle"?
├── YES → Set verticalAlign to the OPPOSITE value
│         verticalLabelPosition=top → verticalAlign=bottom
│         verticalLabelPosition=bottom → verticalAlign=top
└── NO  → verticalAlign controls text alignment within the shape (default: middle)

Shape	Required Perimeter
`shape=ellipse`	`perimeter=ellipsePerimeter`
`shape=rhombus`	`perimeter=rhombusPerimeter`
`shape=triangle`	`perimeter=trianglePerimeter`
`shape=hexagon`	`perimeter=hexagonPerimeter2`
`shape=parallelogram`	`perimeter=parallelogramPerimeter`
`shape=trapezoid`	`perimeter=trapezoidPerimeter`