Drawio Core Styles

Draw.io Core Styles

Master reference for the Draw.io / mxGraph style system. Covers style string syntax, property categories, color system, fontStyle bitfield, perimeter matching, and style inheritance.

1. Style String Syntax

Every mxCell carries its appearance in a single style attribute: a semicolon-delimited string of key=value pairs.

Format Rules

Leading Shape Identifier

When a style string starts with a bare word (no =), it sets the shape. These two are equivalent:

ellipse;whiteSpace=wrap;html=1;
shape=ellipse;whiteSpace=wrap;html=1;

Common leading identifiers: ellipse, rhombus, triangle, hexagon, swimlane, image, line, text.

Mandatory Properties

Every AI-generated cell MUST include:

2. Property Categories Overview

The style system has 120+ properties across these categories. Full details are in references/methods.md.

Vertex-Only vs Edge-Only Properties

NEVER apply vertex properties to edges or vice versa — they are silently ignored.

• Vertex-only: fillColor, shape (except connector), container, collapsible, swimlane
• Edge-only: edgeStyle, startArrow, endArrow, curved, jettySize, exitX/Y, entryX/Y

3. Color System

Valid Color Formats

NEVER use:

• RGB function syntax (rgb(0,0,0))
• Short hex (#FFF)
• Named CSS colors (red, blue) — use #FF0000, #0000FF

Color Properties

4. fontStyle Bitfield

The fontStyle property uses a bitmask to combine text decorations in a single integer.

Flags

Combining Flags

Add flag values together. NEVER use bitwise operators in the style string — use the pre-computed sum.

Decision Tree: fontStyle Value

Need bold?
  YES → start with 1
  NO  → start with 0
Need italic?
  YES → add 2
Need underline?
  YES → add 4
Need strikethrough?
  YES → add 8
Sum = fontStyle value

5. Perimeter System

The perimeter determines WHERE edges connect to a shape's boundary. A mismatched perimeter causes edges to float away from the shape outline.

Perimeter-Shape Matching (MANDATORY)

Decision Tree: Which Perimeter?

Is the shape visually round/oval?
  YES → perimeter=ellipsePerimeter
  NO  →
    Is it a diamond/rhombus?
      YES → perimeter=rhombusPerimeter
      NO  →
        Is it a triangle?
          YES → perimeter=trianglePerimeter
          NO  →
            Is it a hexagon?
              YES → perimeter=hexagonPerimeter
              NO  → perimeter=rectanglePerimeter (or omit — it is the default)

What Happens With Wrong Perimeters

• Ellipse + rectanglePerimeter: Edges connect at bounding box corners instead of the curved boundary. Visible gaps appear.
• Rectangle + ellipsePerimeter: Edges float outside or inside the rectangle.
• Rhombus + rectanglePerimeter: Edges connect to the bounding box, not the diamond edges. Gaps appear at the sides.

6. Style Inheritance and Defaults

Resolution Order (later overrides earlier)

1. Built-in defaults (hardcoded in mxGraph)
2. Theme defaults (from the stylesheet registered in the graph)
3. Named style (if the style string references a registered name)
4. Inline properties (explicit key=value pairs in the style string)

Vertex Defaults

shape=rectangle;perimeter=rectanglePerimeter;whiteSpace=wrap;html=1;
overflow=hidden;fillColor=#ffffff;strokeColor=#000000;fontColor=#000000;
fontSize=12;fontFamily=Helvetica;align=center;verticalAlign=middle;

Edge Defaults

shape=connector;endArrow=classic;html=1;strokeColor=#000000;fontColor=#000000;
fontSize=12;fontFamily=Helvetica;align=center;verticalAlign=middle;rounded=1;

You only need to specify properties that DIFFER from the defaults. A basic rectangle needs only whiteSpace=wrap;html=1; because shape and perimeter are already defaults.

7. Quick-Reference Templates

Shapes

// Rectangle
rounded=0;whiteSpace=wrap;html=1;

// Rounded Rectangle
rounded=1;whiteSpace=wrap;html=1;arcSize=10;

// Ellipse
ellipse;whiteSpace=wrap;html=1;perimeter=ellipsePerimeter;

// Diamond
rhombus;whiteSpace=wrap;html=1;perimeter=rhombusPerimeter;

// Triangle
triangle;whiteSpace=wrap;html=1;perimeter=trianglePerimeter;

// Hexagon
shape=hexagon;whiteSpace=wrap;html=1;perimeter=hexagonPerimeter;

// Cylinder (Database)
shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;size=15;

// Swimlane
swimlane;horizontal=1;startSize=30;fillColor=#f5f5f5;strokeColor=#666666;fontStyle=1;container=1;collapsible=0;html=1;whiteSpace=wrap;

Edges

// Standard arrow
endArrow=classic;html=1;

// Orthogonal connector
edgeStyle=orthogonalEdgeStyle;rounded=1;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;

// Dashed dependency
endArrow=open;dashed=1;html=1;

// Bidirectional
startArrow=classic;endArrow=classic;html=1;

// No arrows
endArrow=none;startArrow=none;html=1;

// UML inheritance (hollow triangle)
endArrow=block;endFill=0;html=1;edgeStyle=orthogonalEdgeStyle;

// UML composition (filled diamond)
startArrow=diamond;startFill=1;endArrow=open;html=1;

8. Critical Rules Summary

References

• references/methods.md — Complete property reference by category
• references/examples.md — Working XML examples for every style scenario
• references/anti-patterns.md — Common mistakes with explanations and fixes