draw.io is a diagramming tool that is capable of creating very complex diagrams using highly customizable shapes. Of course, you can use the format panel on the right to change the colors, text, alignment and other settings for your shapes and connectors. And it’s even easier to customize your diagram element by changing the shape properties at the bottom of the format panel.
But sometimes, you want complete control over the finest of details.
You can edit the code that represents the shape or connector directly:
Select a shape or connector.
Select Edit > Edit Style from the menu.
The dialog that opens will show you the style of the shape and connector in key:value pairs.
Open the diagrams by following the links below to see the full range of key:value pairs. When you have opened these diagrams in draw.io, and select Edit > Style from the menu to see their settings.
Color (fills, gradients, opacity, strokes and labels)
Text (opacity, alignment, positioning, spacing, font family, size and style, color and wrapping)
Perimeter (perimeter connections, port constraints, spacing)
You can customize the colors of everything in draw.io:
fill gradients and their directions
opacity of outlines and fill colors
shape label backgrounds and outlines
For example, a rectangle shape with a red outline (stroke), a gradient going from blue to white from left to right, and a label with a yellow background and a black outline would have the following key:value pairs:
These modify how connectors interact with your shapes.
perimeter lets you use a different perimeter style than the outline of the shape. This means your connectors can end or begin inside the shape’s outline, according to a variety of different perimeters (rectangle, ellipse, rhombus, triangle, hexagon).
port constraints specifies which edge connectors must connect to.
perimeter spacing changes how far away the connector is from the perimeter. You can set this for both source and target shapes.
Indicators are shapes within other shapes – sub-shapes! They may be used to show the status of an element in your diagram or to group it into a category of things (such as roles in a team-based organization chart).
You aren’t limited to just shapes and connectors in draw.io. You can also use an image files with various formats in your diagram: .png, .svg, .jpg, .gif. The key:value pairs for image styles change how your image appears:
vertical and horizontal alignment (within a shape)
By editing these key:value pairs (Edit > Edit Style, Cmd or Ctrl+E), you gain complete control over how your shapes and connectors appear in your diagrams. While you probably won’t be using this feature all the time, you now know it’s there when you want to finely tune your diagram.
You can also use the shape properties in the right-hand panel to access many of these style key:value pairs faster. Plus, the shape properties panel gives you more control over the complex, compound shapes, most often used in mockups!