Exploring Terraform Graphs With D3.js Part 2

TL;DR

This is the second in a series of posts exploring methods of visualizing Terraform dependency graphs, with the goal of producing a tool useful for learning and documentation. (Parts: one, two, three, four; code, documentation.)

The first post¹ presented experiments with Graphviz and D3.js, resulting in a promising prototype. Posting these to r/devops² led to some interesting discussions (online and off), and thoughts about future work.

This post takes up the problems of horizontal sprawl, better tooltips, meaningful coloration, and animations; starting with diagrams like the one above, and introducing a series of refinements.

Reconciling Graphviz and D3.js

Graphviz has one thing going for it, so far: its layouts. It can place nodes in order of their dependencies (top to bottom, in this case), whereas the D3.js experiments sometimes became crowded and disorderly.

However, compared with D3.js, its output is static, dated (1970s, I’d venture), and given to sprawling sideways. What about a combination of the two, using graphviz for layout and D3.js for interactions?

Not bad. Moving resource types to seperate headings reduces overall figure width by 25%, on average, and coloration draws the eye to related resources, regardless of layout.

Better Tooltips

Tooltips present further opportunities for improvement. Thus far, they’ve shown resource definitions, only. It might be nice if they were extended with clear labels, and a list of direct dependencies.

Tooltips could also link to pertinent documentation, implement syntax highlighting, condense verbose definitions (e.g. security groups).

Meaningful Coloration

Another question concerns the use of color. Until now, color assignments have been arbitrary, and for the most part, each type of resource has enjoyed its own.

But this is not entirely satisfying. After a certain threshold, the palette becomes confusing; new colors are not easily distinguished from old ones.

Grouping resources of related types might help. The aws provider alone supports 320 distinct types of resource in close to 50 categories,³ but typical configurations probably draw from fewer categories.

Here, resources of type aws_route, aws_internet_gateway, aws_security_group, aws_subnet, and aws_vpc all have the same color because they belong to the vpc group. Hopefully this will clarify larger diagrams.

First Animations

With provisional answers to the questions of layout, tooltips, and coloration, animations present new and intriguing possibilities. In the figure below, mousing over a resource highlights its dependencies, only.

Conclusion

Compared with the proofs of concept presented the last post, these are starting to look useful.

Aaaand, It’s exciting to begin thinking about further uses of animation, such as presenting terraform apply progress in realtime, or highlighting the subgraphs affected by a commit.

Have a Suggestion? patrick.mcmurchie@gmail.com / about