20 Jul

draw.io Training – Exercise 2: Edit a diagram – change the colors

Once you know how to create a draw.io diagram, and add draw.io diagrams to Confluence, the next step is to edit one!

Download this sample diagram: drawio-basic-tree-diagram.xml Right click on this link and save the file to your computer.
Open diagram in draw.ioAlternatively, hover over the diagram below then click on the ‘Open’ icon to open a copy of the diagram in draw.io online. 

Your tasks:

  1. Add a new blank chart, if you are using Confluence.
  2. Insert the downloaded diagram using drag & drop.
  3. Edit the diagram to match what you see below. You’ll need to:
    • Select single and multiple objects
    • Modify objects
    • Move objects
    • Delete objects
  4. Save and close the diagram.

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.

draw.io - select multiple objects

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.

Tip: It is important to start in an open area and drag the frame completely around each object you want to select.

You can also select several objects using the shortcuts: Cmd + click or Ctrl + click

draw.io format panelEditing objects

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, comic).

draw.io right click menuMoving or deleting objects

To move objects, first select them, then drag them to their new location.

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 from the menu, or press the Delete or the Backspace key.

In the next exercise in this basics training course, we’ll look at how to change the shapes’ shapes, rotate, resize and duplicate them.

Leave a Reply

Your email address will not be published. Required fields are marked *