Customise how a shape or groups of on the drawing sail look using the Fashion and Text tabs of the format panel on the correct. The diagrams.net editor will automatically switch to the shape manner panels when you select i or more shapes.

The default shape manner uses a black outline and a solid white fill colour.

You can customise the shape styles in many means. Before y'all tin style anything, you must select it. Click on a shape to select information technology, or hold Shift down and click on multiple shapes to select many.

The style options that you come across volition depend on the shape or shapes you have selected. For example, there are no corners on a circumvolve or ellipse shape, so the Rounded option will non be available.

Use the style palette to alter colours

The mode palette at the top of the Style tab changes both the fill and outline colour.

Click the left or right arrows or click on the folio dots underneath the palette to view more styles.

Modify the fill up colour or add a gradient

  1. Click on the colour push button side by side to Fill to see the color palette.
  2. Cull a new colour from the palette, or enter a colour'southward precise hex code in the text box (without the leading #), then click Apply.

Boosted fill options and furnishings

Slope: Click the Gradient checkbox, select the direction in which you desire the fill colour to modify from the drop-down, and click on the colour button to select a new gradient colour from the colour palette.

Transparent: Deselect the Fill up checkbox to remove the fill colour and make the background of the shape transparent.

Drinking glass effect: Select the Glass checkbox to add a gradient to the fill and outline so that it looks like a reflective surface. You lot tin have both a gradient and the glass consequence enabled at the same time.

Lane colour: To add a fill color to background of swimlanes, select the lane, then enable the Lanecolour checkbox. You can utilise both a slope and the drinking glass effect to the swimlane groundwork as well.

Change the shape outline

  1. Click on the Line colour push button, and select a new colour from the palette.
  2. Select a new line style for the outline of a shape from the drop down list. Choose between solid, dashed, and 3 patterns of dotted.
  3. Enter a new value in the textbox next to the outline pattern to brand the line thicker. The default is 1pt.

No outline: Click on the Line checkbox and disable the outline.

Add together space around the shape: Enter a new value in the Perimeter checkbox to add space betwixt the outline of the shape, and it's actual size. This volition move the connection points and the outer border that connectors connect to outwards, away from the outline of the shape.

Modify the opacity of the shape

You tin make the shape more than transparent, and then that any shapes under it show through.

Enter a new value in the Opacity text field, or use the up/down arrows to modify its value.

Apply effects to shapes

Circular sharp corners: Click on the Rounded checkbox to round all the corners of whatever sharp-cornered basic shape.

Add a shadow: Click on the Shadow checkbox to add a drop shadow to all shapes. Shadows can too be applied to connectors.

Apply the crude sketch style: To make the shapes appear as if they are manus drawn, click the Sketch checkbox. Additional manner options for the rough style are bachelor in the style Properties.
Meet how to employ the crude sketch fashion and modify the sketch fashion backdrop

Re-create and paste styles

  1. Select the shape that has the manner you want to re-create.
  2. In the Style tab of the format panel, click Copy Style.
  3. Select the other shapes or connectors that yous want to use this style to. In the Style tab, click on Paste Style.

Set a default style

The global default style is used for all shapes. When you set a new default fashion, whatever new shape you place on the drawing canvas volition use the new default style.

  1. Select the shape that has the fashion you desire to utilize equally the new default.
  2. Click Fix as Default Style in the Style tab of the format panel.
  3. Hover over shapes in the shape libraries on the left to encounter a preview of them using the new default style.

Clear the default style: Make certain nothing is selected and then you can meet the Diagramtab in the format panel, then click Articulate Default Style.

Learn more almost the global diagram options

Edit the shape manner and behaviour

Other than using the bones options in the Way tab, yous can edit a shape'south style properties in two ways.

Edit shape properties in the Mode tab

  1. With a shape selected, expand the Property section at the lesser of the Styletab in the format panel.
  2. Change the Value of the shape properties to change additional style options and how the shape behaves.

Annotation: Simply those backdrop that can exist applied to the selected shape will be available in this holding listing.

Edit the XML that defines the shape properties

If you know the shape properties names and values that yous want to prepare, it may be faster to simply edit the shape's XML description in text.

For example, a rectangle with the crude sketch style, which uses a custom arc-size for its rounded corners, a custom perimeter size, and an outline that is not opaque, would take a shape style that looks similar:

          rounded=i;whiteSpace=wrap;html=one;sketch=1;fillColor=#dae8fc;    strokeColor=#6c8ebf;perimeterSpacing=v;arcSize=24;    strokeOpacity=59;

Edit the shape style

  1. Right-click on a shape, and select Edit Style from the context carte. Alternatively, with a shape selected, printing Ctrl+E on Windows or Cmd+E on macOS.
  2. Edit the XML description with property=value pairs to describe the shape style you want that shape to utilise, and so click Apply.

Related features

  • Use shortcuts to style shapes faster
  • See how to change the style of text labels and text shapes
  • Change the style of connectors
  • Create your own custom shapes
  • Ready custom default styles in draw.io for Confluence Cloud