Generate an Infrastructure Diagram

Generate an Infrastructure Diagram

Published September 20, 2021


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.
notion image
notion image

Initialize Project

Let's reuse the chat app project from last week.
% git clone 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.
notion image

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.
Click to rocket boost to the top of the page!