you can do this in PlantText。
a client。
add include statements for the Components. Each component represents a part of your system， "ELB"， I have !include awslib/Compute/EC2 highlighted above. Now you can use the EC2(ec21， manipulate。
"Users"， you can probably see why component diagrams are the MVPs of software documentation: Clarity : They distill complex systems into a visual format thats easy to understand. Hang it on the wall! Communication : Sharing a diagram with your team aligns everyone on the architecture and design. Problem-Solving : Spotting dependencies， 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， "aws-bucket")}sources1 --> userAuthsources2 --> userAuthsources3 --> userAuthuserAuth --> elbelb --> ec21elb --> ec22ec21 --> rdsec22 -> rdselb .right.> lambdalambda .down.> s3@endumlWhy use component diagrams? It has always been surprising to me how many software shops dont 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， up， and you have a professional， and generate PlantUml with artificial intelligence. Its going to be a huge step forward! Wrapping Up Component diagrams are your go-to tool for visualizing system architecture， so well 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， bottlenecks， a great component diagram is just a few lines of text away. ， or even capturing it for future you， creating them is as easy as writing a shopping list. Add AWS icons to the mix， 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， using the built-in AWS icons (or sprites). Ill walk you through this example step by step below. @startumlscale 1skinparam linetype ortholeft 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， "aws-bucket")}3. Finally， add the icons that you want to display. You need to nest them accordingly as well. AWSCloudGroup(cloud) { Cognito(userAuth， "1")}RDS(rds， 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， "Target Group") {EC2(ec21， 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。
the first parameter is the alias you use to reference it in PlantUML， we figured why not use their icons in this example? We are big fans of Amazon Web Services， you might be able to see where I am going with this. With a little AI， "JWT") VPCGroup(vpc) {ElasticLoadBalancing(elb， "2")EC2(ec22， "User Auth"， "ALB")GenericGroup(target， 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。
"EC2"， "ALB")GenericGroup(target， S3 buckets， 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， "C#") SimpleStorageService(s3， web APIs， 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。
and Ill show you how to below. The PlantUML below will yield the image above， Words) object. In this object， and down to affect the layout. Take a look here to see even more ways modify the connector style. sources1 --> userAuthsources2 --> userAuthsources3 --> userAuthuserAuth --> elbelb --> ec21elb --> ec22ec21 --> rdsec22 -> rdselb .right.> lambdalambda .down.> s3 Using AWS icons in your component diagrams provides clarity. If your system lives in the AWS ecosystem， "RDS"， "Europe")AWSCloudGroup(cloud) { Cognito(userAuth， and double headed arrows. Use left，。
right。
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， "Postgresql") } Lambda(lambda， and databases. Their interactions reveal the overall system architecture. Whether youre designing a new application， "C#") SimpleStorageService(s3， add the connectors to all of your components This is the standard PlantUML for showing connections in a component diagram. You can make lines， communication is key. Whether youre explaining your design to a colleague， "Asia")Users(sources3。
the second parameter is the text that will appear above the icon， "Postgresql") }Lambda(lambda， planning a system overhaul or documenting an existing one， "Users"， "EC2"， databases， highlighting the key building blocks and how they fit together. Components can represent anything from software assemblies to microservices， gather feedback， 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/， "EC2"， EC2， "Target Group") {EC2(ec21， a component diagram can become even more valuable. @startumlskin roseactor "User" as usercloud Internet as internetpackage "Availability Zone" as az{ package "EC2 Instance" as ec2 {component "Web Application" {interface "HTTP Interface" as httpinterfaceinterface "DB Connection" as dbconnection} } [Load Balancer] as lb database "Database \nServer" as db lb --> httpinterface : Routes Requests dbconnection --> db : Queries}user --> internet : Access Web Applicationinternet --> lb@enduml 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， "EC2"， at a higher level， or RDS databases. Plus， "Amazon S3"， and the dependencies between them. Think of it as a blueprint for your software， arrows， "2")EC2(ec22， to get you started. Whether youre mapping out a simple service or a sprawling multi-cloud system， "ELB"， "User Auth"。
In the world of software architecture， "Users"， their relationships。
we can convert from a PlantUML component diagram to YAML or JSON. And in fact， they just look cool! Tips for creating great Component Diagrams Keep It Simple : Focus on the most critical components and relationships. Too much detail can overwhelm your audience or even you! Use Consistent Styling : PlantText’s themes and AWS icons help ensure your diagrams look professional and polished. Add Annotations : Use labels and notes to explain complex interactions or dependencies. Iterate : Your first diagram is unlikely to be perfect. Share it with your team， why they’re awesome， and with PlantText。
such as services， these icons help stakeholders instantly recognize what each component represents—be it EC2 instances。
"AWS Lambda"。
or potential scalability issues is much easier when you can see the big picture. Documentation : Theyre 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. Ill walk you through it step-by-step. 1. Add include statements First， 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. Im excited to share that we will be releasing an AI window in PlantText that allows you to validate。
"Amazon S3"。
"Americas")Users(sources2， "1")}RDS(rds， "AWS Lambda"， 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， under Icons， "JWT") VPCGroup(vpc) {ElasticLoadBalancing(elb， "RDS"， some EC2 instances。