Multidimensional Flowcharts: Simplify Complex Diagrams at Your Fingertips

We define a flowchart as a diagram that illustrates the steps, sequences, and decisions of a process or workflow. Basically, a flowchart answers the question, “What steps to take to achieve X?”. But what if a diagram should provide additional information like:

• What input documents should be used in each of the steps?
• What are the output artifacts of each step?
• Whom to address questions in each of the steps and what are examples of such questions?

Putting all the answers onto one page is not a good idea. Instead of explaining the process and providing valuable answers, the diagram will frustrate and overwhelm readers.

The good news is that with draw.io, we can place each additional question that the diagram should address into a separate dimension (layer). Moreover, readers can reveal and hide every dimension at the right moment (for them).

While there are multiple ways to design such diagrams, it’s important to understand the principle of layering. And to do so, we will take a look at a generic process schema with no specific details on the process itself, just to show how to implement multidimensionality.

Input Information

Imagine an abstract process consisting of 9 steps. Steps 1, 5, and 8 require specific inputs (documents, approvals etc.). In steps 5 and 9, output artifacts have to be created. And in each step, questions may arise, and to find answers to those questions, one can either read existing documentation or address responsible Subject Matter Experts (SMEs).

Diagram Development Process

Step 1. Create the Background layer

On a blank draw.io diagram, in the Background layer, arrange the nine process steps sequentially:

For further convenience, change the layer’s parameters:

• ID = main
• label = Main Flow

Step 2. Add cues to the steps

Stay in the Main Flow layer and for each step that implies input or/and output artifacts, put cues – symbols or pictures that would represent an input or output respectively.

Spoiler alert: the cues will become clickable in a few steps.

In our case, we will use:

Step 3. Create an info panel to answer questions

Stay in the Main Flow layer and add an empty panel to the right of the schema:

In this panel, when readers click on the info cue of a particular step, information (possible questions, related documentation, SMEs etc.) related to the step will appear.

Step 4. Add a layer for each input and output

In the Layers panel, click on + and create a new layer with the following parameters:

• ID = step_1_input
• label = Step 1 Input

In the Layers panel, click on the new layer to select it and lock the Main Flow layer by clicking on the lock icon before its name:

Let’s say for Step 1, inputs are 1 document and an approval from an Accountant.
So, in the Step 1 Input layer, add the two artifacts under the input cue of Step 1:

Add a layer for each input and output cue on the schema. When you add artifacts to a layer, remember the following:

• create meaningful labels for new layers (step_5_input, step_9_output)
• when adding artifacts to a particular layer, lock all other layers by clicking on the lock icon
• before adding artifacts to a particular layer, click on the layer to select it
  (it should be highlighted in blue):

When you add all artifacts to the schema, you will have something like this:

Step 5. Add clickability to input and output cues

Now, we are going to make the input and output cues clickable, meaning that a reader can display/hide artifacts from a particular step by clicking on the corresponding cue.

Lock all input and output layers and unlock the Main Flow layer. Click on the Main Flow layer to select it:

Select the input cue of Step 1, right-click on it and select Edit Link… in the drop-down menu:

In the first text panel of the Edit Link Form, put the following code

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

And click OK:

💡 Tips

• To ensure that clickability works properly, manually replace all curly double quotes with straight double quotes.

Add the code

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

to all input and output cues of the schema replacing layer_id with ID of the corresponding layer.

For example,

• for Step 5 output, the code will be

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

• for Step 8 input, the code will be

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

When you’re done with all input and output cues, publish the schema. Once published, you will have the following result:

Step 6. Add a layer for each info cue

Open the schema for editing and go to the Layers panel. In the panel, add 9 new layers for info cues of each step. Give the layers the following IDs and labels:

• ID = step_N_info
• label = Step N Info

Lock all the layers except for Step 1 Info then click on the eye icon of a layer to hide all the Info layers except for Step 1 Info. Click on Step 1 Info layer to put focus on it:

Add a Title and Text with the information related to the first step inside the Info Panel:

• Title = Step 1
• Text – put any information you consider may be useful to complete the task in the step (tips and advice, useful documents and guides, Subject Matter Experts to whom one can address their questions etc.)

In the same manner, add a Title and Text with the information related to every other step inside the Info Panel. Before adding Title and Text for Step N Info, remember to:

• lock all the layers except for Step N Info
• hide (click on the eye icon of a layer) all the Info layers except for Step N Info
• click on Step N Info layer to select it

Step 7. Add clickability to info cues

At this stage, Titles and Texts of all Info layers overlap. But don’t worry, they won’t be displayed to the reader simultaneously.

Now, we are going to add clickability to Info cues so that when the reader clicks on the Info cue of one step, only the information related to this step will be shown. All other layers will hide.

Lock all layers except for the Main Flow layer and click on the Main Flow layer select it:

Select the Info cue of Step 1, right-click on it and select Edit Link… in the drop-down menu:

In the first text panel of the Edit Link Form, put the following code

data:action/json,{"actions":[{"toggle": {"cells": ["step_1_info"]}}, 
{"hide": {"cells": ["step_2_info","step_3_info","step_4_info","step_5_info",
"step_6_info","step_7_info","step_8_info","step_9_info"]}}]}

And click OK:

💡Tips

• To ensure that clickability works properly, manually replace all curly double quotes with straight double quotes.

Add the code

data:action/json,{"actions":[{"toggle": {"cells": ["step_N_info_show"]}}, 
{"hide": {"cells": ["step_A_info_hide","step_B_info_hide",...,"step_X_info_hide"]}}]}

to all Info cues of the schema replacing step_N_info_show with ID of the corresponding Info layer, and step_A_info_hide, step_B_info_hide, … step_X_info_hide with IDs of other Info layers that have to be hidden.

For example,

for Step 5 Info, the code will be

data:action/json,{"actions":[{"toggle": {"cells": ["step_5_info"]}}, 
{"hide": {"cells": ["step_1_info","step_2_info","step_3_info","step_4_info",
"step_6_info","step_7_info","step_8_info","step_9_info"]}}]}

for Step 8 Info, the code will be

data:action/json,{"actions":[{"toggle": {"cells": ["step_8_info"]}}, 
{"hide": {"cells": ["step_1_info","step_2_info","step_3_info","step_4_info",
"step_5_info","step_6_info","step_7_info","step_9_info"]}}]}

When you’re done with all Info cues, publish the schema.

Once published, you will have the following result:

The final look of the published schema:

Drawbacks of Multidimensional Flowcharts

1. Suitable only for electronic Knowledge Management Systems

If you use Confluence as a Knowledge Management System (KMS), you can embed multidimensional flowcharts via draw.io macro.

For other electronic KMSs, you can export multidimensional flowcharts in HTML format and paste the generated HTML code on a page.

However, in printed documents, you can only insert one-dimensional flowcharts.

2. Take more time to create

Multidimensional flowcharts take more time and patience, especially at first, when you are not used to the procedure. But once you get comfortable with layers and clickability, they won’t require significantly more effort than one-dimensional schemas.

Want to dive deeper into the world of draw.io? Access our linktr.ee page to follow us on social media and learn how others use draw.io, as well as pick up some helpful tips and tricks.