Styling Reference
Complete reference for diagram styling including colours, borders, fonts, opacity, and theming options.
The diagram editor provides complete styling options for shapes, connections, and text. Consistent styling improves diagram readability and visual communication.
Shape Styling
| Property | Type | Description |
|---|---|---|
| fillColor | hex | Background colour |
| borderColor | hex | Border colour |
| borderWidth | number | Border thickness in pixels |
| borderStyle | enum | Solid, dashed, or dotted |
| borderRadius | number | Corner rounding for rectangles |
| opacity | number | Transparency (0 to 1) |
| shadow | boolean | Drop shadow effect |
Text Styling
| Property | Type | Description |
|---|---|---|
| textColor | hex | Text colour |
| fontSize | number | Text size in pixels |
| fontWeight | enum | Normal or bold |
| fontFamily | string | Font family |
| textAlign | enum | Left, centre, or right |
| verticalAlign | enum | Top, middle, or bottom |
Connection Styling
| Property | Type | Description |
|---|---|---|
| strokeColor | hex | Line colour |
| strokeWidth | number | Line thickness in pixels |
| lineStyle | enum | Solid, dashed, or dotted |
| cornerStyle | enum | Sharp or rounded corners |
| cornerRadius | number | Corner radius for rounded style |
Colour by Domain
Use consistent colours to indicate domains or categories.
| Domain | Colour Suggestion |
|---|---|
| Data and storage | Blue tones |
| Services and APIs | Green tones |
| User interfaces | Orange tones |
| Security and identity | Purple tones |
| Infrastructure | Grey tones |