Let us start by adding a rectangle from the General library menu.  Click the rectangle shape (the top left shape), drag it somewhere on your diagram, and then release.  The shape will appear in your diagram, highlighted.



As long as a diagram element is highlighted, the Format Panel on the right hand side will be replaced by a new panel.  This is the Shape Format panel.



There are three tabs on the Shape Format panel: Style, Text, and Arrange.


Style Options



The first part of the Style tab deals with shape color.  Clicking any of the color blocks will set selected shape(s) to the designated color.  We can select from a wider range of colors by clicking the color block button to the right of the Fill tick box. This will bring up a color chart screen.


 

You can select a color for the background using either the finely graded color chart, or the coarser one underneath it. If you use the finely graded color chart, note that once you have made a selection, you can tune the color very precisely using the slider bar on the right hand side of the main chart.

The text field will display the hexadecimal representation of the three primary color components (red, green, blue) for the currently selected color, and the field background will also change to the selected color. The default selection is white.

Once you are satisfied with your choice, press Apply to set the fill to that color. Below we have chosen a brown background. Note that the fill color block button will change color to reflect your choice.



If you want to have a shape with no color, simply untick the Fill tick box to remove color fill.

You don't have to fill using one solid color.  You can instead have the color vary gradually between two colors.  To do this, you need to have the Gradient tick box ticked.  This will cause another color block button to appear, and you can go through the same process as you did with the Fill color.  Once you have chosen both colors, you then decide in which direction you want the color gradient to go.  Below we have kept the fill color, and added a gradient color of pale yellow, with a South facing gradient.



There is a black line border around the shape by default.  To change the line color,click the color block button to the right of the Line tick box, and again follow the same color selection procedure.  Below we have chose a red line border.



There are further options for customizing the line: you can choose dotted or dashed lines, change the line thickness, or remove the line altogether.  It is also possible to set a perimeter space around the line, which will create white space between the shape and any attached connectors (this effect is purely visual - the connectors will function as usual).

The next style option allows you to vary the shape's opacity, which is the opposite of transparency.  A shape with 100% opacity is not transparent at all, whereas a shape with 0% opacity is completely transparent.  Here were show the same shape that we had before, on the same white background, but with an opacity of 30%.



The next style options apply various effects to the shape.  How many effects are available depends on the shape.  For the rectangle, all three are available.  They are as follows:

Rounded: This rounds the corner of the shape

Shadow: This applies a shadow to the shape

Glass: This adds a reflection effect to the surface of the shape

We can see all three of these effects below, in the order listed.  The middle effect, shadow, is quite faint and difficult to see outside of draw.io.



Using Styles


All of the options chosen for a shape - or left as default - together define how the shape will appear.  This is called the shape's style.  This information can be stored, altered, and even transferred to other shapes.

Although you will define a style by applying it to a particular shape, it is not possible to define a separate style just for an individual shape, or even for all instances of the same shape (i.e. all rectangles).  The style information is global, and when you apply a style to different shapes, it is the same style: the one that you last saved.

At the bottom of the Style tab are a number of buttons pertaining to the use of styles in your diagram.  We will use an example to demonstrate their use.  We will start with one of the shapes from the previous diagram: the rounded rectangle on the left.



Edit Style


Let us start by selecting the rectangle, and the pressing the Edit Style button, this brings up a window showing the XML information corresponding to the style of that shape.

Notice that we have set the perimeter spacing to 10 (default value is 1).  The effect of this will become apparent later.



It is fairly straightforward to relate different formatting statements to different properties of the shape.  For instance, shadow and glass effects are both switched off, while rounded is on.  The different colors have exactly the same hexadecimal representation that we saw when we chose them.

We can change the values given here, and press Apply, and the shape will adjust its style (and thus its appearance).  The Style tab controls will also change to reflect any edits that are made here.

For instance, let us change the fill color from brown to green.  A hexadecimal value of 00FF00 will give green, so we will change fillColor to this value (see highlighted section below).

 


When we press Apply, we can immediately see the change; the fill color is now green rather than brown.  All other aspects of the style remain unchanged.



We have already seen that all of the colors in a style are optional; they can be switched off if desired. So, if we wanted to remove the color gradient from the style, we do this by removing the section that sets gradientColor.

 

 

The rectangle is now filled with a solid block of green.



Copy Style and Paste Style


Now we shall look at one way to transfer the style setting between shapes.  Let us drag a cylinder from the General symbols menu onto our work space.



Because we have just added this shape, it only has the default style information.  If we want it to share the same style as the rectangle, then we follow this procedure:

  1. Click on the rectangle, and then press the Copy style button.
  2. Click on the cylinder, and then press the Paste style button.

The cylinder now has the same style information as the rectangle.



Actually, the style information is not exactly the same, because the effect options that are available for a cylinder shape are not the same as for a rectangle, as can be seen below.

 

 

Only the shadow option is available; neither glass nor rounded can be set for a cylinder.  The rounded setting that we set for the rectangle has not been transferred, although since a cylinder doesn't have any edges, we wouldn't notice the difference anyway.

 

Set as default style and clear default style


Let us delete the cylinder, and replace it with the brown rectangle we had earlier.



Now let us select the green rectangle and press the Set as default style button.  This causes any new added shapes to automatically have the same style settings as the green rectangle.

Let us now add a triangle from the General symbols menu.

 


As we would expect, the triangle matches the style of the green rectangle.  Let us now select the brown rectangle, and perform a copy on connect by clicking the blue + sign on the right of the shape.

 

 

This new rectangle is a exact copy of the first brown rectangle, and takes all style settings from its parent, not from the current set style settings.

Incidentally, the arrow does not appear to touch either shape, even though it is connected to both and will move as they move.  This is because we set the shape's perimeter spacing to 10 from the default value of 1.

 

Finally, we can deselect all shapes, which causes the Format panel to reappear on the right hand side of the screen.

 

 

Pressing the Clear default style button at the bottom will clear all of the global style settings.  Newly added shapes will no longer use the saved style settings (currently those of the green rectangle), and will instead use the default settings.


Text Options


 

The Text tab is used to configure text settings. The first section, Font, deals with the font, text alignment, and text size, as well as the usual options of bold, italic, and underline.

The next section deals with text colors. Each option is enabled by ticking the relevant box, at which point a color block button appears.  Pressing this button will give bring up a color chart screen.

 

 

You can select a color for the background using either the finely graded color chart, or the coarser one underneath it. If you use the finely graded color chart, note that once you have made a selection, you can tune the color very precisely using the slider bar on the right hand side of the main chart.


The text field will display the hexadecimal representation of the three primary color components (red, green, blue) for the currently selected color, and the field background will also change to the selected color.  The default selection is white.


Once you are satisfied with your choice, press Apply to set that color.  Note that the color block button will change color to reflect your choice.

 

 

The next options are for word wrap and text formatting.  Enabling word wrap means that when the text reaches the edge of the text box (shown by the dotted line below), it will drop own onto the next line.  Contrast this with the text above, where word wrap has been disabled.


 

Formatted text means that any formatting settings that you set are applied to the text.  If you disable this option, then you will see something like this:

 


The formatting data is displayed along with the text, rather than being converted into the text format.  You can even make changes to this formatting data; if you then re-enable Formatted text, the text format will reflect any changes that you made.

 

The next text option allows you to vary the text's opacity, which is the opposite of transparency.  Text with 100% opacity is not transparent at all, whereas text with 0% opacity is completely transparent.  Here we show the same text that we had before, on the same yellow background, but with an opacity of 30%.

 


Finally, we have spacing.  This allows us to display the text at various offsets relative to the text box.  Below, we see a 30 pt offset above and to the right of the text box default.

 


Arrange Options


 

The Arrange tab deals with the position and orientation of an object. We can use the functionality provided to move a shape, rotate it, resize it, or flip it.

At the top are the To front and To back buttons. By default, shapes that have been created more recently will overlap older shapes. Here we have an ellipse overlapping a rectangle, since the ellipse was created after the rectangle.



We can reverse this order by highlighting the ellipse so that we can access the Shape Format panel, select the Arrange tab, and then press the To back button (alternatively, right click on the ellipse and select To back from the menu options.

 


The same thing could have been achieved by highlighting the rectangle, selecting the Arrange tab, and then pressing the To front button, or right clicking on the rectangle and selecting To front.

 

Next are the Size options.  The Height and Width fields can be changed to resize a shape in either the vertical or horizontal directions.  You can also tick the Constrain proportions tick box if you want to preserve the ratio of height to width. This can also be done by clicking and dragging one of the corner dots when the shape is highlighted. If this box is ticked then you will not be able to alter this ratio when clicking and dragging, although changing values in the Height and Width boxes will bypass this.

To the left of the Height and Width boxes is an Autosize button.  Pressing this will resize a shape so that it is large enough to contain any text label that is inside it.

 

 

Here we have typed in some text in 30 pt font size.  It is currently too large for the rectangle, so we click the rectangle, go to the Arrange tab, and press the Autosize button.

 

 

Next we have Position, with two fields: one for the x coordinate of the left hand side of the shape, and one for the y coordinate of the op of the shape.  Changing the values in these fields will change the position of the shape.

Next we have Angle.  These functions deal with the rotation of a shape.  We can either click Turn to turn a shape by 90 degrees each time, or we can type a value into the Angle field, and the shape will rotate clockwise by that amount. 

Next is Flip. This flips a shape about a central axis, either Horizontal or Vertical.  If the shape is symmetrical about that center of axis, then there will be no obvious change when the flip is performed, unless that shape has a color fill with a gradient, or some other way of distinguishing between different orientations.  A good shape to use to demonstrate this is the triangle shape, which looks the same after a vertical flip, but not a horizontal flip.

 

 

Finally, we have the Edit Link button.  This works exactly as if we were to select Arrange -> Insert link from the menu bar.