Draw.io Add Text to a Box

Open, create and salve diagrams

Open draw.io in Confluence

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

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

You can besides employ the curly bracket shortcut: "{depict" (Windows: "Alt Shift" + "seven", Mac: "Alt" + "viii").

Template manager

The template manager is displayed, right after you placed the draw.io macro.

Click on the left menu particular "draw.io Diagrams" then "Bare" to create a new, empty depict.io diagram.
Apply "Search" to detect existing diagrams to utilize every bit a template.
depict.io includes many templates by default (e.chiliad. flowcharts, mind maps, and more). You tin detect these in the diverse categories listed on the left.

Follow i of this three points and the describe.io Editor will open.

Save a diagram

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

The easiest way to save a diagram is using the "Salvage and Exit" push at the pinnacle right corner.
draw.io automatically saves the state of a diagram. If you mistakenly click "Exit", yous can admission and restore your changes when you insert a new diagram.

Click "File" > "Save" in the carte to save a diagram without exiting draw.io.

When yous relieve a diagram for the commencement time, a filename for the diagram is generated.
In the current release, yous tin not change a diagram's filename within Confluence after information technology has been created.

Afterward saving a diagram, it tin can be edited at any time - click on the diagram, and then click on "Edit" in the toolbar.

View mode

In view fashion, you can brandish a larger version of the diagram by clicking on it (zoom in, zoom out).

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

The following options are available on this toolbar:

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

Navigation in the diagram editor

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

In the side by side department, you will larn how to use the control panels and navigate inside the draw.io editor.

The drawing surface area is in the centre. Everything located hither is visible in the diagram on the Confluence page after saving.
The 2 most of import navigation functions are moving the visible drawing area (panning or scrolling), and zooming in and out.

Apply the mouse wheel or the gyre bars to scroll the drawing area vertically or horizontally.
Similarly, y'all can click and concur the right mouse push and drag the visible drawing area around.

You can zoom in and out using the magnifying drinking glass icons on the toolbar.
Alternatively, press the "Alt" key and use the mouse wheel to zoom.
Y'all can see the current zoom status in the toolbar.

The command panels are divided into three sections.

First is a horizontal toolbar in a higher place the drawing area.
The most important tools and the main menu are located in this top toolbar, every bit well as in the format console on the right.
Which tools are available depends on the context. For example, dissimilar tools are displayed when you are working with text compared to when you are working with objects.

Similarly, the format panel contents change depending on the context.
When yous select an object, you lot tin customize the display, the included text, or the arrangement and size in the format console.
When zilch is selected, the drawing surface area itself may be customized.
The symbol library is displayed on the left hand side of the drawing area, and contains a variety of shapes organized into categories.
But click on a shape from the symbol library, or click and elevate the shape into the diagram.
The shapes in the symbol library are categorized. You tin can aggrandize or collapse these categories as needed.

You can select multiple shapes by holding the "Shift" primal and selecting the shapes you want to use.

To delete all of the shapes y'all added from the symbol library. Concur 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, simply press the "Delete" or "Backspace" key.

Identify and edit shapes

Select and motility multiple objects

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

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

When the objects are close to each other, you can select them by clicking, holding the mouse button down, and 'drawing' a frame around all of the objects.
It is important to outset 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 above, and then select the color you want to utilise.

If you have made a error, yous tin can undo your changes using the undo pointer in the toolbar at whatsoever time.

Duplicate

There are diverse means to duplicate an object:

- Using the menu: Edit > Copy, so Edit > Paste
- Using the menu: Edit > Duplicate (y'all relieve a step)
- Keyboard shortcuts: "Ctrl" + "C" then "V" for copy + paste, or "Ctrl" + "D" for duplicate

Scale & rotate

To calibration an object (go far smaller or larger), yous tin can simply motion any of the 8 blue points on the object.

To proportionally resize an object, agree down the "Shift" key as you move the points. Click hither to meet how it works.

Click on the rotate symbol to rotate the object in the desired management.
To more accurately scale or rotate an object, utilise the Shape Format panel on the right hand side when the object is selected.
Click on the "Arrange" tab, then you tin can alter the size, position and bending of the selected object.

If you want to modify the meridian of a rectangle to friction match an earlier rectangle, copy the height value from the offset rectangle to the current rectangle.
You tin also rotate an object past changing its Angle or by using Flip.

Replace objects

To replace an object, drag a shape from the symbol library onto the object you lot desire to change, until the "Replace" symbol is displayed.
To replace multiple objects, select them, and so hold down the "Alt" key and select the shape you lot want to use from the symbol library, or drag a shape onto one of the selected objects.

Insert and edit text

Text in an object

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

Text on connections

Text on connections can wrap over multiple lines.
You lot tin 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.
Y'all can move any text field on a connection with this method.
When y'all want to reposition a connexion with its text, simply motility the connection.
Y'all tin can change the text size, font, color, and more than.

Free Texts

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

Connections and arrows

Connections from the object itself

If y'all hover the mouse cursor over an unselected object (without clicking), you will see multiple pocket-sized crosses (connectedness points), and iv blue arrows (connection arrows).

You demand to be careful non to hover over aselected object, considering then, merely the blue connectedness arrows are displayed.

A connection can exist created using ane of the small crosses (connection points), or with 1 of the blue connexion arrows.
When you hover over a connection point, it will be highlighted green, and then y'all know you are in the correct position.

Connections in the library

To insert a connector from the symbol library, click on the connection yous want to use., then drag and drop information technology from the library into position on the drawing surface area.

You can then connect the ends of the connectors to the connection points on any of the objects within your diagram.

Duplicate and connect objects

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

If another object is nearby when you click on the blue pointer, it will not duplicate the object, but instead link the two existing objects together.
By default, a connection with an arrow is used, simply you can change this or delete the pointer in the "Style" tab of the format panel.

There are several means to duplicate shapes and work with connectors.

Revision history, import & export

Versions (revision history)

Changes to a diagram are direct saved in Confluence in the page history.
This includes the date and time of the change, as well as the user who made the change.
You can restore older versions of a diagram from the folio history.

Savage Trignis