Component Diagrams with AWS Icons

In the world of software architecture, communication is key. Whether you’re explaining your design to a colleague, a client, or even capturing it for future you, diagrams can bridge the gap between abstraction and understanding. One of the most versatile tools in your diagramming toolkit is the component diagram.

Let’s dive into what they are, why they’re awesome, and how to make one with PlantUML and PlantText. And since we came back from the AWS Re:Invent conference in Las Vegas last month, we figured why not use their icons in this example? We are big fans of Amazon Web Services, so we’ll demonstrate how to add AWS icons to your component diagrams.

What are component diagrams?

A component diagram is a type of UML (Unified Modeling Language) diagram used to visualize the structure of a software system. It shows the components of the system, their relationships, and the dependencies between them. Think of it as a blueprint for your software, at a higher level, highlighting the key building blocks and how they fit together.

Components can represent anything from software assemblies to microservices, web APIs, and databases. Their interactions reveal the overall system architecture. Whether you’re designing a new application, planning a system overhaul or documenting an existing one, component diagrams help you see the forest and the trees.

A simple example

Below is a standard PlantUML component diagram for a simple web application. It has a load balancer and a server running a component that connects to a database on the backend. This is not a bad way to see the big picture of your system and to quickly convey the design to others. You can imagine that as the system becomes more complex, a component diagram can become even more valuable.

An AWS Component Diagram

Now take a look at the diagram below. It depicts the architecture of a web application in a bit more detail, including the actual icons of the cloud provider. You can see that this diagram uses AWS Cognito for authentication and auth. It has a load balancer, some EC2 instances, and a relational database. This example conveys even more meaning to someone who is used to seeing and working with AWS diagrams.

Believe it or not, you can do this in PlantText, and I’ll show you how to below.

The PlantUML below will yield the image above, using the built-in AWS icons (or sprites). I’ll walk you through this example step by step below.

@startuml

scale 1
skinparam linetype ortho
left to right direction

!include <awslib/AWSCommon>
'!include <awslib/AWSSimplified>
!include <awslib/Groups/AWSCloud>
!include <awslib/Groups/VPC>
!include <awslib/Groups/Generic>
!include <awslib/General/Users>
!include <awslib/SecurityIdentityCompliance/Cognito>
!include <awslib/NetworkingContentDelivery/ElasticLoadBalancing>
!include <awslib/Compute/EC2>
!include <awslib/Database/RDS>
!include <awslib/Compute/Lambda>
!include <awslib/Storage/SimpleStorageService>

Users(sources1, "Users", "Americas")
Users(sources2, "Users", "Asia")
Users(sources3, "Users", "Europe")

AWSCloudGroup(cloud) {
  Cognito(userAuth, "User Auth", "JWT")
  VPCGroup(vpc) {
    ElasticLoadBalancing(elb, "ELB", "ALB")
    GenericGroup(target, "Target Group") {
      EC2(ec21, "EC2", "2")
      EC2(ec22, "EC2", "1")
    }
    RDS(rds, "RDS", "Postgresql")
  }
  Lambda(lambda, "AWS Lambda", "C#")
  SimpleStorageService(s3, "Amazon S3", "aws-bucket")
}

sources1 --> userAuth
sources2 --> userAuth
sources3 --> userAuth
userAuth --> elb
elb --> ec21
elb --> ec22
ec21 --> rds
ec22 -> rds
elb .right.> lambda
lambda .down.> s3

@enduml

Why use component diagrams?

It has always been surprising to me how many software shops don’t take both the requirements and design stages of the software development life cycle seriously. They just and just jump right into implementation before they have a clear picture of what they are trying to build. From the examples above, you can probably see why component diagrams are the MVPs of software documentation:

1. Clarity: They distill complex systems into a visual format that’s easy to understand. Hang it on the wall!
2. Communication: Sharing a diagram with your team aligns everyone on the architecture and design.
3. Problem-Solving: Spotting dependencies, bottlenecks, or potential scalability issues is much easier when you can see the big picture.
4. Documentation: They’re a fantastic way to future-proof your codebase for the next team (or your future self).

How to create component diagrams with AWS Icons

Creating component diagrams in PlantText with AWS icons is pretty easy. I’ll walk you through it step-by-step.

1. Add include statements

First, add include statements for the Components. Each component represents a part of your system, such as services, databases, or APIs. You can find a complete list of all these components here.

Use the search box in the upper left hand side to find what you need. Create the !include lines like you see below. The path parts of the include are simple. Just start with “<awslib/”, then add the directory structure of the item you found at the link above. It always terminates with the name of the .puml file name.

For instance, I have !include <awslib/Compute/EC2> highlighted above. Now you can use the EC2(ec21, “EC2”, “Words”) object. In this object, the first parameter is the alias you use to reference it in PlantUML, the second parameter is the text that will appear above the icon, and the third is the text that appears at the bottom of the icon.

!include <awslib/AWSCommon>
'!include <awslib/AWSSimplified>
!include <awslib/Groups/AWSCloud>
!include <awslib/Groups/VPC>
!include <awslib/Groups/Generic>
!include <awslib/General/Users>
!include <awslib/SecurityIdentityCompliance/Cognito>
!include <awslib/NetworkingContentDelivery/ElasticLoadBalancing>
!include <awslib/Compute/EC2>
!include <awslib/Database/RDS>
!include <awslib/Compute/Lambda>
!include <awslib/Storage/SimpleStorageService>

2. Create the entities you want to display

Second, add the icons that you want to display. You need to nest them accordingly as well.

AWSCloudGroup(cloud) {

  Cognito(userAuth, "User Auth", "JWT")

  VPCGroup(vpc) {
    
    ElasticLoadBalancing(elb, "ELB", "ALB")
    
    GenericGroup(target, "Target Group") {
      EC2(ec21, "EC2", "2")
      EC2(ec22, "EC2", "1")
    }
    
    RDS(rds, "RDS", "Postgresql")
  }
  
  Lambda(lambda, "AWS Lambda", "C#")
  SimpleStorageService(s3, "Amazon S3", "aws-bucket")
}

3. Finally, add the connectors to all of your components

This is the standard PlantUML for showing connections in a component diagram. You can make lines, arrows, and double headed arrows. Use left, right, up, and down to affect the layout. Take a look here to see even more ways modify the connector style.

sources1 --> userAuth
sources2 --> userAuth
sources3 --> userAuth
userAuth --> elb
elb --> ec21
elb --> ec22
ec21 --> rds
ec22 -> rds
elb .right.> lambda
lambda .down.> s3

Using AWS icons in your component diagrams provides clarity. If your system lives in the AWS ecosystem, these icons help stakeholders instantly recognize what each component represents—be it EC2 instances, S3 buckets, or RDS databases. Plus, they just look cool!

Tips for creating great Component Diagrams

1. Keep It Simple: Focus on the most critical components and relationships. Too much detail can overwhelm your audience or even you!
2. Use Consistent Styling: PlantText’s themes and AWS icons help ensure your diagrams look professional and polished.
3. Add Annotations: Use labels and notes to explain complex interactions or dependencies.
4. Iterate: Your first diagram is unlikely to be perfect. Share it with your team, gather feedback, and refine.

Just the beginning

You have probably heard of Infrastructure as Code (IaC). IaC is a method of provisioning infrastructure through text (machine-readable configuration files) rather than physical hardware configuration or drag-n-drop configuration tools. Amazon Web Services uses JSON and YAML as configuration files to dynamically generate and manage infrastructure using CloudFormation. So, you might be able to see where I am going with this. With a little AI, we can convert from a PlantUML component diagram to YAML or JSON. And in fact, PlantText supports both YAML and JSON as well.

Now imagine if we were able to use PlantUML Component diagrams as inputs to tools like AWS CloudFormation. To actually create the infrastructure in your design.

Well… This is completely possible with PlantText and a little AI. We have been testing this and will be discussing it in a future blog post. I’m excited to share that we will be releasing an AI window in PlantText that allows you to validate, manipulate, and generate PlantUml with artificial intelligence. It’s going to be a huge step forward!

Wrapping Up

Component diagrams are your go-to tool for visualizing system architecture, and with PlantText, creating them is as easy as writing a shopping list. Add AWS icons to the mix, and you have a professional, polished diagram that communicates your ideas with clarity and style.

Ready to give it a try? Head to PlantText and start diagramming! There are a couple of AWS examples in the PlantText Samples window, under Icons, to get you started. Whether you’re mapping out a simple service or a sprawling multi-cloud system, a great component diagram is just a few lines of text away. 🎉