Drawio Syntax Styles

Draw.io Syntax: Style Properties Reference

Complete catalog of every Draw.io style property, shape name, arrow type, edge routing algorithm, and stencil format. Use this skill to look up exact property names, valid values, and correct syntax.

1. When to Use This Skill

Use this skill when you need to:

• Look up the exact name of a style property (e.g., strokeColor NOT stroke-color)
• Find the correct shape identifier for a built-in or stencil shape
• Choose the right arrow type for an edge
• Select an edge routing algorithm
• Apply sketch/hand-drawn mode properties
• Configure image shape properties

Do NOT use this skill for:

• Style string syntax rules → use drawio-core-styles
• Creating complete diagrams → use implementation skills (e.g., drawio-impl-flowchart)
• Debugging rendering issues → use drawio-errors-diagnosis

2. Style Property Quick Reference

All 120+ properties are organized in references/methods.md. Below is the decision tree for finding the right property category.

Decision Tree: Which Property Category?

What do you need to style?
├── Shape appearance?
│   ├── Interior color → Fill Properties (fillColor, gradientColor, opacity)
│   ├── Border/outline → Stroke Properties (strokeColor, strokeWidth, dashed)
│   ├── Corner rounding → Shape Geometry (rounded, arcSize, absoluteArcSize)
│   ├── Shadow/glass → Decorative Effects (shadow, glass)
│   └── Hand-drawn look → Sketch Properties (sketch, jiggle, fillStyle)
│
├── Text/label?
│   ├── Font styling → Font Properties (fontSize, fontFamily, fontStyle, fontColor)
│   ├── Text position → Alignment (align, verticalAlign)
│   ├── Label outside shape → Label Position (labelPosition, verticalLabelPosition)
│   ├── Text wrapping → Overflow (whiteSpace, overflow, labelWidth)
│   └── Label padding → Spacing (spacing, spacingTop/Bottom/Left/Right)
│
├── Edge/connector?
│   ├── Routing path → Edge Style (edgeStyle, curved, rounded)
│   ├── Arrow markers → Arrow Properties (startArrow, endArrow, startFill, endFill)
│   ├── Connection points → Entry/Exit (exitX/Y, entryX/Y)
│   ├── Segment length → Jetty (jettySize, sourceJettySize, targetJettySize)
│   └── Line crossings → Jump Style (jumpStyle, jumpSize)
│
├── Container/group?
│   ├── Enable containment → Container (container, collapsible, foldable)
│   ├── Header bar → Swimlane (startSize, horizontal, swimlaneFillColor)
│   └── Auto-layout children → Child Layout (childLayout, resizeParent)
│
├── Which shape to use?
│   ├── Basic geometric → Built-in Shapes (rectangle, ellipse, rhombus, etc.)
│   ├── Flowchart/business → Extended Shapes (document, process, parallelogram, etc.)
│   └── Domain-specific → Stencil Libraries (shape=mxgraph.<library>.<shape>)
│
└── User interaction?
    └── Lock/restrict → Behavior (movable, resizable, editable, deletable)

3. Shape Selection Quick Reference

Built-in Primitives (16 shapes)

Extended Shapes (19 shapes)

Stencil Libraries

Stencil shapes ALWAYS use the prefix shape=mxgraph.:

shape=mxgraph.flowchart.decision;
shape=mxgraph.aws4.lambda_function;
shape=mxgraph.bpmn.shape;
shape=mxgraph.cisco.router;
shape=mxgraph.uml.component;

NEVER omit the mxgraph. prefix for stencil shapes.

4. Arrow Type Quick Reference

All 21 Arrow Types

Fill Behavior

5. Edge Routing Quick Reference

Standard orthogonal edge template:

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

6. Sketch Mode Quick Reference

Enable hand-drawn appearance with these properties:

Example:

rounded=1;whiteSpace=wrap;html=1;sketch=1;jiggle=2;fillStyle=hachure;hachureGap=4;fillColor=#DAE8FC;strokeColor=#6C8EBF;

7. Critical Rules

1. Property names are camelCase — ALWAYS use strokeColor, NEVER stroke-color or StrokeColor.
2. Booleans are 0/1 — ALWAYS use rounded=1, NEVER rounded=true.
3. Colors are hex — ALWAYS use #RRGGBB, or keywords none/default.
4. html=1 is mandatory — ALWAYS include on every vertex and edge.
5. whiteSpace=wrap is mandatory — ALWAYS include on vertices with text labels.
6. Perimeter MUST match shape — Ellipse needs ellipsePerimeter, rhombus needs rhombusPerimeter.
7. Stencils ALWAYS start with shape=mxgraph. — NEVER use a bare stencil name.
8. labelPosition requires opposite align — labelPosition=right requires align=left.
9. shadow requires global shadow — Cell-level shadow=1 only works when <mxGraphModel shadow="1">.
10. container=1 is required for groups — Children need parent attribute referencing the container.

8. Cross-References

9. Full Reference

The complete 120+ property catalog with all values, defaults, and descriptions is in references/methods.md.

Examples of complete style strings for common scenarios are in references/examples.md.

Common mistakes and how to fix them are in references/anti-patterns.md.