How to Make an Interactive Flowchart

This is exactly the benefit of an interactive flowchart: a high level picture at first glance, and more details exactly when and where you need them. You can click on any box or arrow of this diagram for more information.

Copy the folder to your PC. If you have Google Drive for desktop installed, you can work directly in Google Drive, so you can share your documentation instantly and interatively.

You'll be editing this flowchart in html code directly. I use VSCode, but you can use any editor (even Notepad!)

The title is what is displayed in the browser tab. It's in the .html document near the top, bracketed in <title> ... </title>

I don't have anything to add here, but I did say you could click on anything. So for this spare arrow, you get a sparrow.

Image credit:

Rhododendrites - Own work, CC BY-SA 4.0

I like to use Lucidchart. They've got pretty good features for even their free version, and you can export the image as an .svg file, which will scale nicely when your flowchart is zoomed. Of course, you can use whatever you want, even MS Paint.

Once you've got your picture, update the image source in the code just after the comment  to match the filename of your picture.

Start by clearing out everything between the comments

and

.

To find the position (and in general while editing), open the html document in a browser. When you click anywhere on the page, the cursor positions show up in the top left.

NOTE: these positions are dependent on the page being scrolled all the way up and all the way to the left. If your flowchart extends out of frame, you'll need to zoom out until you can see the area you want while scrolled all the way up and left.

In the folder, find create_popup.py, and double-click to run it. You'll need python installed on your computer.

You can also modify create_popup.py for your specific needs.

Once create_popup.py has finished running, the file hypertext-buffer has the .html code you just generated. Copy and paste it into your-flowchart.html in the <body> section.

Nothing's ever final! This flowchart building process is intended to be iterative.

You can update your underlying picture at any time, just make sure the new file is in the main folder and has the name that the .html file is looking for.

WARNING: If you change the dimensions of your underlying picture, the positions of everything will change. It's good to make a draft on paper first to be sure the overall structure is right, and then you can go back and only change the parts you really need to.

You can fix this too! These mistakes or updates are very easy to fix.

You can always edit the html directly, and in some cases this will be the easiest way to put in features like links, math, tables, or images. The create_popup.py script is best suited for text paragraphs.

To change the position of any clickable area, change the style="top: XXXpx; left: XXXpx;".

The easiest way to share is via Google Drive (you have to share the whole folder). People can download the whole folder, and click on your-flowchart.html to view in browser.

A cleaner way to share would be to host the webpage on the public internet. The U of A will host webpages for students and staff (that's where this is hosted), but beware that this makes your flowchart open to the whole public (no confidential information!).

You can easily input mathematical equations like $x = {-b \pm \sqrt{b^2 - 4 a c} \over 2 a}$ using MathJax.

Here's a great reference for inputting equations with MathJax.

Here's an example table:

Feature	Paper Flowchart	PDF Flowchart	HTML Flowchart
Popups	Yes!	No :(	Yes!
Links	No :(	Yes!	Yes!
Easy to Update	No :(	No :(	Yes!
Papercuts	Yes!	No :(	No :(

To add a link to anywhere else, add a html tag that looks like this:

<a href="https://my-documentation.com" target="_blank">Link Text</a>

Basically, if you've seen it done on the internet, you can code it in your html flowchart. The possibilities are endless!

If you're new to html coding (I was last week), I say skip the tutorials and just try stuff until it works. LLMs are very good at coding advice these days...

But there are online tools that can help generate the code. I like this one.

The hardest thing to fix is a major change to the underlying figure, which can change the locations of every clickable item. If you plan a bit, you can avoid this.

If your figure shifts a predictable amount (say 100px to the left), you could imagine writing a short python script to read in your html file and modify all the left: XXXpx values by 100px.

I think of documentation as occuring at three levels with these diagrams.

The high-level flowchart itself. Good as a reminder for people already familiar, or as the first introduction for new folks.
The popups, which should hold definitions or clarifications of items, or descriptions of relationships between them.
The links to external documentation, which are good for anyone curious about how you reached a conclusion, or needing source material.

If you work from within a Shared Google Drive, your colleagues can see, learn from, and give feedback on your documentation at all times, and it won't disappear when you're no longer a student.

To see where your clickable items are while editing, change the background-color tag in the style information at the top of the .html document. Change it back when everything's been labelled.
Keep the flowchart open in a browser while editing the .html code. When you make a change, hit save, then refresh the browser to see the effect of the change.
If you've got a large area to make clickable, you can modify the size of the area by adding style information to the clickable-area tag. Same goes if your math, table, or image is wider than the popup: just modify the popup style tag.

If you and all your colleagues are working from a Shared Google Drive, and accesssing your flowchart with Google Drive for Desktop, sharing is super easy and just works. But that's a big if.

To share the flowchart in any other circumstance, you have to share the whole folder and they have to download the whole folder. Hosting your flowchart as a proper website makes it a lot cleaner, but then you're out on the open wild internet... not an appropriate place for some types of information (especially anything confidential!).

If you know of any easier or cleaner ways to share .html files with colleagues, please let me know! I'm new to all of this :)

You can be the judge as to whether it suits your workflow! I started this tutorial from scratch (with create_popup.py already created), and added this popup as the very last thing.

Total time: 5 hours.