How to Generate Animated Interactive Flowchart Diagrams for Documenting Case Scenarios | by Rinagreen | Apr, 2022

Build interactive diagrams as a technical writer

One of my favorite tools as a technical writer is diagramming. This type of visual content not only provides the reader with a better understanding of the material but also allows the writer to spice up technicality with creativity.

My first article about interactive diagrams attracted so much attention and positive feedback, that I decided to explore this subject further. In this article, we will look at animated flowchart diagrams (with interaction, of course!) that explain multiple scenarios in the software business logic.

When it comes to describing the software business logic, I usually use flowchart pool diagrams. They allow guiding the reader through the process step-by-step emphasizing which part of the software is responsible for particular actions.

Imagine, for instance, a mobile application that has a module responsible for registering users. This module is divided into several classes, each of which performs a particular activity within the process:

  • validating user’s data
  • compressing user’s photo
  • getting the user’s address based on the user’s geolocation
  • saving the data to a server storage
  • etc.

An overview schema could look as follows:

However, if we need to dive deeper into the processes of ‘Validating user’s data’, ‘Compressing user’s photo’, and ‘Extracting user’s address’, the diagram may be filled up with numerous nested conditions, long loops, parallel processes etc.:

Of course, the example is artificial, and it’s very likely that the registration procedure would look so complicated.

But even if it does look like that, dividing this cumbersome diagram into several diagrams, putting them on different pages, and navigating between them would be a great suggestion. However, sometimes, readers find it inconvenient to jump across pages. They want to have it all on the same screen, at the same time so that it would be simple to follow.

To meet this requirement, let’s try to make the currently overwhelming schema more user-friendly. By adding some concrete examples of successful and non-successful registration scenarios, we can smoothly guide the reader through the process focusing on key steps.

So, what we aim to achieve looks like this:

Ready? Let’s do it!

On the Background layer, together with the diagram itself, we need a control panel with buttons to switch between different scenarios. We will describe one successful scenario and two scenarios for failed registration:

At this stage, the diagram looks as follows:

Important notes

  • On the Background layerthe buttons corresponding to the three scenarios have opacity = 50%, while the button No scenarios has opacity=100% and a different style to emphasize that there is no selected scenario at the moment.

The main idea is to place a new layer with the successful scenario on top of the Background layer. On this new layer, we will put accents on the activities performed, add numbers to the arrows to specify the concrete sequence of the activities, and describe the whole scenario in a text panel.

1. On the Background layerselect all elements (arrows, activities, conditions) that take part in the successful scenario.
❗You can select all the elements and then release unnecessary ones because, in the successful scenario, almost all activities are performed.
Copy the selected items.

2. Go to the Layers panel and create a new layer called SuccessfulScenario.
Lock the Background layerunlock the SuccessfulScenario layerand put the focus on the latter.

3. Paste the items copied in step 1 on the SuccessfulScenario layer. Change the colors and styles of the elements to highlight them:

4. On the SuccessfulScenario layerselect all the elements and move them right on top of the corresponding elements on the Background layer. After this step, you won’t have this dizzying splitting of the schema.

5. For the arrows, put numbers representing the sequence in which the process flows:

6. Create two new buttons on the SuccessfulScenario layer:

  • one duplicating the Successful scenario button from the Background layer; this new button has a style like it’s clicked;
  • one duplicating the No scenarios button from the Background layer; This new button has a style like it’s released.

Put these buttons on top of the corresponding buttons on the Background layer.

7. Under the Control panel, create a new text panel with the description for the successful scenario:

For now, we have already highlighted the successful flow enough and can move forward to the next scenarios. However, I announced animation at the beginning, so let’s add some dynamics to the diagram.

8. In the draw.io top menu, go to Extras -> Plugins. Click on the button Add and select the option flow.

Reload the page to activate the added functionality.

9. On the diagram, switch to the SuccessfulScenario layer. In the draw.io top menu, go to Edit -> Select Edges.
When all the arrows on the diagram are marked as selected, go to the Settings panel on the right and check the parameter Flow animation:

At this stage, our SuccessfulScenario layer looks as follows:

Important notes

  • When you select edges in step 9, you can move all the arrows so that they wouldn’t be exactly where the background arrows are. If they are right on top of the background arrows, the animation won’t be so noticeable.

The idea for the unsuccessful scenarios is the same — we place a new layer for each unsuccessful scenario on top of the Background layer.

1. In the Layers panel, make only the Background layer visible and put focus on it.

2. On the Background layer Select all elements (arrows, activities, conditions) that take part in the first unsuccessful scenario.
Copy the selected items.

3. Go to the Layers panel and create a new layer called UnsuccessfulScenario1.
Lock the Background layerunlock the UnsuccessfulScenario1 layerand put the focus on the latter.

4. Paste the items copied in step 2 on the UnsuccessfulScenario1 layer. Change the colors and styles of the elements to highlight them:

5. On the UnsuccessfulScenario1 layerselect all the elements and move them right on top of the corresponding elements on the Background layer.

6. For the arrows, put numbers representing the sequence in which the process flows:

7. Create two new buttons on the UnsuccessfulScenario1 layer:

  • one duplicating the Unsuccessful scenario 1 button from the Background layer; this new button has a style like it’s clicked;
  • one duplicating the No scenarios button from the Background layer; This new button has a style like it’s released.

Put these buttons on top of the corresponding buttons on the Background layer.

8. Under the Control panel, create a new text panel with the description for the first unsuccessful scenario:

9. In the draw.io top menu, go to Edit -> Select Edges.
When all the arrows on the diagram are marked as selected, go to the Settings panel on the right and check the parameter Flow animation.

The first unsuccessful scenario looks as follows:

When the same routine is performed for the second unsuccessful scenario, it will look as follows:

Now, we are done with the scenarios and ready for interaction.

Now, let’s add some clickability to our buttons for Successful scenario and Unsuccessful scenarios.

Successful scenario button

1. In the Layers panel, click on the SuccessfulScenario layer;

2. In the bottom menu of the Layers panel, click on the pen icon to open the layer for editing;

3. Copy the layer’s ID:

❗ Copy the IDs for layers UncussessfulScenario1 and UncussessfulScenario2 too.

4. Switch to the Background layer of the diagram:

  • lock and hide all other layers (SuccessfulScenario, UnsuccessfulScenario1, UnsuccessfulScenario2);
  • show and unlock the Background layer;
  • set focus on the Background layer.

5. Right-click on the Successful scenario button and select Edit Link… in the popup menu:

6. In the first text area, paste the following code:

data:action/json,{“actions”:[{“toggle”: {“cells”: [“layer_ID_toShow”]}},{“hide”: {“cells”: [“layer_ID_toHide1”, “layer_ID_toHide2”]}}]}
  • layer_ID_toShow is the SuccessfulScenario layer’s ID copied in step 3;
  • layer_ID_toHide1 is the UnsuccessfulScenario1 layer’s ID copied in step 3;
  • layer_ID_toHide2 is the UnsuccessfulScenario2 layer’s ID copied in step 3;

7. Click on the button Apply:

This code will show the scenario when readers click on the Successful scenario button on the Background layer and hide both unsuccessful scenarios.

We use the same approach for the rest of the scenarios. After adding toggle and hide Actions to all three scenario buttons, we have the following result:

The only thing to do is to add clickability to the button No scenarios on each layer except the background one.

1. Switch to the SuccessfulScenario layer of the diagram:

  • lock and hide all other layers (UnsuccessfulScenario1, UnsuccessfulScenario2, background);
  • show and unlock the SuccessfulScenario layer;
  • set focus on the SuccessfulScenario layer.

2. Right-click on the No scenario button and select Edit Link… in the popup menu:

3. In the first text area, paste the following code:

data:action/json,{"actions":[{"hide": {"cells": ["layer_ID_toHide1", "layer_ID_toHide2", "layer_ID_toHide13"]}}]}
  • layer_ID_toHide1 is the SuccessfulScenario layer’s ID copied in step 3;
  • layer_ID_toHide2 is the UnsuccessfulScenario1 layer’s ID copied in step 3;
  • layer_ID_toHide3 is the UnsuccessfulScenario2 layer’s ID copied in step 3;

4. Click on the button Apply:

Repeat steps 1–4 of this section for both UnsuccessfulScenario1 and UnsuccessfulScenario2 layers. The code for the button remains the same for each layer.

So, this is it! We are done with our diagram:

Despite this article doesn’t provide concrete working examples, I am sure you will find numerous tasks in your backlog where this functionality can apply.

The XML code for the diagram is available in this gist.

Leave a Comment