Interactive, inspectable AWS resource graphs

I had a problem, so I made a solution. This is a Cloudformation template, re-rendered as a Cytoscape graph with mouseovers to show the Cloudformation that produced that node and edges to show the dependencies between nodes.

APIGateway API in CDK

Reset node position and zoom:

The Problem

Basically: you want to build things on AWS the right way. How do you know what the right way is?

Cloudformation is a very powerful tool to declare what you want on AWS, and have them do the creation/deletion/management of those resources for you. However, each resource you might use in CF is its own universe of thing; putting them together correctly and well is left to you! Good luck with that, don’t mess up.

CDK is a huge step in the right direction. It gives you canonical Best Practice ways to build things. But, the generating Cloudformation templates can be a huge wall of text. When we rerender them as graphs, (because remember, they are dependency graphs of resources!) we can reason about them from the ground up and see what builds on what. This is what my little toy above does.

The Future

More on this as it develops, along side my other work. Maybe I’ll take some more complex examples, tear them apart this way, and back out my understanding of how the underlying resources work.