Interactive diagrams with custom links and actions

Sometimes diagrams can get to be too complex, especially if they build on the same template. For example, a detailed floor plan can show walls, doors and windows, lights, plumbing, furniture, fire safety measures, power points, room assignments, networking equipment, etc.

With draw.io, you can quickly build diagrams up in layers, grouping similar components together on one layer. This is ideal for physical layouts like room plans and landscape diagrams, but it is also great for grouping related shapes or concepts in other diagrams, including mind maps, IT infrastructure diagrams, even business processes.

One layer contains the walls and doors

Another layer contains the furniture

But these diagrams can become overly complex. That’s when you need to be able to hide or display components, depending on what information you want to get from the diagram.

In the office layout example, I’ve created the following layers:

  • Walls and doors (structural)
  • Furniture
  • Lights (what type of lights, and where their light switches are)
  • Plumbing (hot and cold water pipes, drainage, toilets, and sinks or basins)
  • Fire safety measures

When all of the layers are showing, this diagram is unreadable, and things like power points and networking equipment are still missing!

Toggle shapes or layers on or off

With draw.io you can use custom links, similar to hotspots that perform actions, which can be used to toggle the display of groups of shapes on or off, or perform other useful actions.

Note: This does not currently work in draw.io for Confluence or Jira.

Open this diagram in draw.io and see for yourself how you can toggle parts of the diagram on and off!

Make draw.io perform actions when you click

Instead of a web or page link, you can enter a custom link that will perform some actions on the elements listed in the action:

  • open a diagram page
  • toggle, show, hide or highlight the specified shapes, layers or pages
  • select the elements
  • scroll to the first listed element.

The actions are written as a list of JavaScript objects (JSON). For example, the “Lights” layer in the example diagram has an ID of 1, so the custom link to toggle this layer on and off would look like:

data:action/json,{"actions":[{"toggle": {"cells": ["1"]}}]}

It is easiest to ‘assemble’ your custom link using this online tool or a text editor – you can more easily add multiple elements. The IDs can be very short or very long numbers!

See more examples of the different custom links possible in draw.io

How to insert a custom link

Step 1: Copy the ID

  • To see a shape ID: Select the shape, then select Edit > Edit Data from the menu.
  • To see a layer ID: Select the layer in the Layers dialog, then click Edit data (the vertical dots).
  • To see the page ID of one page in your diagram: Make sure nothing is selected, then select Edit > Edit Data from the menu.

Copy the number that is in the ID box.

Step 2: Build your custom link

Tip: You can also use tags in addition to or instead of IDs if you have added them to your shapes. Tags are useful for indicating areas of responsibility in complex software specification diagrams, where different teams or departments are responsible for different sections of your code, or for processes that span different business groups. For example, to hide only those elements with the HR and UpperManagement tags, the custom link would look like:

data:action/json,{"actions":[{"hide": {"tags": ["HR", "UpperManagement"]}}]}

It also means your custom links are much easier to read!

To use a mix of IDs and tags, your list will look like:

data:action/json,{"actions":[{"toggle": {"cells": ["id1", "id2"], "tags": ["tag1", "tag2"]}}]}

Tip: Use this online Create Custom Link tool to help you build your links.

Step three: Add your custom link to a shape

Select the shape, then select Edit > Edit Link from the menu.

Paste your custom link in the text field, then click Apply. You’ll see an ‘Action’ link has been added to your shape.

Now, when you view your diagram and click on the link it will perform the action.

Working with layers: Click on the lock icon next to the layer name to ‘lock’ that layer – you won’t be able to select any shapes to edit them, and the actions will work immediately, as if you were simply viewing (and not editing) your diagram.

Bonus points: Build an interface for your diagram!

As you can see in the example diagram, I added shapes to toggle like ‘buttons’. An extra layer at the bottom of the list of layers just contains the grey buttons (toggled off). When you click on a grey ‘button’, the layer is toggled on and the ‘button’ turns purple.

You can do this by adding exactly the same shape, positioned exactly over the top of the grey shape in the bottom layer in a different color, and adding exactly the same custom link to the colored ‘button’.

Interactive diagrams can be used in so many ways!

  • Create org charts showing various employee groups, independent of their hierarchy in a tree diagram.
  • Show software engineering team responsibilities in specification diagrams.
  • Draw interactive models for students and help them learn more effectively.
  • Show how components of electrical circuits are connected to power when gates are open or closed.
  • Highlight which elements belong in which sections or related elements in Venn diagrams.
  • Clearly indicate responsibilities in BPMN diagrams.
  • Show the differences in an interface mockup for normal users and administrators.
  • Make an interactive landscape diagram and show how it will develop over time.
  • Use an interactive infrastructure diagram to make it easy for IT support employees to pinpoint problems, or plan changes.
  • Or, detail everything about your office in the one interactive diagram!

Open this diagram in draw.io and see how the custom links make it interactive.