Draw.io Core Geometry

Purpose

This skill defines how to position shapes, route edges, and place labels in Draw.io mxGraph XML. Every visual element requires an <mxGeometry> child element. Getting geometry wrong causes shapes to overlap, edges to misroute, and labels to disappear.

Coordinate System

Draw.io uses a screen coordinate system:

• Origin: Top-left corner of the canvas is (0, 0)
• X-axis: Positive values go right
• Y-axis: Positive values go down
• Units: All values are in pixels