drawio-core-geometry

Standardize vertex and edge mxGeometry usage in Draw.io diagrams.

4|Updated Mar 19, 2026
One-click install
npx skills add https://github.com/OpenAEC-Foundation/Draw.io-Claude-Skill-Package --skill drawio-core-geometry
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: drawio-core-geometry
Source: https://github.com/OpenAEC-Foundation/Draw.io-Claude-Skill-Package/tree/main/skills/source/drawio-core/drawio-core-geometry
Command: npx skills add https://github.com/OpenAEC-Foundation/Draw.io-Claude-Skill-Package --skill drawio-core-geometry

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Draw.io diagrams often suffer from mispositioned shapes, edges, and labels due to improper geometry handling. This Skill clarifies mxGeometry rules, container-relative coordinates, and edge label placement to ensure reliable layouts.

Core Features & Use Cases

  • Learn vertex and edge geometry requirements, including absolute vs relative coordinates, correct "as=geometry" binding, and proper edge label positioning.
  • Manage containers and waypoints to build complex diagrams with groups and swimlanes while preserving layout integrity.
  • Real-world use cases include ensuring edges attach to the correct shape outlines using perimeters and exit/entry points for accurate diagram layouts.

Quick Start

Place a vertex at (100, 100) with width 120 and height 60 and bind its geometry.

Frequently Asked Questions about drawio-core-geometry

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix mispositioned shapes and edges in draw.io mxGraph XML?

Fix mispositioned draw.io shapes by standardizing vertex and edge mxGeometry usage, enforcing relative versus absolute coordinates, and applying proper 'as=geometry' bindings for reliable diagram layouts.

What is the correct way to set edge waypoints and connection points in mxGraph?

Correct edge waypoints in mxGraph require setting 'relative=1' for edges, mapping perimeter points for non-rectangular shapes, and defining proper exit and entry points for accurate diagram connections.

How do I use container-relative coordinates for swimlanes in draw.io?

Use container-relative coordinates in draw.io by binding child vertex mxGeometry to parent containers, ensuring groups and swimlanes preserve their structural layout integrity during diagram rendering.

Why do my draw.io edge labels appear in the wrong position?

Edge labels appear misplaced in draw.io when mxGeometry rules are ignored; standardizing edge label positioning and applying proper geometry binding ensures labels track their corresponding edges correctly.

How do I attach edges to the correct perimeter on non-rectangular draw.io shapes?

Attach edges to non-rectangular shapes in draw.io by applying perimeter mappings and defining specific entry and exit points, overriding default rectangular bounding box connection behavior in mxGraph XML.

Can I build complex grouped diagrams while preserving layout integrity in draw.io?

Build complex grouped diagrams in draw.io by managing containers and waypoints with standardized mxGeometry, ensuring that nested groups maintain their relative positioning and connection accuracy.