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

Construct interactive diagrams as a technical author

One in every of my favourite instruments as a technical author is diagramming. Such a visible content material not solely gives the reader with a greater understanding of the fabric but additionally permits the author to boost technicality with creativity.

My first article about interactive diagrams attracted a lot consideration and optimistic suggestions, that I made a decision to discover this topic additional. On this article, we are going to have a look at animated flowchart diagrams (with interactivity, in fact!) that specify a number of eventualities within the software program enterprise logic.

In relation to describing the software program enterprise logic, I often use flowchart pool diagrams. They permit guiding the reader via the method step-by-step emphasizing which a part of the software program is answerable for specific actions.

Think about, as an illustration, a cell software that has a module answerable for registering customers. This module is split into a number of courses, every of which performs a specific exercise inside the course of:

  • validating person’s knowledge
  • compressing person’s picture
  • getting the person’s deal with based mostly on the person’s geolocation
  • saving the information to a server storage
  • and so on.

An summary schema might look as follows:

Nonetheless, if we have to dive deeper into the processes of ‘Validating person’s knowledge’, ‘Compressing person’s picture’, and ‘Extracting person’s deal with’, the diagram could also be crammed up with quite a few nested circumstances, lengthy loops, parallel processes and so on.:

In fact, the instance is synthetic, and it’s not possible that the registration process would look so difficult.

However even when it does appear to be that, dividing this cumbersome diagram into a number of diagrams, placing them on completely different pages, and navigating between them can be an excellent suggestion. Nonetheless, typically, readers discover it inconvenient to leap throughout pages. They wish to have all of it on the identical display screen, on the identical time in order that it will be easy to observe.

To satisfy this requirement, let’s attempt to make the at present overwhelming schema extra user-friendly. By including some concrete examples of profitable and non-successful registration eventualities, we will easily information the reader via the method specializing in key steps.

So, what we goal to attain seems to be like this:

Prepared? Let’s do it!

On the Background layer, along with the diagram itself, we want a management panel with buttons to modify between completely different eventualities. We’ll describe one profitable state of affairs and two eventualities for failed registration:

At this stage, the diagram seems to be as follows:

Essential notes

  • On the Background layer, the buttons akin to the three eventualities have opacity = 50%, whereas the button No eventualities has opacity=100% and a distinct type to emphasise that there isn’t a chosen state of affairs in the meanwhile.

The principle concept is to put a brand new layer with the profitable state of affairs on high of the Background layer. On this new layer, we are going to put accents on the carried out actions, add numbers to the arrows to specify the concrete sequence of the actions, and describe the entire state of affairs in a textual content panel.

1. On the Background layer, choose all components (arrows, actions, circumstances) that participate within the profitable state of affairs.
❗You may choose all the weather after which launch pointless ones as a result of, within the profitable state of affairs, virtually all actions are carried out.
Copy the chosen objects.

2. Go to the Layers panel and create a brand new layer known as SuccessfulScenario.
Lock the Background layer, unlock the SuccessfulScenario layer, and put the give attention to the latter.

3. Paste the objects copied in step 1 on the SuccessfulScenario layer. Change the colours and kinds of the weather to spotlight them:

4. On the SuccessfulScenario layer, choose all the weather and transfer them proper on high of the corresponding components on the Background layer. After this step, you gained’t have this dizzying splitting of the schema.

5. For the arrows, put numbers representing the sequence by which the method flows:

6. Create two new buttons on the SuccessfulScenario layer:

  • one duplicating the Profitable state of affairs button from the Background layer; this new button has a mode prefer it’s clicked;
  • one duplicating the No eventualities button from the Background layer; this new button has a mode prefer it’s launched.

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

7. Beneath the Management panel, create a brand new textual content panel with the outline for the profitable state of affairs:

For now, we’ve got already highlighted the profitable stream sufficient and may transfer ahead to the subsequent eventualities. Nonetheless, I introduced animation firstly, so let’s add some dynamics to the diagram.

8. Within the draw.io high menu, go to Extras -> Plugins. Click on on the button Add and choose the choice stream.

Reload the web page to activate the added performance.

9. On the diagram, change to the SuccessfulScenario layer. Within the draw.io high menu, go to Edit -> Choose Edges.
When all of the arrows on the diagram are marked as chosen, go to the Settings panel on the appropriate and verify the parameter Movement animation:

At this stage, our SuccessfulScenario layer seems to be as follows:

Essential notes

  • When you choose edges in step 9, you may transfer all of the arrows in order that they wouldn’t be precisely the place the background arrows are. If they’re proper on high of the background arrows, the animation gained’t be so noticeable.

The concept for the unsuccessful eventualities is identical — we place a brand new layer for every unsuccessful state of affairs on high of the Background layer.

1. Within the Layers panel, make solely the Background layer seen and put give attention to it.

2. On the Background layer choose all components (arrows, actions, circumstances) that participate within the first unsuccessful state of affairs.
Copy the chosen objects.

3. Go to the Layers panel and create a brand new layer known as UnsuccessfulScenario1.
Lock the Background layer, unlock the UnsuccessfulScenario1 layer, and put the give attention to the latter.

4. Paste the objects copied in step 2 on the UnsuccessfulScenario1 layer. Change the colours and kinds of the weather to spotlight them:

5. On the UnsuccessfulScenario1 layer, choose all the weather and transfer them proper on high of the corresponding components on the Background layer.

6. For the arrows, put numbers representing the sequence by which the method flows:

7. Create two new buttons on the UnsuccessfulScenario1 layer:

  • one duplicating the Unsuccessful state of affairs 1 button from the Background layer; this new button has a mode prefer it’s clicked;
  • one duplicating the No eventualities button from the Background layer; this new button has a mode prefer it’s launched.

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

8. Beneath the Management panel, create a brand new textual content panel with the outline for the primary unsuccessful state of affairs:

9. Within the draw.io high menu, go to Edit -> Choose Edges.
When all of the arrows on the diagram are marked as chosen, go to the Settings panel on the appropriate and verify the parameter Movement animation.

The primary unsuccessful state of affairs seems to be as follows:

When the identical routine is carried out for the second unsuccessful state of affairs, it is going to look as follows:

Now, we’re achieved with the eventualities and prepared for interactivity.

Now, let’s add some clickability to our buttons for Profitable state of affairs and Unsuccessful eventualities.

Profitable state of affairs button

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

2. Within the backside menu of the Layers panel, click on on the pen icon to open the layer for modifying;

3. Copy the layer’s ID:

❗ Copy the IDs for layers UncussessfulScenario1 and UncussessfulScenario2 too.

4. Change to the Background layer of the diagram:

  • lock and conceal all different layers (SuccessfulScenario, UnsuccessfulScenario1, UnsuccessfulScenario2);
  • present and unlock the Background layer;
  • set give attention to the Background layer.

5. Proper-click on the Profitable state of affairs button and choose Edit Hyperlink… within the popup menu:

6. Within the first textual content space, paste the next code:

knowledge:motion/json,“actions”:[“toggle”: “cells”: [“layer_ID_toShow”],“cover”: “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 on the button Apply:

This code will present the state of affairs when readers click on on the Profitable state of affairs button on the Background layer and conceal each unsuccessful eventualities.

We use the identical strategy for the remainder of the eventualities. After including toggle and cover actions to all three state of affairs buttons, we’ve got the next outcome:

The one factor to do is so as to add clickability to the button No eventualities on every layer besides the background one.

1. Change to the SuccessfulScenario layer of the diagram:

  • lock and conceal all different layers (UnsuccessfulScenario1, UnsuccessfulScenario2, background);
  • present and unlock the SuccessfulScenario layer;
  • set give attention to the SuccessfulScenario layer.

2. Proper-click on the No state of affairs button and choose Edit Hyperlink… within the popup menu:

3. Within the first textual content space, paste the next code:

knowledge:motion/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 on the button Apply:

Repeat steps 1–4 of this part for each UnsuccessfulScenario1 and UnsuccessfulScenario2 layers. The code for the button stays the identical for every layer.

So, that is it! We’re achieved with our diagram:

Regardless of this text doesn’t present concrete working examples, I’m positive you can see quite a few duties in your backlog the place this performance can apply.

The XML code for the diagram is offered on this gist.

More Posts