Clickable HTML network diagrams with draw.io

John Herbert (@mrtugs) over at https://movingpackets.net just recently published a blog article that I felt was extremely clever and helpful. He created a clickable HTML diagram for his home network so that he could both illustrate to his wife how good of a network admin he really is and make it easier to manage the devices on his network. The only problem I saw with John’s post is that you must own Omnigraffe, a diagramming tool only supported on macOS and iOS. If you visit their website, there is a free 14-day trial to give it a spin, but it is pay-to-play software. Enter draw.io from JGraph Ltd.:

I don’t remember exactly when draw.io came into my life, but I do believe it was brought to my attention by someone on IRC or Twitter (my apologies for not being able to give proper credit). Since that time though, I have used draw.io several times to create some nice diagrams (including my home network) without ever having to install a single piece of software! Per their website,

draw.io is an open source technology stack for building diagramming applications, and the world’s most widely used browser-based end-user diagramming applications

That’s right, I can make some pretty cool diagrams all from my favorite web-browser… for FREE!

Let’s begin.

When you first open draw.io in your web-browser, it will prompt ask you to select a destination for your saved diagrams:

If you aren’t sure where to save the file just yet, click the Decide later button at bottom.

Once you’ve created your diagram, it’s time to add management links to the different devices.

You do this by right-clicking on the object that needs a link and selecting Edit Link… at the bottom of the menu.

This opens a new window where you can insert the URL of your choice:

Once you click apply, the URL should show below the object. If the object is not selected, it will appear as if nothing was ever done.

After you have all of your URLs in place, it’s time to export this diagram as a HTML webpage. Start by clicking the File menu and selecting HTML… from the Export as sub-menu.

A new window opens allowing you to customize a few things. You can leave everything as default unless you’d like to change the border color of the objects when you hover over them. Click the Create button and it should open another new window prompting you for a name and where to save it to. Click the Download button to quickly save it to your device.

And here’s what the final result looks like when I open the HTML file in my browser:

Notice that nothing is highlighted until you hover over an object with an URL link configured. When I click an object (the firewall for instance), it will open a new tab in my web-browser at the address that I specified. If the link is for SSH and the OS (e.g. macOS with Terminal app) has a program configured to open SSH links, that program will open.

I want to conclude by giving a big shout out to John for the brilliant idea which sparked me to figure out a way to do this in draw.io and for giving me permission to piggy back off his blog post! Thanks John!

One thought on “Clickable HTML network diagrams with draw.io

  1. Pingback: Microburst: Update on the HTML Home Network Diagram - MovingPackets.net

Leave a Reply