DEV Community

Raghvendra Pandey
Raghvendra Pandey

Posted on • Edited on • Originally published at infrasketch.cloud

CloudFormation Diagram Generator — Visualize AWS Templates Instantly

InfraSketch now supports CloudFormation. Paste a CloudFormation YAML or JSON template — including all the !Ref, !GetAtt, and !Sub shorthand you're used to writing — and get a clean architecture diagram in seconds. No login, no backend, everything runs in your browser.

Try it now Paste your CloudFormation template and see the diagram instantly. Open InfraSketch →

Why CloudFormation support matters

CloudFormation is still the most widely deployed IaC tool in AWS-heavy organizations. It ships with every AWS account, it integrates natively with CDK, SAM, and AWS Service Catalog, and most platform teams have years of existing templates they maintain. But CloudFormation has always been terrible at communicating what it actually does. A 400-line YAML file is not an architecture — it's a specification. Turning it into a diagram has always meant manual work in draw.io or Lucidchart.

InfraSketch eliminates that step. Paste the template, click Generate, get a diagram you can share or export.

How it works

CloudFormation templates use YAML shorthand tags like !Ref and !GetAtt that are not standard YAML — most parsers choke on them. InfraSketch registers custom YAML types for all CloudFormation intrinsic functions before parsing, so your templates load cleanly without any preprocessing.

Once parsed, the engine walks every resource's Properties block and:

  • Maps the Type field (e.g. AWS::ECS::Service) to a visual category with the correct AWS icon
  • Detects VpcId: !Ref MyVPC and draws the resource inside the VPC container
  • Detects SubnetId / SubnetIds / Subnets references and places the resource in the correct subnet lane
  • Infers directed connections from any other Ref or GetAtt between supported resources

The result is the same zoned layout InfraSketch uses for Terraform — Internet zone at the top, ingress layer, VPC with subnets, data zone, messaging zone, security zone — all inferred automatically from your template.

Quick start

  1. Open infrasketch.cloud
  2. Click the CloudFormation tab
  3. Paste your template (YAML or JSON) and click Generate Diagram
  4. Export as PNG, SVG, or draw.io XML — or click Share to copy a shareable URL

The parser auto-detects YAML vs JSON based on whether the template starts with {.

Example: a minimal web stack

AWSTemplateFormatVersion: '2010-09-09'
Resources:
VPC:
Type: AWS::EC2::VPC
Properties:
CidrBlock: 10.0.0.0/16

PublicSubnet:
Type: AWS::EC2::Subnet
Properties:
VpcId: !Ref VPC
CidrBlock: 10.0.1.0/24

AppLoadBalancer:
Type: AWS::ElasticLoadBalancingV2::LoadBalancer
Properties:
Subnets:
- !Ref PublicSubnet

AppFunction:
Type: AWS::Lambda::Function
Properties:
Role: !GetAtt LambdaRole.Arn
Environment:
Variables:
QUEUE_URL: !Ref AppQueue

AppQueue:
Type: AWS::SQS::Queue

LambdaRole:
Type: AWS::IAM::Role
Enter fullscreen mode Exit fullscreen mode

This produces a diagram with the VPC container, PublicSubnet with the ALB inside, Lambda connecting to SQS and IAM Role, and the messaging zone for the queue — all from the references in the template.

Supported resource types

Category CloudFormation types
Networking AWS::EC2::VPC, AWS::EC2::Subnet, AWS::EC2::InternetGateway, AWS::EC2::NatGateway, AWS::EC2::EIP, AWS::EC2::RouteTable, AWS::EC2::TransitGateway, AWS::EC2::VPNGateway, AWS::EC2::NetworkInterface
Compute AWS::EC2::Instance, AWS::EC2::LaunchTemplate, AWS::AutoScaling::AutoScalingGroup, AWS::EKS::Cluster, AWS::EKS::Nodegroup, AWS::ECS::Cluster, AWS::ECS::Service, AWS::ECS::TaskDefinition, AWS::Lambda::Function
Data AWS::RDS::DBInstance, AWS::RDS::DBCluster, AWS::DynamoDB::Table, AWS::ElastiCache::CacheCluster, AWS::ElastiCache::ReplicationGroup
Storage AWS::S3::Bucket
Load balancing AWS::ElasticLoadBalancingV2::LoadBalancer (ALB/NLB auto-detected), AWS::ElasticLoadBalancingV2::TargetGroup, AWS::ElasticLoadBalancing::LoadBalancer
Security AWS::EC2::SecurityGroup, AWS::IAM::Role, AWS::KMS::Key, AWS::WAFv2::WebACL
Edge / DNS AWS::CloudFront::Distribution, AWS::Route53::HostedZone, AWS::Route53::RecordSet, AWS::Route53::RecordSetGroup
Messaging AWS::SQS::Queue, AWS::SNS::Topic
Containers AWS::ECR::Repository
Observability AWS::CloudWatch::Alarm, AWS::Logs::LogGroup

What gets inferred automatically

VPC containment

Any resource with VpcId: !Ref X is drawn inside the VPC box for resource X.

Subnet placement

SubnetId, SubnetIds, and Subnets properties place resources in the correct subnet lane.

ALB vs NLB

Type: network on a load balancer property selects the NLB icon; anything else is ALB.

Connection arrows

Every !Ref and !GetAtt between supported resources that isn't a VPC/subnet reference becomes a directed arrow.

Intrinsic functions supported

The YAML parser handles all standard CloudFormation shorthand tags without requiring you to expand them to long form:

  • !Ref — logical resource reference
  • !GetAtt — attribute reference (!GetAtt Resource.Attribute or list form)
  • !Sub — string substitution (scalar and list forms)
  • !If, !And, !Or, !Not — conditionals
  • !Select, !Join, !Split, !FindInMap
  • !Base64, !ImportValue, !Condition

JSON templates are also supported — { "Ref": "MyVPC" } and { "Fn::GetAtt": ["MyRole", "Arn"] } both work exactly the same way.

What's still Terraform-only

A few features remain Terraform-specific for now: module expansion (ZIP upload and registry auto-fetch), and the plan JSON workflow. CloudFormation doesn't have an equivalent to terraform show -json, but the template itself is already the resolved source of truth — there's no variable evaluation step needed.

Use cases

  • Code reviews — paste the template diff, see what changed in the diagram
  • Onboarding — new team member needs to understand the stack without reading 500 lines of YAML
  • Documentation — export as PNG or SVG and embed in a wiki, Confluence page, or design doc
  • draw.io integration — export as draw.io XML to get a fully editable diagram in diagrams.net or Confluence
  • Audit prep — show reviewers the actual infrastructure topology without sharing credentials

AWS SAM templates

AWS SAM (Serverless Application Model) templates are CloudFormation templates with additional resource types like AWS::Serverless::Function, AWS::Serverless::Api, and AWS::Serverless::SimpleTable. SAM templates are transformed to standard CloudFormation before deployment — InfraSketch works best with the transformed output.

To get the transformed template, run:

sam build
sam package --output-template-file packaged.yaml
# paste packaged.yaml into the CloudFormation tab
Enter fullscreen mode Exit fullscreen mode

Alternatively, paste your raw SAM template — AWS::Serverless::Function maps to the Lambda icon, AWS::Serverless::Api maps to API Gateway, and AWS::Serverless::SimpleTable maps to DynamoDB. The diagram won't show automatically-created IAM roles or log groups (those only appear after SAM transform), but the core service topology is correct.

Nested stacks

CloudFormation nested stacks use AWS::CloudFormation::Stack to reference child templates stored in S3. InfraSketch treats each AWS::CloudFormation::Stack resource as a single node rather than expanding its contents — to diagram a nested stack's internals, paste its template separately. This keeps the parent diagram clean while letting you drill into each child stack independently.

Common template patterns

Three-tier web application

A classic three-tier stack — ALB in a public subnet, ECS service in a private app subnet, RDS in a data subnet — produces exactly the layered diagram you'd draw by hand. InfraSketch places the ALB in the Ingress zone, the ECS service inside the VPC's private subnet, and RDS in the Data zone below, with arrows showing ALB → ECS → RDS.

Serverless API

A stack with AWS::ApiGateway::RestApi, AWS::Lambda::Function, and AWS::DynamoDB::Table renders as API Gateway in the Internet zone, Lambda in the Compute zone, DynamoDB in the Data zone, with connection arrows showing the invocation chain.

Event-driven pipeline

SNS → SQS → Lambda → DynamoDB pipelines produce clean left-to-right flow diagrams, with SNS in the Messaging zone, SQS as the buffer, Lambda in Compute, and DynamoDB in Data. !Ref references between them create the arrows automatically.

Frequently asked questions

My template uses Parameters — will it still parse?

Yes. InfraSketch doesn't need to resolve parameter values to draw the diagram. Parameters are ignored during parsing; only the Resources block matters. If a resource property is !Ref MyParameter, that reference is skipped (it doesn't point to another resource), and the resource still appears on the diagram.

What about Conditions and Mappings?

Resources wrapped in !If [MyCondition, ...] are included in the diagram regardless of the condition — InfraSketch shows the full possible set of resources, not a specific deployment. Mappings are not evaluated; references to them via !FindInMap are ignored for connection purposes.

Does it support JSON CloudFormation?

Yes — JSON templates (where properties use { "Ref": "..." } and { "Fn::GetAtt": [...] } syntax) work identically to YAML. The parser detects the format automatically from the first character.

Try CloudFormation diagrams now Paste your template and get a diagram in seconds. Free, no login, nothing leaves your browser. Open InfraSketch →

Top comments (0)