Dotted Circle in Draw.io

Open, create and save diagrams

Open up draw.io in Confluence

A draw.io diagram tin can be created within any Confluence page, provided you have permission to edit the folio.

depict.io can be inserted like any other macro, using the macro browser. Click the drop downward menu in the toolbar with the plus icon, then click on "draw.io diagram". If "draw.io diagram" is not direct in this card, click on "Other macros" and enter "draw" in the search field at the top correct of the dialog.

You can likewise use the curly bracket shortcut: "{draw" (Windows: "Alt Shift" + "7", Mac: "Alt" + "8").

Template manager

The template director is displayed, right later on you placed the describe.io macro.

Click on the left menu item "draw.io Diagrams" then "Blank" to create a new, empty describe.io diagram.
Employ "Search" to detect existing diagrams to apply every bit a template.
draw.io includes many templates past default (due east.g. flowcharts, mind maps, and more than). You can notice these in the various categories listed on the left.

Follow one of this iii points and the draw.io Editor will open.

Save a diagram

When the draw.io editor is airtight using the "Save and Go out" or "Exit" buttons, the Confluence page is displayed.

The easiest manner to save a diagram is using the "Salve and Leave" button at the superlative correct corner.
depict.io automatically saves the state of a diagram. If you mistakenly click "Leave", you can access and restore your changes when you insert a new diagram.

Click "File" > "Save" in the bill of fare to save a diagram without exiting describe.io.

When you relieve a diagram for the first time, a filename for the diagram is generated.
In the electric current release, yous can not modify a diagram'south filename within Confluence afterward information technology has been created.

Subsequently saving a diagram, it tin can be edited at any fourth dimension - click on the diagram, and so click on "Edit" in the toolbar.

View mode

In view manner, you lot tin can display a larger version of the diagram past clicking on information technology (zoom in, zoom out).

Y'all can change the display of the diagram when editing the Confluence page (size, border, etc.).
When you click on a diagram in edit manner, a toolbar is displayed either above or below the diagram. SERVER Simply

The following options are bachelor on this toolbar:

Alter how the diagram is displayed within the Confluence page (edge, toolbar, etc.)
Duplicate the diagram
Change the displayed size within the folio (in the same way as images in Confluence)
Remove the diagram

Navigation in the diagram editor

You lot already know how to create draw.io diagrams in Confluence.

In the next section, you will learn how to use the command panels and navigate inside the draw.io editor.

The cartoon area is in the middle. Everything located here is visible in the diagram on the Confluence page after saving.
The 2 most important navigation functions are moving the visible drawing expanse (panning or scrolling), and zooming in and out.

Utilize the mouse wheel or the scroll bars to curlicue the drawing area vertically or horizontally.
Similarly, you can click and concord the right mouse button and elevate the visible drawing area around.

You can zoom in and out using the magnifying glass icons on the toolbar.
Alternatively, press the "Alt" key and use the mouse cycle to zoom.
You lot can see the current zoom condition in the toolbar.

The control panels are divided into three sections.

First is a horizontal toolbar above the drawing surface area.
The most of import tools and the main menu are located in this height toolbar, likewise as in the format panel on the correct.
Which tools are available depends on the context. For instance, dissimilar tools are displayed when you are working with text compared to when y'all are working with objects.

Similarly, the format panel contents change depending on the context.
When you select an object, you lot can customize the brandish, the included text, or the organization and size in the format panel.
When nix is selected, the drawing area itself may be customized.
The symbol library is displayed on the left hand side of the cartoon area, and contains a variety of shapes organized into categories.
Merely click on a shape from the symbol library, or click and drag the shape into the diagram.
The shapes in the symbol library are categorized. You lot can expand or plummet these categories as needed.

You can select multiple shapes by belongings the "Shift" key and selecting the shapes you desire to use.

To delete all of the shapes you added from the symbol library. Concord the "Shift" key, select all of the shapes, then click on the trash icon in the toolbar.
Alternatively, instead of using the toolbar to delete the selected shapes, only printing the "Delete" or "Backspace" central.

Identify and edit shapes

Select and move multiple objects

To move a single object, click on the object, hold the mouse button downwardly and move the object to its new position.

To move multiple objects, select them with a frame as described below (or with the "Shift" key), and then motility them to their new position. It is important that the mouse cursor is over one of the selected objects when you move them.

When the objects are shut to each other, yous tin can select them by clicking, holding the mouse button downwardly, and 'drawing' a frame around all of the objects.
It is of import to start in an empty space in the drawing area, and ensure that the frame completely surrounds all of the objects you want to select.

If you want to change the color of all symbols and lines, select them as in a higher place, and so select the color you desire to utilise.

If you accept fabricated a mistake, you lot tin can undo your changes using the undo arrow in the toolbar at whatsoever fourth dimension.

Duplicate

There are various ways to indistinguishable an object:

- Using the menu: Edit > Copy, then Edit > Paste
- Using the menu: Edit > Indistinguishable (yous salve a footstep)
- Keyboard shortcuts: "Ctrl" + "C" and then "V" for copy + paste, or "Ctrl" + "D" for duplicate

Scale & rotate

To calibration an object (brand information technology smaller or larger), you can simply motility whatever of the viii bluish points on the object.

To proportionally resize an object, hold down the "Shift" key as y'all move the points. Click here to see how information technology works.

Click on the rotate symbol to rotate the object in the desired direction.
To more than accurately scale or rotate an object, utilize the Shape Format panel on the correct mitt side when the object is selected.
Click on the "Conform" tab, then you lot can alter the size, position and angle of the selected object.

If you want to change the tiptop of a rectangle to match an earlier rectangle, copy the elevation value from the first rectangle to the current rectangle.
You can also rotate an object by changing its Angle or past using Flip.

Replace objects

To replace an object, drag a shape from the symbol library onto the object you desire to change, until the "Supercede" symbol is displayed.
To supervene upon multiple objects, select them, and then agree down the "Alt" primal and select the shape you want to utilize from the symbol library, or drag a shape onto one of the selected objects.

Insert and edit text

Text in an object

You can insert text directly in any object. Click on the object, then enter your text. The text and the object are always grouped together. For case, yous don't have to select both the object and text individually before moving the object.
Similarly, you lot can add text to whatsoever connection. Double click on a connection and enter your text.
You can too add text anywhere in the drawing area (exterior of objects and connections).
Double click on an empty expanse, or select "Text" from the library.
Text inside of an object wraps automatically.
You can edit the text formatting using the "Text" tab on the format panel.

Text on connections

Text on connections can wrap over multiple lines.
Yous can also add multiple text labels on one line.
Move a text field by clicking on the yellow dot and dragging it to a new position.
You can motility whatsoever text field on a connexion with this method.
When you want to reposition a connection with its text, simply move the connectedness.
You can change the text size, font, colour, and more than.

Free Texts

Text can besides be placed completely gratuitous (without form or line) on the surface. To do this, double-click on a free area or insert "text" from the library.

Connections and arrows

Connections from the object itself

If you hover the mouse cursor over an unselected object (without clicking), you will see multiple small crosses (connectedness points), and four blueish arrows (connection arrows).

You lot need to be careful not to hover over aselected object, considering so, but the blue connexion arrows are displayed.

A connectedness can exist created using ane of the small crosses (connexion points), or with one of the blue connection arrows.
When you lot hover over a connection point, it volition be highlighted green, so you know you are in the correct position.

Connections in the library

To insert a connector from the symbol library, click on the connection you lot want to employ., and so elevate and driblet it from the library into position on the cartoon area.

You tin can and so connect the ends of the connectors to the connection points on whatever of the objects within your diagram.

Indistinguishable and connect objects

Click on the blue pointer at the bottom of an object to duplicate it and its content (shape, color, size), and automatically connect the duplicated object to the original.

If another object is nearby when yous click on the blueish arrow, it will non duplicate the object, but instead link the two existing objects together.
By default, a connection with an pointer is used, merely y'all can change this or delete the pointer in the "Style" tab of the format panel.

In that location are several ways to duplicate shapes and work with connectors.

Revision history, import & export

Versions (revision history)

Changes to a diagram are straight saved in Confluence in the folio history.
This includes the engagement and fourth dimension of the change, likewise every bit the user who made the change.
You can restore older versions of a diagram from the page history.