Now we will move towards making your diagrams interactive.

You can add links so that when a viewer clicks on a shape or a line of text in your diagram, they can be taken directly to another page or diagram. This is useful for linking to code from an entity relationship diagram, to forms from business processes, to departmental organization charts from an overview org chart – the uses for links are endless!

Viewers can see tooltips when they hover over a shape, and they can help to explain more complex stages in a diagram where a label isn’t descriptive enough.

Your tasks:

You can use your final diagram from the previous exercise where you worked with layers and images, or download the example here – simply right click on the link and save.

  • Add links to the two images (right-click):
    • Link to the Wikimedia article: WD-40
    • Link to the Wikimedia Commons: Gaffer tape
  • Add tooltips to the two images (Edit > Edit Tooltip).
    • WD-40
    • Gaffer tape
  • Save and close the diagram.
  • Test the tooltips and links in your diagram.

Your final diagram should look like this, when you switch off the template layer. Try hovering over and clicking on the WD-40 and fabric tape images within the diagram.

Download this resulting image here – right click on the link and save.

Add a link by right-clicking on a shape or an image and select Edit Link.

To link to a website, select Web Link, enter the Address (URL), and click Insert.

After you have saved your diagram, when someone clicks on the link, it will open in a new tab. When you hover over a link, even if it is a link on an image component, the outline of the shape/image will turn blue, indicating it is clickable.

Insert a weblink into a diagram

Edit a tooltip in draw.ioAdd a tooltip

Tooltips are added using the menu.

  • Select a shape or image.
  • Click Edit > Edit Tooltip.
  • Enter the text you want to display when someone hovers over the shape or image and click Apply.

After you have saved your diagram and Confluence page (if you are using it), when a reader hovers over an area with your tooltip, it will be displayed as below.

Edit a tooltip in

If you look at the embedded diagram above – you’ll be able to see the tooltips and follow the links.

We’ve made the diagram easier for viewers to interact with and understand. Now, let’s make our lives easier – you can create a custom shape library with the shapes you use most often.

Tutorial exercise 9: Creating your own custom shape library