Exporting hierarchical architecture diagrams from Pactflow

Whilst the native visualisation in the Pact Broker, and by extension Pactflow, is useful, it doesn't (currently) visualise this very well for larger architectures. Often times, you'll want to be able to change the shape and layout according to your needs, for example, to lay out your system in a hierarchical view - this can help you identify common bottlenecks and help you analyse your architecture as it evolves organically.

In this short post, I'm going to show you how you can take a picture that looks like this

...and turn it into something that looks like this:

As you can see, this gives level of depth previously obscured by the default view.

Prerequisites

We're going to be using GraphViz, an open source graph visualization software package. It's a handy little tool that takes a text file and turns it into lovely diagrams.

We're going to use an old public test Pact Broker for our demonstration (see credentials below). There are many contracts in here, but in our example we're just interested in the sub-system of our architecture containing the AWSSummiteer prefixed components.

Let's create the DOT file:

echo "digraph { ranksep=3; ratio=auto; overlap=false; node [  shape = plaintext, fontname = "Helvetica" ];" > diagram.dot ; \
  curl -v -u 'dXfltyFMgNOFZAxr8io9wJ37iUpY42M:O5AIZWxelWbLvqMd8PkAVycBJh2Psyg1' https://test.pact.dius.com.au/integrations | \
  grep AWS | tr -d '"' |  sed 's/-/_/g' | sed 's/_>/->/g' \
  >> diagram.dot; echo "}" >> diagram.dot

Here, we are querying the Pact Broker /integrations endpoint, filtering out the bits we don't need, and constructing a basic diagram written in DOT (read the docs).

This produces the following output:

digraph { ranksep=3; ratio=auto; overlap=false; node [  shape = plaintext, fontname = Helvetica ];
  AWSSummiteerTwitterSNSProvider -> Twitter
  AWSSummiteerWeb -> AWSSummiteerWeb
  AWSSummiteerTwitterSNSConsumer -> AWSSummiteerTwitterSNSProvider
  AWSSummiteerWeb -> AWSSummiteerIoTPresignedUrl
  AWSSummiteerSentimentSNSProvider -> AWSSummiteerTwitterSNSProvider
  AWSSummiteerWeb -> AWSSummiteerIoT
  AWSSummiteerWeb -> AWSSummiteerSentimentSNSProvider
  AWSSummiteerWeb -> AWSSummiteerTwitterSNSConsumer
}

You can now produce the new graph in SVG form with the following command:

dot latest.dot -otest.svg -Tsvg

That's it!

Credentials for test broker

• Host:  https://test.pact.dius.com.au
• User: dXfltyFMgNOFZAxr8io9wJ37iUpY42M
• Password: O5AIZWxelWbLvqMd8PkAVycBJh2Psyg1