Generate an Infrastructure Diagram



They say a picture is worth 1000 words but when it comes to an infrastructure diagram, it is actually worth 1000 frustrating sessions of trying to explain how all your backend resources fit together to your teammates. Although our CDK code is very readable (you are writing nice clean code right šŸ˜‹), let's use cfn-diagram and to generate a diagram for us.

Initialize Project

Let's reuse the chat app project from last week.

% git clone :thefinnomenon/amplify-the-cdk.git cdk-infra-diagram && cd $_
% cd backend
% npm install

Add Dependencies

% npm i -D @mhlabs/cfn-diagram

Add Scripts

// backend/package.json
	"scripts": {
		"generate:diagram": "cfn-dia -t cdk.json -c -o diagram.drawio && drawio diagram.drawio -o diagram.png && rm diagram.drawio",
		"generate:diagram:html": "cfn-dia html",

You can specify specific stacks to render by passing them in using the --stacks argument. You can also exclude certain resource types using -e.

Add Diagram to README

// backend/
# Diagram
![Infrastructure Diagram](diagram.png)

Final Thoughts

This is a nice, easy way to generate an infrastructure diagram. If you aren't happy with how it looks, you can try filtering some of the resources or break the diagram by stack. There are also paid diagram creators like CloudCraft which generate really cool diagrams.

Chris' bitmoji smiling

Hi, how's it going? Iā€™m Chris Finn, a full-stack developer from Boston, MA. I specialize in UI and UX design, cross-platform app development, and eating calzone. I am also a sucker for automation and security (in a past life I was a cybersecurity researcher).