5 min read

Adding Hava Interactive Cloud Diagrams to Confluence

August 11, 2022

Adding Interactive Cloud Diagrams to Confluence

You may already be aware that Hava auto generates interactive network topology and container workload diagrams for AWS, Microsoft Azure, Google Cloud and Kubernetes

You may also be aware that you can embed Hava diagrams into external web properties like an intranet, notion page, github markdown page and so forth.

When you share a Hava diagram externally, you can choose to embed a fully interactive diagram with all the settings viewable, a paired down version of the interactive diagram that suppresses the sensitive data (Light Version) and also a static non interactive PNG.

Most Hava users due to the nature of the solution are technical. Typically they are cloud engineers, developers, devops or their managers and more often than not they are using project management software like Jira and the associated wiki software Confluence.

Since Confluence is often used to document applications and the associated infrastructure, it is the perfect location for an interactive network diagram that visually explains the network infrastructure in a way that would be difficult to describe using just text.

To that end, we are pleased to announce that the Hava Confluence plug in is now available to make the process of inserting fully interactive Hava diagrams into your Confluence pages seamless.

The first step is to install the plug in.

To do this navigate to Apps in the Confluence top menu bar and "Find new apps"

Confluence_find_new_apps

Search for "hava" and install the Hava Viewer

Confluence_Marketplace

The insert process is very simple, open a new (or existing) page in confluence

Confluence_Blank_Page

You then as the blank page prompt suggests use the forward slash to open a list of available insert options, one of which will now be the Hava Viewer. The quickest method is to simply type "/hava"

Insert_Hava_ViewerSelect Hava Viewer and the container for the diagram is placed on the page.

Hava_Viewer_Plugin_for_Confluence

There is currently a slight quirk with Confluence that should be resolved soon, in that you are prompted to 'Allow Access' to the plug in, however this only functions if you have published the page. So you can go ahead and publish, then select the "allow access" button.

This may prompt you to re-enter your log in credentials and will than ask you to grant read permissions.

Authorize_app

Accept and return to and open the confluence page in the editor.

You can use the options under the diagram container to select the width of the displayed diagram.

Now we need to add the diagram ID of the desired diagram. To do this open up the required diagram in Hava, click share, select the type of diagram to embed being either embed, embed light or PNG and copy the ID:

Hava_get_Diagram_ID

Then back on the confluence page, edit the plug in diagram container.

Edit_Hava_ViewerThis will open a dialogue box to the right of screen which will allow you to paste in the diagram ID copied in the previous step:

add_diagram_ID

Once you have pasted in the ID, close the dialogue box, publish and refresh the page and the selected interactive diagram will load into the diagram viewer.

Now anyone viewing this page can see the diagram without requiring or consuming a Hava log in licence.

Diagram_Embedded_in_Confluence

The diagram now displays in its fully interactive form. Selecting resources changes the contextual attribute pane so it displays the settings and meta data related to the selected resource. The zoom, skew and toggles for names and connections are also available directly in the confluence page.

To display a static PNG file without interactivity might be desired if you have people accessing the page that shouldn't be viewing any sensitive network properties or settings. 

The method to insert a PNG is similar, although in this instance you do not copy the diagram ID, but the URL endpoint of the hosted PNG.

Embed_PNG_in_Confluence

This results in a static PNG being inserted into the Confluence page.

embedded_png_in_confluence

The BIG difference between using the Hava Viewer and simply inserting an image is that all the diagram endpoints are dynamic. When Hava updates your diagrams in response to an automatically detected network config change, the diagram endpoints are also updated, which means once you place a network topology, container or security view diagram into Confluence, it always displays the latest version without any action required on your part.

Embed once, up to date forever.

Give it a try and let us know how you got on.

If you are already using Hava to automate your cloud network documentation, you can use this feature now.

 

testimonials

If you are still subjecting yourself to the torture of manually drawing your application's cloud architecture, you can take Hava for a free trial using the button below and free yourself from drag and drop forever.

Learn more about Hava here:

 

 

Team Hava

Written by Team Hava

The Hava content team

Featured