Interactive Diagrams With Draw.io

I quite often need to explain complicated flows with the aid of diagrams. This can be extremely difficult to do as one quite often wants to just step through a set of actions one-by-one to convey what is going on, and sequence diagrams are both ugly, and often hard to understand.

Luckily, the Draw.io tool has support for turning elements into "buttons" that when clicked, will perform actions within the diagram. Thus in the video below I demonstrate how to take advantage of this to create a numbered set of steps at the bottom of my diagram, that the viewer can click, to proceed through each step of an authentication flow.

You can download the diagram I made for the video, and treat it like a template or starting point if you like.

Link JSON

Below is the JSON that I edited and pasted into the link for each button:

data:action/json,{
    "title": "action1",
    "actions": [
        {
            "hide": {
                "cells": [
                    "action1",
                    "action2",
                    "action3",
                    "action4"
                ]
            }
        },
        {
            "style": {
                "cells": [
                    "action1button",
                    "action2button",
                    "action3button",
                    "action4button"
                ],
                "key": "fillOpacity",
                "value": "0"
            }
        },
        {
            "wait": "1"
        },
        {
            "show": {
                "cells": [
                  "action1"
                ]
            }
        },
        {
            "style": {
                "cells": [
                    "action1button"
                ],
                "key": "fillOpacity",
                "value": "50"
            }
        }
    ]
}

I managed to figure out how to put the relevant JSON together by playing around with this tool.

References

• Youtube - Interactive diagrams in draw.io for Confluence
• Draw.io - Interactive diagrams with custom links and actions
• Draw.io - Create an interactive diagram and toggle layers with custom links