Styles
If you'd like to customize the style of a shape, the following reserved keywords can be
set under the style field.
Below is a catalog of all valid styles, applied individually to this baseline diagram.
The following SVGs are rendered with direction: right, but omitted from the shown scripts for
brevity.
Want to change the default styles for shapes and/or connections? See globs to change defaults.
Style keywords
- opacity
- stroke
- fill (shape only)
- fill-pattern (shape only)
- stroke-width
- stroke-dash
- border-radius
- shadow (shape only)
- 3D (rectangle/square only)
- multiple (shape only)
- double-border (rectangles and ovals)
- font
- font-size
- font-color
- animated
- bold, italic, underline
- text-transform
- root
Opacity
Float between 0 and 1.
Stroke
CSS color name, hex code, or a subset of CSS gradient strings.
For sql_tables and classes, stroke is applied as fill to the body (since fill is
already used to control header's fill).
Fill
CSS color name, hex code, or a subset of CSS gradient strings.
For sql_tables and classes, fill is applied to the header.
Want transparent?
Fill Pattern
Available patterns:
dotslinesgrainnone(for cancelling out ones set by certain themes)
Stroke Width
Integer between 1 and 15.
Stroke Dash
Integer between 0 and 10.
Border Radius
Integer between 0 and 20.
border-radius works on connections too, which controls how rounded the corners are. This
only applies to layout engines that use corners (e.g. ELK), and of course, only has effect
on connections whose routes have corners.
Specifying a very high value creates a "pill" effect.
Shadow
true or false.
3D
true or false.
Multiple
true or false.
Double Border
true or false.
Font
Currently the only option is to specify mono. More coming soon.
Font Size
Integer between 8 and 100.
Font Color
CSS color name, hex code, or a subset of CSS gradient strings.
For sql_tables and classes, font-color is applied to the header text only (theme
controls other colors in the body).
Animated
true or false.
Bold, italic, underline
true or false.
Text transform
text-transform changes the casing of labels.
uppercaselowercasetitlenone(used for negating caps lock that special themes may apply)
Root
Some styles are applicable at the root level. For example, to set a diagram background
color, use style.fill.
Currently the set of supported keywords are:
fill: diagram background colorfill-pattern: background fill patternstroke: frame around the diagramstroke-widthstroke-dashdouble-border: two frames, which is a popular framing method
All diagrams in this documentation are rendered with pad=0. If you're using stroke to
create a frame for your diagram, you'll likely want to add some padding.