Customise how a shape or groups of on the drawing canvas look using the Style and Text tabs of the format panel on the right. The diagrams.cyberspace editor will automatically switch to the shape manner panels when yous select one or more shapes.

The default shape mode uses a black outline and a solid white fill up color.

You can customise the shape styles in many ways. Earlier you can style anything, you must select it. Click on a shape to select it, or hold Shift down and click on multiple shapes to select many.

The manner options that you run across will depend on the shape or shapes yous have selected. For example, there are no corners on a circle or ellipse shape, so the Rounded option will not be available.

Utilise the manner palette to change colours

The style palette at the top of the Fashion tab changes both the make full and outline colour.

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

Alter the fill colour or add a gradient

  1. Click on the colour button adjacent to Fill up 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 Use.

Additional fill options and furnishings

Gradient: Click the Gradient checkbox, select the direction in which yous want the make full colour to change from the drop-downwardly, and click on the color push to select a new gradient colour from the colour palette.

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

Glass effect: Select the Glass checkbox to add a gradient to the fill and outline so that it looks similar a reflective surface. You can have both a slope and the glass effect enabled at the same time.

Lane colour: To add a fill colour to background of swimlanes, select the lane, then enable the Lanecolour checkbox. You tin can apply both a gradient and the glass consequence to the swimlane background too.

Modify the shape outline

  1. Click on the Line color button, and select a new color from the palette.
  2. Select a new line style for the outline of a shape from the drop downwards list. Cull betwixt solid, dashed, and three patterns of dotted.
  3. Enter a new value in the textbox next to the outline pattern to make the line thicker. The default is 1pt.

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

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

Alter the opacity of the shape

Y'all can make the shape more than transparent, and then that whatsoever shapes under it show through.

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

Apply furnishings to shapes

Round precipitous corners: Click on the Rounded checkbox to round all the corners of any precipitous-cornered bones shape.

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

Apply the crude sketch style: To make the shapes appear equally if they are hand drawn, click the Sketch checkbox. Boosted manner options for the rough style are available in the style Backdrop.
Run across how to use the rough sketch style and change the sketch mode properties

Re-create and paste styles

  1. Select the shape that has the style you lot desire to copy.
  2. In the Mode tab of the format console, click Re-create Style.
  3. Select the other shapes or connectors that you want to apply this style to. In the Mode tab, click on Paste Style.

Set a default style

The global default style is used for all shapes. When yous set a new default style, any new shape you place on the cartoon canvas will employ the new default style.

  1. Select the shape that has the style y'all want to utilise as the new default.
  2. Click Set equally Default Mode in the Style tab of the format panel.
  3. Hover over shapes in the shape libraries on the left to run into a preview of them using the new default style.

Articulate the default style: Brand certain cipher is selected so you can see the Diagramtab in the format panel, then click Clear Default Style.

Learn more about the global diagram options

Edit the shape fashion and behaviour

Other than using the bones options in the Style tab, you tin can edit a shape'due south style properties in 2 ways.

Edit shape properties in the Style tab

  1. With a shape selected, aggrandize the Holding department at the lesser of the Styletab in the format panel.
  2. Change the Value of the shape properties to modify additional manner options and how the shape behaves.

Annotation: Only those properties that can be applied to the selected shape will be available in this property list.

Edit the XML that defines the shape properties

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

For case, 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 have a shape fashion that looks like:

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

Edit the shape style

  1. Right-click on a shape, and select Edit Way from the context menu. Alternatively, with a shape selected, printing Ctrl+E on Windows or Cmd+E on macOS.
  2. Edit the XML description with holding=value pairs to describe the shape fashion you desire that shape to use, and so click Apply.

Related features

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