6 min read

How To Embed Hava Cloud Network Diagrams

July 4, 2022

How to Embed Cloud Network Diagrams

Hava is pleased to announce the general availability of enhanced diagram embeds

When you have an incredibly useful resource, like an accurate up to date cloud network topology diagram, the chances are at some point you are going to want to share it.

There are endless reasons you might want to do so. Maybe you want an internal development Wiki to always show the current production environment, or maybe you want to give some external consultants a look at a particular virtual network without giving them access to all your environments, which is exactly what they would get if you gave them the keys to your Hava account.

For some time Hava has given you the ability to share a diagram using an iFrame embed code snippet. The resulted in a fully featured interactive Hava diagram appearing wherever the code was inserted, like a blog post or web app.

The downside of doing this, especially in a public facing web property is that the depth that Hava goes into for each individual resource on the diagrams means that some sensitive information like IP addresses and security groups are visible. In the case of secure intranets, there's usually no problem however publicly accessible pages are another thing entirely.


So to solve the problem, Hava's diagram share function now has three options:

Option 1 : Embed - This option provides a code snippet that allows you to embed a complete interactive diagram into another web property just as it appears within Hava. It will be fully interactive with the attribute pane and metadata viewable.


Option 2 : Embed Light - This provides a complete interactive diagram without the attribute pane or potentially sensitive metadata. This option is a safer option for publicly accessible diagrams.

Option 3: PNG Embed - This links to a PNG image of your diagram that can be placed almost anywhere.

Once you have decided on the appropriate level of detail to share, all you need to do is take the generated code snippet and insert it into its destination. For example in this Hubspot blog post you are reading now, all three embed snippets can be inserted using the Insert > Embed tool bar option and pasting the snippet into the URL/Embed Code box


This results in the following fully featured diagram:  (click on a resource)


The "Embed Light" code snippet is similar:


This results in a diagram with the attribute pane and sensitive details suppressed but still allows you to select resources to see connections and turn connection and resource names on and off.  (try clicking a load balancer or view options to see)


The last embed option is the PNG Embed. This option turns your network diagram into a static PNG with no interactivity. This time the embed snippet points to a hosted PNG image endpoint.


The PNG will reflect the view settings at the time of generating the embed code. If you need to alter the diagram to show or hide resource names for instance, you can come back to this screen and regenerate the embed PNG to show the changes.

In this example we have switched on resource names and connections and increased the resource width of the diagram which results in this PNG:

Self Updating Network Topology Diagram Embeds

All three embed codes include a link to a hosted diagram. The diagram included in the link is dynamic which means when your Hava diagram is updated automatically by the application, the destination diagram and PNG in your embed snippets also update. Which means when you embed a PNG into a web page, you don't need to delete and replace it when things change. It's handled for you.

There is literally no limit to where you can embed your Hava diagrams, as long as the web property or application supports iframe or image embeds.

Embed Hava Cloud Network Diagrams in Notion

An example of embedding diagrams into a popular productivity and project management application would be using notion.so

To insert the snippet code into notion you invoke the insert "/" dialogue and find the embed option, then paste in the snippet. The result is a fully interactive Hava diagram within the notion page.



If you are currently using Hava to auto generate and auto update your cloud diagrams then please check out the embed feature and let us know how you are using it.



If you are not currently auto generating AWS, Microsoft Azure, GCP and Kubernetes Cluster diagrams with Hava, you can take a free 14 day trial using the button below to discover exactly what is running in your cloud accounts.


Topics: aws azure gcp diagrams
Team Hava

Written by Team Hava

The Hava content team