# Diagramz Orientation # The Environment ![](https://support.draw.io/download/attachments/7700491/Screen%20Shot%202016-05-13%20at%2015.34.47.png?version=1&modificationDate=1463150138591&api=v2) ## 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. The first one is *File*, and the functionality associated with this menu is explained in [Part 1: Working with Files](https://support.draw.io/display/DO/Part+1%3A+Working+with+Files). The next three, *Edit*, *View*, and *Arrange*, are all concerned with working with diagrams, and are explained in [Part 2: Working with Diagrams](https://support.draw.io/display/DO/Part+2%3A+Working+with+Diagrams). The last two, *Extras* and *Help*, are explained in [Part 3: Support and Extras](https://support.draw.io/display/DO/Part+3%3A+Support+and+Extras). 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. ![](https://support.draw.io/download/attachments/7700491/Screen%20Shot%202016-05-13%20at%2016.20.58.png?version=1&modificationDate=1463152889120&api=v2) ## 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. ![](https://support.draw.io/download/attachments/7700491/Screen%20Shot%202016-05-13%20at%2016.30.50.png?version=1&modificationDate=1463153481868&api=v2) Any custom libraries that you create appear at the top of the symbol library menu. Creating a new library is described in [Using Libraries](https://support.draw.io/display/DO/Using+Libraries). ## Format Panel Located on the right hand side panel, these settings govern various aspects of the editing environment. ## Customising Your Environment Clicking on the View menu on the menu bar provides us with a number of ways of customising our user environment. ![](https://support.draw.io/download/attachments/7962826/image2015-8-3%2020%3A39%3A50.png?version=1&modificationDate=1438630863622&api=v2) 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 naivgating 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. ![](https://support.draw.io/download/attachments/7700491/image2015-8-3%2020%3A57%3A59.png?version=1&modificationDate=1438631881243&api=v2) *Layers* are explained in [Layers](https://support.draw.io/display/DO/Layers). This function is also available from the Toolbar. #### *Page view* By default, the work area apears 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](http://draw.io/) will still display. ![](https://support.draw.io/download/attachments/7700491/image2015-8-4%2011%3A6%3A1.png?version=1&modificationDate=1438682762506&api=v2) #### *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. ![](https://support.draw.io/download/attachments/7700491/image2015-7-27%2016%3A35%3A59.png?version=1&modificationDate=1438011368459&api=v2) #### *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. ![](https://support.draw.io/download/attachments/7700491/image2015-7-27%2016%3A40%3A31.png?version=1&modificationDate=1438011641091&api=v2) #### *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. # Using Libraries
Creating custom libraries
Although Diagramz provides an extensive set of default libraries, there may be times when you would like to use symbols that are not provided. Provided you are able to locate and use the relevant symbols, you can incorporate them into a custom library, which can then be used in the same way as any of the existing default libraries. This page will explain how to do this. When creating a new library, the first decision to make is where it will be saved. You have usual three storage options to choose from. First we select *File -> New library -> **Storage Option***. ![](https://support.draw.io/download/attachments/7503942/image2015-7-21%2015%3A9%3A35.png?version=1&modificationDate=1437487777750&api=v2) This brings up a custom library screen. In the *Filename* field we can choose the name of our library. The main part of the screen is blank; this is where our library symbols will be displayed as we add them. ![](https://support.draw.io/download/attachments/7503942/image2015-7-21%2015%3A9%3A20.png?version=1&modificationDate=1437487762660&api=v2) There are four main ways to add a new symbol to the library:
1. Drag an image or URL associated with an image onto the blank window pane. 2. Add an image by browsing your local file system (Device storage). 3. Add an image from a web page URL. 4. Search for and select from online images.
Let's go through each of these methods in turn. ### Dragging an image onto symbol pane This is simply a case of dragging a symbol from another location (such as a directory on your local file system) and onto the symbol pane. The symbol then appears, indicating that it has joined the library. ![](https://support.draw.io/download/attachments/7503942/image2015-7-21%2015%3A9%3A10.png?version=1&modificationDate=1437487752872&api=v2) Here we have done this to add our first library symbol, a left facing black arrow. ### Add image by browsing local file system Clicking *Add images* brings up the file picker for your local file system (Device storage). ![](https://support.draw.io/download/attachments/7503942/image2015-7-21%2017%3A17%3A42.png?version=1&modificationDate=1437495464910&api=v2) You can browse this in the usual way, selecting one or more files, and they will appear as new symbols in your library. ![](https://support.draw.io/download/attachments/7503942/image2015-7-21%2017%3A17%3A2.png?version=1&modificationDate=1437495425517&api=v2) Here we have done this to add a second library symbol, a right facing red arrow. ### Add an image from a web page URL. From the custom library screen, click on *Add image URL*. This brings up a new screen where you can type in or copy a URL. ![](https://support.draw.io/download/attachments/7503942/image2015-7-21%2015%3A8%3A46.png?version=1&modificationDate=1437487728816&api=v2) Here we have copied in a URL linking to the draw.io logo symbol. Clicking *Apply* then adds the logo to our library. ![](https://support.draw.io/download/attachments/7503942/image2015-7-21%2017%3A30%3A52.png?version=1&modificationDate=1437496254864&api=v2) ### Search online images The previous method works fine if you already have a URL to use. But if you want to search for an appropriate image, you can also do this. From the custom library screen, click on *Add image URL*. ![](https://support.draw.io/download/attachments/7503942/image2015-7-21%2018%3A4%3A30.png?version=1&modificationDate=1437498272623&api=v2) This time, instead of using a URL in the *Add image URL* field, click *Search* instead. This will bring up a Google search window. Entering search terms into the search field will cause 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. ![](https://support.draw.io/download/attachments/7700491/image2015-7-28%2015%3A32%3A23.png?version=1&modificationDate=1438093947245&api=v2) 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. ![](https://support.draw.io/download/attachments/7503942/image2015-7-21%2015%3A8%3A27.png?version=1&modificationDate=1437487709523&api=v2) Once we have located a suitable image, we click on it, and it wil be outlined in blue to indicate that it has been selected. **Only select images that you have confirmed you have the license to use.** ![](https://support.draw.io/download/attachments/7503942/image2015-7-21%2015%3A8%3A1.png?version=1&modificationDate=1437487683862&api=v2) Click Select at the bottom left to return to the previous screen, but now with the URL for the selected image in the *Add image URL* field. ![](https://support.draw.io/download/attachments/7503942/image2015-7-21%2015%3A7%3A7.png?version=1&modificationDate=1437487629763&api=v2) Clicking *Apply* then adds the latest symbol to our library. We have also given the library a name prior to saving it ![](https://support.draw.io/download/attachments/7503942/image2015-7-21%2016%3A24%3A32.png?version=1&modificationDate=1437492274699&api=v2) We now have four symbols in our new library. Not that each symbol has a small black cross in its top right hand corner. If want to remove any symbol from the library, we can simply click the cross. We can save the library by clicking *Save*. ![](https://support.draw.io/download/attachments/7503942/image2015-7-21%2016%3A26%3A38.png?version=1&modificationDate=1437492400598&api=v2) The new library appears at the top of the library symbol on the left hand side of Diagramz. ## Opening a custom library Having created our custom library, we can load it into another session of draw.io. Below we created a new diagram in Google Drive. Let us now add the custom library we created in the previous section. Select File -> Open library from -> Browser (since we saved the library in local Browser storage). ![](https://support.draw.io/download/attachments/7503942/image2015-7-21%2016%3A31%3A41.png?version=1&modificationDate=1437492704095&api=v2) The Browser file picker appears, and we can see our custom library file. ![](https://support.draw.io/download/attachments/7503942/image2015-7-21%2016%3A31%3A53.png?version=1&modificationDate=1437492715312&api=v2) Clicking the file causes the library symbol menu to appear. ![](https://support.draw.io/download/attachments/7503942/image2015-7-21%2016%3A32%3A7.png?version=1&modificationDate=1437492730024&api=v2)
# How to use the Scratchpad The scratchpad is a temporary working space for keeping commonly used shapes for easy access. It can be found at the top left of editor, above the libraries. If it is not shown, you can display it using the menu under view -> scratchpad. You can also hide it by clicking the "x" icon by the scratchpad. To store elements in the scratchpad, drag and drop them from the diagram to the content area or click on the "+" icon while the elements are selected. To insert elements into the diagram, drag and drop them from the scratchpad to the diagram as follows: [![scratchpad.gif](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/16003313386/original/scratchpad.gif?1476700508 "scratchpad.gif")](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/16003313386/original/scratchpad.gif?1476700508) To reorder or remove entries, click the pencil and use the dialog that appears: [![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/16006047102/original/n_5p47tXLZNe72iiuDeyoGPYwyZEnTdLwg.png?1484904365)](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/16006047102/original/n_5p47tXLZNe72iiuDeyoGPYwyZEnTdLwg.png?1484904365) Note that the scratchpad is stored in the local storage of the browser, which means it's contents are deleted if cookies are cleared. The scratchpad is automatically saved between each change. You can export the scratchpad as a Diagramz library from that dialog, if you want to store it more permanently or share it with others. # How to add images In modern browsers, you can simply drag and drop images from the local filesystem or from a browser window to your diagram as follows: [![images.gif](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/16003338739/original/images.gif?1476770966 "images.gif")](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/16003338739/original/images.gif?1476770966) ## Image Quality and Size Large images are resampled. Use Ctrl+Drag to show a dialog for the image size if the dialog does not appear automatically. (Note: Images are resized because large images are slowing down the client, especially the autosave functionality, and are counting against your realtime file size limit in Google Drive. Try using a link to an image for large images instead.) ## Chrome App Note: Drag and drop for images in the Chrome app is not supported due to security restrictions. Use File, Import to add images there.