07 Aug

draw.io Training – Exercise 7: Create a diagram with layers and images

Building your diagram by using layers allows you a lot more flexibility – you can switch between different views of your diagram, group related elements and protect them from being modified when you work in a different layer.

You can display all of the layers at once, or switch them off individually – they are still in your diagram, just hidden.

In this exercise, you’ll create a diagram in a top layer, following an image ‘template’ that you paste into the background layer.

Your tasks:

  • Open a new blank diagram.
  • Add a new layer (first layer is the background).
  • Rename the layers (double click on the name).
    • Level 1: Template
    • Level 2: Diagram
  • Select the level 1 layer, and paste in the image template.
    • Download the image below, and drag & drop it onto the drawing area.
  • Decrease the opacity of the image template (30%).
  • Lock the level 1 layer.
  • Create the diagram using shapes, text and connectors.
    • Download and add the two additional images (WD-40, fabric tape), resize and position them.
  • Disable the display of the level 1 layer.
  • Save the diagram.

Use the following images to help you build your layered diagram. Right click on each image to save them to your computer.

Engineering Flowchart - template imageFabric tapeWD-40

 

 

 

 

 

 

When you have all layers visible in your diagram, it should look like this:

You can download this example here – right click on the link and save.

Layers

Open the Layers dialog by clicking the left-most icon in the toolbar and selecting Layers.

  • You can create another layer by using the plus icon in the Layers dialog.
  • Double click on the name of a layer (in the Layers dialog) to rename the layer.
  • To insert something into a layer, the correct layer must be selected in the Layers dialog.
  • To show or hide a layer, click the checkbox next to the layer’s name.
  • Use the lock icon to the left of these checkboxes to lock the layer. You won’t be able to make changes to a layer after it has been locked.

Once you have inserted the image template, you can reduce the opacity using the Style tab in the format panel on the right.

Inserting images

You can easily insert images into your diagram by dragging and dropping the file into the drawing area.

Alternatively you can use the plus icon in the toolbar, and select Insert Image.

Where would I use layers?

Infographics are best built in layers – that way you can work on a specific section without risking that you move or change something in the rest of the diagram. Read more about creating infographics in draw.io.

Do you have a lot of printed business processes that you want to digitize? Scan them in and put the image as the ‘template layer’, then use this as a guide to recreate the diagram in draw.io.

Leave a Reply

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