# Drawio Syntax Styles

> Use when looking up specific Draw.io style properties, shape names, arrow types, or edge routing algorithms. Prevents using non-existent property names or invalid values. Complete reference catalog of 120+ style properties, 22 built-in shapes, 21 arrow types, 7 edge routing algorithms, and stencil library format. Keywords: style property, shape catalog, arrow type, edgeStyle, stencil, mxgraph shape, sketch mode, all shapes, all arrows, style reference, look up property, available shapes.

- Skill: `impertio-studio/drawio-syntax-styles` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add impertio-studio/drawio-syntax-styles`
- Raw SKILL.md: https://api.skillmd.com/api/skills/impertio-studio/drawio-syntax-styles/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: Impertio-Studio (https://skillmd.com/u/impertio-studio)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/impertio-studio/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](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)

| Shape | Style String | Perimeter |
|-------|-------------|-----------|
| Rectangle | `whiteSpace=wrap;html=1;` | `rectanglePerimeter` (default) |
| Rounded rect | `rounded=1;whiteSpace=wrap;html=1;` | `rectanglePerimeter` |
| Ellipse | `ellipse;whiteSpace=wrap;html=1;perimeter=ellipsePerimeter;` | `ellipsePerimeter` |
| Diamond | `rhombus;whiteSpace=wrap;html=1;perimeter=rhombusPerimeter;` | `rhombusPerimeter` |
| Triangle | `triangle;whiteSpace=wrap;html=1;perimeter=trianglePerimeter;` | `trianglePerimeter` |
| Hexagon | `shape=hexagon;whiteSpace=wrap;html=1;perimeter=hexagonPerimeter;` | `hexagonPerimeter` |
| Cylinder | `shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;size=15;` | `rectanglePerimeter` |
| Cloud | `ellipse;shape=cloud;whiteSpace=wrap;html=1;` | `ellipsePerimeter` |
| Actor | `shape=actor;whiteSpace=wrap;html=1;` | `rectanglePerimeter` |
| Swimlane | `swimlane;horizontal=1;startSize=30;container=1;collapsible=0;html=1;` | `rectanglePerimeter` |

### Extended Shapes (19 shapes)

| Shape | style value | Shape | style value |
|-------|------------|-------|------------|
| Parallelogram | `parallelogram` | Trapezoid | `trapezoid` |
| Step/chevron | `step` | Process | `process` |
| Document | `document` | Callout | `callout` |
| Cube | `cube` | Folder | `folder` |
| Card | `card` | Note | `note` |
| Tape | `tape` | Internal storage | `internalStorage` |
| OR gate | `or` | XOR gate | `xor` |
| Data storage | `dataStorage` | Manual input | `manualInput` |
| Delay | `delay` | Display | `display` |
| Off-page connector | `offPageConnector` | | |

### 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

| Arrow Value | Description | Arrow Value | Description |
|-------------|-------------|-------------|-------------|
| `none` | No marker | `classic` | Standard arrowhead |
| `classicThin` | Slender classic | `block` | Filled triangle |
| `blockThin` | Narrow block | `open` | Unfilled chevron |
| `openThin` | Thin chevron | `oval` | Circle marker |
| `diamond` | Diamond marker | `diamondThin` | Narrow diamond |
| `box` | Square marker | `halfCircle` | Semicircle |
| `circle` | Full circle | `circlePlus` | Circle with plus |
| `cross` | X-shaped | `baseDash` | Dash at base |
| `doubleBlock` | Double triangle | `dash` | Short dash |
| `async` | Async arrow | `openAsync` | Open async |
| `manyOptional` | Crow's foot | | |

### Fill Behavior

| Combination | Visual Result | Use Case |
|-------------|--------------|----------|
| `endArrow=block;endFill=0;` | Hollow triangle | UML inheritance |
| `startArrow=diamond;startFill=1;` | Filled diamond | UML composition |
| `startArrow=diamond;startFill=0;` | Hollow diamond | UML aggregation |
| `endArrow=open;dashed=1;` | Open arrow, dashed | UML dependency |
| `endArrow=block;endFill=0;dashed=1;` | Hollow triangle, dashed | UML implementation |

---

## 5. Edge Routing Quick Reference

| edgeStyle Value | Description | Best For |
|-----------------|-------------|----------|
| (none/omitted) | Straight line | Simple connections |
| `orthogonalEdgeStyle` | Right-angle bends | Flowcharts, most diagrams |
| `elbowEdgeStyle` | Single L/Z-shaped elbow | Simple layouts |
| `entityRelationEdgeStyle` | Fixed-length stubs | ER diagrams |
| `segmentEdgeStyle` | Manual waypoints | Custom routing |
| `sideToSideEdgeStyle` | Horizontal side-to-side | Left-right layouts |
| `topToBottomEdgeStyle` | Vertical top-to-bottom | Top-down layouts |
| `isometricEdgeStyle` | 30-degree angles | Isometric diagrams |

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:

| Property | Values | Effect |
|----------|--------|--------|
| `sketch` | `0`, `1` | Enable sketch rendering |
| `comic` | `0`, `1` | Comic book variant |
| `jiggle` | number | Line wobble amount |
| `fillStyle` | `solid`, `hachure`, `cross-hatch`, `dots` | Fill pattern |
| `fillWeight` | number | Hatch line weight |
| `hachureGap` | number | Gap between hatch lines |
| `hachureAngle` | number | Hatch line angle (degrees) |
| `curveFitting` | 0–1 | Curve approximation quality |

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

| Topic | Skill |
|-------|-------|
| Style string syntax and format rules | `drawio-core-styles` |
| XML structure and mxCell attributes | `drawio-core-xml-format` |
| Geometry and positioning | `drawio-core-geometry` |
| Flowchart implementation | `drawio-impl-flowchart` |
| Error diagnosis | `drawio-errors-diagnosis` |

---

## 9. Full Reference

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

Examples of complete style strings for common scenarios are in
[references/examples.md](references/examples.md).

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