Grid


By default, a grid of dots is displayed on the work area, in order to help with alignment. Toggling this tick box switches the grid on and off.

To the right of the Grid tick box is the snap to grid size selection. This defaults to 10 pt. This determines the intervals at which a released shape or connector will snap to match up with the grid lines. Increasing this number to, for instance, 100 pt will mean that shapes and connectors will only be placed at that larger interval.


Guides


By default, when moving symbols around the work area, guide lines are automatically displayed whenever a central axis or shape boundary aligns with that of another nearby shape. This is to make it easier to align shapes relative to one another.  In the example below, one rectangle is being dragged by the user; its edge is currently aligned with the central axis of the other rectangle.

Toggling this tick box switches guidelines on and off.



Connection points


By default, hovering your mouse over a symbol will show the connection points for that symbol (see figure below), making it easier to attach a connector to the symbol.  Toggling this tick box switches this feature on and off.

 


Page view


By default, the work area appears in page view; it is sized according to the choice of paper size.  Unticking this box will cause the work area to fill the entire window.

 

Background


It is possible to add a background to a diagram - either a picture image, a solid color background, or both together. The first step is to enable this option by ticking the tick box, since it is off by default. If you want a picture background, click on the Image button.  If you want a solid color background, click on the white color block button.


After pressing the Image button, a new screen appears:

 

 

Dragging an image or typing a valid image URL into the Image URL field and pressing Apply will cause cause that image to be used as the diagram background.  If you wish, you can set values for width and height, although it is often easier to make adjustments after seeing the image on your diagram.


If you don't have an image URL, you can search for a suitable image.  Pressing Search will take you to a Google search screen.

 

 

Typing terms into the search field and pressing the search button will cause relevant images to appear.  You can filter these images by type or color content, using the options beneath the search field.  Let's zoom in on this part of the page in order to see what filters are available.

 

 

There is an image filter drop-down menu on the far left, which defaults to Any type, but can be set to only show images of a certain type.  After that, there are a row of color content filters.  The default is Full color, but you can select monochrome or various single colors instead.  There is no option to set the transparency or color fade on a selected image, so it can be useful to choose an image with colors that give a good contrast to the elements in your diagram. Monochrome and white are both particularly useful color filters to use when looking for backgrounds that won't obscure your diagram.


Only select images that you have confirmed you have the license to use.


Once we have located a suitable image, we click on it, and it will be outlined in blue to indicate that it has been selected.

 

 

Click Select at the bottom left to return to the previous screen, but now with the URL for the selected image in the Image URL field.

 

 

Clicking Reset will clear all the fields.  Clicking Apply will return you to the diagram, but with an image background applied.

 

 

Here we have chosen an image with a lot of blue, so we have made our diagram elements yellow to stand out against the background.


If you decide you want to change the image, or adjust its height and width, simply click again on the Image button in the Format Panel and you will be returned to the background image screen.

 

Let us now look at the process of applying a solid color background.  After pressing the white color block button, a color chart screen appears.

 

 

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.  The default selection is white.


Once you are satisfied with your choice, press Apply to set the background to that color.  Below we have chosen a dark green background.

 

 

Mathematical typesetting

 

This option enables mathematical typesetting in the document properties, allowing users to create mathematical formulae and equations using either AsciiMath or LaTeX. MathJax is used for rendering.

By default, mathematical typesetting is disabled, and should only be enabled if the diagram contains mathematical typesetting, as it affects rendering performance and the image quality for exports.  All export formats (except SVG) are supported.


To illustrate how this works, here are a couple of examples of mathematical formulae that have been placed into a draw.io diagram.  We have placed two instances of the same formula side by side.  By double clicking the second instance, we cause it to display the typesetting code, so that you can see how the two relate.

The first example is for the AsciiMath format:


 

The second example is for the LaTeX format:



Paper Size settings


You can use the drop down menu to select different paper sizes.  In most cases you can also select either portrait or landscape.  The exception is if you select Custom from the drop down menu; in this case you are instead given fields to specify the height and width of the paper in pixels.


Clear Default Style


You can set a single global style for new shapes that you drag from the symbol library menu.  As long as this global style is in effect, new shapes will all conform to the settings for the style.  The exception to this is if you copy an existing shape, which results in an exact clone of the original. The Clear default style button clears the the global style.