5.1.11

Existing CloudFormation Architecture Visualization

Stackery can be used to quickly visualize existing AWS CloudFormation YAML infrastructure-as-code architectures.

Visualizing CloudFormation Architecture Templates in Stackery

1. Create a Stackery account

If you haven't already, sign up for a Stackery account.

Complete or skip through the getting started process (you'll only need to link your Git provider to visualize a template), and click "Get Started" to finish the setup.

2. Add a new stack

The next step is to create a blank stack:

  1. Navigate to Stacks
  2. Click the Add a Stack button in the top right corner

3. Paste in your serverless configuration

When you clicked Add Stack in the previous step, you were redirected to an empty canvas in the Visual Editor. Here we'll be using the Template Editor to paste in our existing configuration.

editor view

To get you started, you can use the following template.yaml configuration file from our serverless nodeJS CRUD demo:

AWSTemplateFormatVersion: 2010-09-09 Transform: AWS::Serverless-2016-10-31 Description: Stackery Serverless CRUD API Demo Resources: function48A53742: Type: AWS::Serverless::Function Properties: FunctionName: !Sub ${AWS::StackName}-function48A53742 Description: !Sub - Stackery Stack ${StackeryStackTagName} Environment ${StackeryEnvironmentTagName} Function ${ResourceName} - ResourceName: listUsers CodeUri: src/function48A53742 Handler: index.handler Runtime: nodejs12.x MemorySize: 3008 Timeout: 30 Tracing: Active Policies: - AWSXrayWriteOnlyAccess - DynamoDBCrudPolicy: TableName: !Ref table6E08C5D Environment: Variables: TABLE_NAME: !Ref table6E08C5D TABLE_ARN: !GetAtt table6E08C5D.Arn Events: api3FEE112A: Type: Api Properties: Path: /users Method: GET RestApiId: !Ref api3FEE112A Metadata: StackeryName: listUsers api3FEE112A: Type: AWS::Serverless::Api Properties: Name: !Sub - ${ResourceName} From Stackery Stack ${StackeryStackTagName} Environment ${StackeryEnvironmentTagName} - ResourceName: /users StageName: !Ref StackeryEnvironmentAPIGatewayStageName DefinitionBody: swagger: '2.0' info: {} paths: /users: get: x-amazon-apigateway-integration: httpMethod: POST type: aws_proxy uri: !Sub arn:aws:apigateway:${AWS::Region}:lambda:path/2015-03-31/functions/${function48A53742.Arn}/invocations responses: {} post: x-amazon-apigateway-integration: httpMethod: POST type: aws_proxy uri: !Sub arn:aws:apigateway:${AWS::Region}:lambda:path/2015-03-31/functions/${function1D0BF340.Arn}/invocations responses: {} /users/{id}: get: x-amazon-apigateway-integration: httpMethod: POST type: aws_proxy uri: !Sub arn:aws:apigateway:${AWS::Region}:lambda:path/2015-03-31/functions/${function6871BEC5.Arn}/invocations responses: {} put: x-amazon-apigateway-integration: httpMethod: POST type: aws_proxy uri: !Sub arn:aws:apigateway:${AWS::Region}:lambda:path/2015-03-31/functions/${functionC2148022.Arn}/invocations responses: {} delete: x-amazon-apigateway-integration: httpMethod: POST type: aws_proxy uri: !Sub arn:aws:apigateway:${AWS::Region}:lambda:path/2015-03-31/functions/${function5A53E646.Arn}/invocations responses: {} EndpointConfiguration: REGIONAL Metadata: StackeryName: /users function5A53E646: Type: AWS::Serverless::Function Properties: FunctionName: !Sub ${AWS::StackName}-function5A53E646 Description: !Sub - Stackery Stack ${StackeryStackTagName} Environment ${StackeryEnvironmentTagName} Function ${ResourceName} - ResourceName: deleteUser CodeUri: src/function5A53E646 Handler: index.handler Runtime: nodejs12.x MemorySize: 3008 Timeout: 30 Tracing: Active Policies: - AWSXrayWriteOnlyAccess - DynamoDBCrudPolicy: TableName: !Ref table6E08C5D Environment: Variables: TABLE_NAME: !Ref table6E08C5D TABLE_ARN: !GetAtt table6E08C5D.Arn Events: api3FEE112A: Type: Api Properties: Path: /users/{id} Method: DELETE RestApiId: !Ref api3FEE112A Metadata: StackeryName: deleteUser function1D0BF340: Type: AWS::Serverless::Function Properties: FunctionName: !Sub ${AWS::StackName}-function1D0BF340 Description: !Sub - Stackery Stack ${StackeryStackTagName} Environment ${StackeryEnvironmentTagName} Function ${ResourceName} - ResourceName: createUser CodeUri: src/function1D0BF340 Handler: index.handler Runtime: nodejs12.x MemorySize: 3008 Timeout: 30 Tracing: Active Policies: - AWSXrayWriteOnlyAccess - DynamoDBCrudPolicy: TableName: !Ref table6E08C5D Environment: Variables: TABLE_NAME: !Ref table6E08C5D TABLE_ARN: !GetAtt table6E08C5D.Arn Events: api3FEE112A: Type: Api Properties: Path: /users Method: POST RestApiId: !Ref api3FEE112A Metadata: StackeryName: createUser functionC2148022: Type: AWS::Serverless::Function Properties: FunctionName: !Sub ${AWS::StackName}-functionC2148022 Description: !Sub - Stackery Stack ${StackeryStackTagName} Environment ${StackeryEnvironmentTagName} Function ${ResourceName} - ResourceName: updateUser CodeUri: src/functionC2148022 Handler: index.handler Runtime: nodejs12.x MemorySize: 3008 Timeout: 30 Tracing: Active Policies: - AWSXrayWriteOnlyAccess - DynamoDBCrudPolicy: TableName: !Ref table6E08C5D Environment: Variables: TABLE_NAME: !Ref table6E08C5D TABLE_ARN: !GetAtt table6E08C5D.Arn Events: api3FEE112A: Type: Api Properties: Path: /users/{id} Method: PUT RestApiId: !Ref api3FEE112A Metadata: StackeryName: updateUser function6871BEC5: Type: AWS::Serverless::Function Properties: FunctionName: !Sub ${AWS::StackName}-function6871BEC5 Description: !Sub - Stackery Stack ${StackeryStackTagName} Environment ${StackeryEnvironmentTagName} Function ${ResourceName} - ResourceName: getUser CodeUri: src/function6871BEC5 Handler: index.handler Runtime: nodejs12.x MemorySize: 3008 Timeout: 30 Tracing: Active Policies: - AWSXrayWriteOnlyAccess - DynamoDBCrudPolicy: TableName: !Ref table6E08C5D Environment: Variables: TABLE_NAME: !Ref table6E08C5D TABLE_ARN: !GetAtt table6E08C5D.Arn Events: api3FEE112A: Type: Api Properties: Path: /users/{id} Method: GET RestApiId: !Ref api3FEE112A Metadata: StackeryName: getUser table6E08C5D: Type: AWS::DynamoDB::Table Properties: AttributeDefinitions: - AttributeName: id AttributeType: S KeySchema: - AttributeName: id KeyType: HASH ProvisionedThroughput: ReadCapacityUnits: 5 WriteCapacityUnits: 5 StreamSpecification: StreamViewType: NEW_AND_OLD_IMAGES TableName: !Sub ${AWS::StackName}-table6E08C5D Metadata: StackeryName: Users Parameters: StackeryStackTagName: Type: String Description: Stack Name (injected by Stackery at deployment time) StackeryEnvironmentTagName: Type: String Description: Environment Name (injected by Stackery at deployment time) StackeryEnvironmentAPIGatewayStageName: Type: String Description: Environment name used for API Gateway Stage names (injected by Stackery at deployment time)

Click to copy the above code, and replace the starter configuration code in the Template Editor with it. When you click back to the Visual Editor, you will see a visual representation of each of the cloud resources included in the configuration file.

Examples to get Started

Stackery lets you visualize any valid AWS SAM or CloudFormation template file.

If you're not sure where to get started, or just want to try out Stackery with an existing serverless app, there are several places where you can find examples:

← Sharing a Custom API DomainCustomizable Cloud Resource Definitions →