Once you know how to create a draw.io diagram, and add draw.io diagrams to Confluence, the next step is to edit one! This section of the tutorials does not differ in terms of the different Confluence deployments (Cloud, Data Center and Server).
For this tutorial, please download our sample diagram beneath. This is what your draw.io diagram should look like after you have finished editing. You’ll use this diagram as the starting point for Exercise 3.
Drag & drop your XML file into your blank drawing area
Selecting multiple objects
There are several ways you can select multiple objects. If the objects to be selected are close to each other, click and drag a frame around all of the objects with the mouse. You can also select several objects using the shortcuts: Ctrl / Cmd + click
Tip: It is important to start in an open area and drag the frame completely around each object you want to select.
You can edit shapes in the format panel on the right. There are several formatting options:
Change the color.
Add a gradient.
Change the width, color and style of the line or remove it.
Change the opacity.
Edit the style of the shape (Rounded, Shadow, Glass, Sketch).
In our case, color the diagram according to our example above, set the Linewidth to 3 pt and choose the option Rounded for the selected shapes.
Now that you changed the shapes you can also change the connectors. To do that, go to Edit > Select Edges to select only the connectors. Now we change the color to a dark grey, set the Linewidth to 2 pt, and select another Line end style.
Moving or deleting objects
To move objects, first select them, then drag them to their new location. In our case, select the two yellow rectangle shapes and reposition them, so they are centered beneath the parent shape.
Now let us delete the three shapes on the lower right section of the diagram. You can easily remove selected objects using the Delete icon in the toolbar. This works for both single and multiple selected objects.
You can also delete objects by selecting the object(s), right click then select Delete (if you like to delete the shape with its connector, choose Cut instead) from the menu, or use the shortcut Ctrl+Delete (Cmd+Delete on a Mac).
In the next exercise in this basics training course, we’ll look at how to change the objects’ shapes, rotate, resize, and duplicate them.