The Menu and Tool Bars


The functionality and support options are subdivided into six main menus, which are to be found in the top menu bar. Directly below the menu bar is the tool bar. Many of the most commonly used viewing and editing options can be accessed from this bar.

 


Symbol Libraries


On the left hand side are the symbol libraries.  All symbols belong to a library, and are displayed within that library.  Clicking a symbol causes an instance of that symbol to appear in the top left hand corner of the diagram.  Clicking and dragging a symbol allows you to position the symbol anywhere in the work area.

The first library to be displayed is the General library, which is located at the top, and should already be open.  Each tab below General corresponds to a different library.  Clicking on any tab will display the symbols for that library.

 

 

Any custom libraries that you create appear at the top of the symbol library menu.  Creating a new library is described in How to create and use custom libraries.


Format Panel


Located on the right hand side panel, these settings govern various aspects of the editing environment.

 

Customizing Your Environment


Clicking on the View menu on the menu bar provides us with a number of ways of customizing our user environment.

 

 

Selecting Format Panel toggles the Format Panel on and off on the right hand side.  This function is also available from the Toolbar.

Outline provides a useful way of navigating through large complex diagrams.  Selecting this option causes the Outline Panel to appear.  Clicking and dragging the miniature page shown in the Outline Panel will also move the main page.  The part of the miniature page enclosed within the blue frame corresponds to what you can see in the main page.  This function is also available from the Toolbar.

Similarly, you can right click and drag the main page, and watch the outline view changing as well.

 

 

Layers are explained in How to use Layers.  This function is also available from the Toolbar.

 

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.  This option can also be toggled in the Format Panel.

 

Scrollbars


By default, vertical and horizontal scrollbars appear by the side of the diagram work area.  Disabling this option will remove the scrollbars.  It is still possible to move around a large diagram without scrollbars, either by right clicking and dragging, or by navigating via the outline window.

 

Tooltips


It is possible to insert notes that are attached to a particular diagram element, by selecting Edit -> Edit tooltip and typing in the desired information.  If you don't want tooltips to be displayed then disable this option.  Note that this will only disable the notes that you add yourself.  Tooltips that are already present in draw.io will still display.

 

Grid


By default, a grid of dots is displayed on the work area, in order to help with  symbol 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 those larger intervals.  Decreasing this number again will allow you to place shapes with greater precision.

This option can also be toggled in the Format Panel.

 

Guides


By default, when moving symbols around the work area, guide lines are automatically displayed whenever a central axis or edge align with that of another nearby shape.  This is to make it easier to align symbols 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.  This option can also be toggled in the Format Panel.



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.

This option can also be toggled in the Format Panel.



Actual size


Clicking View -> Actual size will revert your diagram to 100% size.  This function is also available from the Toolbar.

 

Zoom in


Clicking View -> Zoom in will zoom in to your diagram.  Click multiple times for high magnification.  This function is also available from the Toolbar.

 

Zoom out


Clicking View -> Zoom out will zoom in to your diagram.  Click multiple times for high magnification.  This function is also available from the Toolbar.