Draw.io Syntax: Cells

Purpose

This skill teaches how to create and configure every type of mxCell in Draw.io XML: vertex cells (shapes, images, containers), edge cells (connectors), UserObject/object wrappers for metadata, HTML labels, placeholder variables, groups, and container nesting.

Critical Rules (Memorize These)

1. ALWAYS set vertex="1" on shapes. Without it, the cell is invisible.
2. ALWAYS set edge="1" on connectors. Without it, the cell renders as a shape, not a line.
3. NEVER set both vertex="1" and edge="1" on the same cell.
4. NEVER omit the parent attribute on any cell except id="0".
5. ALWAYS use <object> wrapper when attaching custom metadata properties.
6. ALWAYS XML-escape HTML in value attributes: < to <, > to >, & to &, " to ".
7. ALWAYS include html=1 in style when labels contain HTML markup.
8. ALWAYS include whiteSpace=wrap in style on vertex cells with text labels.

Decision Tree: What Type of Cell?