https://cloudviz.io/_next/static/chunks/pages/blog/aws-architecture-diagram-bb0ea561ae8db9b0.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2351],{61013:function(e,t,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/aws-architecture-diagram",function(){return s(81732)}])},81732:function(e,t,s){"use strict";s.r(t);var i=s(85893),a=s(62065),r=s(77884),n=s(598),o=s(41664),c=s.n(o),l=s(25675),d=s.n(l);t.default=()=>(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.Z,{description:"AWS architecture diagram serves as crucial visual knowledge for every development team to improve understanding and communication for designing, deploying, and managing cloud infrastructure.",title:"AWS Architecture Diagram",showStructuredData:!0,image:"https://cloudviz.io/assets/aws-architecture-diagram/aws-serverless-architecture.svg"}),(0,i.jsxs)("div",{className:"bg-white overflow-x-hidden",children:[(0,i.jsx)(r.Z,{}),(0,i.jsx)("section",{className:"bg-white pt-[120px]",children:(0,i.jsxs)("div",{className:"container px-4 mx-auto sm:px-6 lg:px-8 2xl:px-20 mb-14",children:[(0,i.jsxs)("div",{className:"text-center xl:px-[140px]",children:[(0,i.jsx)("h1",{className:"mt-10 text-5xl font-light text-cloudviz-blue sm:text-6xl xl:text-6xl",children:"AWS Architecture Diagram"}),(0,i.jsxs)("div",{className:"py-5 text-left sm:text-[18px] self-stretch",children:[(0,i.jsx)(d(),{className:"my-10 rounded-t",priority:!0,src:"/assets/aws-architecture-diagram/aws-serverless-architecture.svg",alt:"AWS serverless web application diagram",width:1096,height:458}),(0,i.jsxs)("div",{className:"flex my-2",children:[(0,i.jsx)(c(),{href:"/valts",children:(0,i.jsx)("img",{src:"/img/va.jpeg",className:"h-10 w-10 rounded-full mr-2 "})}),(0,i.jsxs)("p",{className:"text-gray-400 text-base mb-2 mt-2 font-light",children:["by"," ",(0,i.jsx)(c(),{href:"/valts",className:"text-gray-400 transition-all duration-200 hover:text-opacity-60",children:"Valts Ausmanis"})," ","\xb7 June 29, 2023"]})]}),(0,i.jsx)("p",{className:"text-[18px] text-gray-500 font-light sm:text-2xl sm:mt-[50px] mt-[30px]",children:"Having a thorough understanding and effective communication of a cloud architecture is crucial for designing, deploying, and managing cloud infrastructure. AWS architecture diagrams serve as indispensable visual blueprints that capture the essence of an AWS architecture. In this article, we will look into the fundamental concepts of AWS architecture diagrams, including the use of AWS icon sets, adherence to AWS team guidelines, the key elements to be visualized, and the principles that define a good AWS architecture diagram. Building upon our previous article on AWS architecture diagram tools, we will explore the principles that underpin the creation of effective AWS architecture diagrams"})]})]}),(0,i.jsxs)("div",{className:"blog-article text-left xl:px-[140px] text-base sm:text-[18px] font-light  text-gray-900",children:[(0,i.jsx)("h2",{children:"Elements of AWS Architecture Diagram"}),(0,i.jsxs)("p",{children:["Utilizing architecture diagrams is an excellent method for effectively conveying your design, deployment, and network structure. When it comes to AWS architecture diagrams, there exists an"," ",(0,i.jsx)("a",{href:"https://aws.amazon.com/architecture/icons/",children:"official assortment of AWS service icons"}),", resource icons, supplementary assets, and guidelines. These resources serve as valuable tools in constructing AWS architecture diagrams that are customer-centric and maintain consistency."]}),(0,i.jsx)("p",{children:"Key elements of AWS architecture diagram:"}),(0,i.jsxs)("ul",{children:[(0,i.jsxs)("li",{children:[(0,i.jsx)("i",{children:"Icons:"})," In AWS architecture diagramming, icons play a vital role in visually representing various AWS services, resources, and components. These icons are specifically designed to depict the diverse range of services offered by AWS, making it easier to understand and communicate complex cloud architecture. By incorporating AWS icons into your diagrams, you can effectively illustrate the presence and functionality of different AWS services within your cloud infrastructure",(0,i.jsx)("img",{className:"text-center mx-auto w-full lg:w-[70%] md:w-[70%] sm:w-[80%] w-[100%]  lg:pt-[20px] lg:pb-[20px]",src:"/assets/aws-architecture-diagram/aws-resource-icons.svg",alt:"aws resouce and service icons"})]}),(0,i.jsxs)("li",{children:[(0,i.jsx)("i",{children:"Groups:"})," When creating an AWS architecture diagram, organizing related components and resources into groups is essential for clarity and structure. Groups allow you to logically categorize and visually group together components that belong to the same function, system, or layer within your cloud architecture (Ex. Region -> VPC -> Subnet hierarchy). This helps in presenting a clear and concise representation of your cloud infrastru

1cture, making it easier to comprehend and analyze",(0,i.jsx)("img",{className:"text-center mx-auto w-full lg:w-[50%] md:w-[60%] sm:w-[80%] w-[100%]  lg:pt-[20px] lg:pb-[20px]",src:"/assets/aws-architecture-diagram/aws-groups.svg",alt:"aws groups"})]}),(0,i.jsxs)("li",{children:[(0,i.jsx)("i",{children:"Lines"})," play a crucial role in AWS architecture diagrams as they represent the connections and relationships between various components and resources. These lines depict the flow of data, communication, and dependencies between different elements in your cloud architecture. By utilizing appropriate lines, you can showcase the interaction between components, such as data transfer, network connections, or event triggers, enabling a comprehensive understanding of your cloud infrastructure's dynamics"]})]}),(0,i.jsxs)("p",{children:["Cloudviz.io, our"," ",(0,i.jsx)(c(),{href:"/blog/aws-architecture-diagram-tool",children:"AWS architecture diagram tool"}),", encompasses all the essential elements of AWS architecture diagram. With its intuitive interface and robust features, it allows users to create diagrams that incorporate key elements such as icons, groups, and lines. By following almost all of AWS team guidelines, our tool ensures that the generated diagrams adhere to the recommended best practices and standards set by AWS. Furthermore, Cloudviz.io supports both old and new AWS icon sets, providing users with a wide range of options to accurately represent their cloud infrastructure. Whether you need to create diagrams from scratch or modify existing ones, our tool offers comprehensive support for utilizing the AWS icons in your diagrams."]}),(0,i.jsx)("img",{className:"text-center mx-auto ",src:"/assets/aws-architecture-diagram/generate-aws-diagrams.png",alt:"auto generate aws architecture diagram"}),(0,i.jsx)("h2",{children:"Types of AWS Architecture Diagrams"}),(0,i.jsx)("p",{children:'The term "AWS architecture diagram" encompasses various diagram types that focus on visualizing connections and relationships within the AWS cloud. In most scenarios we can group AWS diagrams in two main groups:'}),(0,i.jsxs)("ul",{children:[(0,i.jsxs)("li",{children:[(0,i.jsx)("i",{children:(0,i.jsx)(c(),{href:"/blog/aws-network-diagram",children:"AWS network diagrams"})}),", that provide a comprehensive overview of the network infrastructure within AWS. This includes diagrams such as the AWS VPC diagram, which illustrates the Virtual Private Cloud and its components and related resources such as subnets, gateways, routers, EC2 instances, load balancers etc. Additionally, the"," ",(0,i.jsx)(c(),{href:"/blog/aws-serverless-architecture-diagram-generation",children:"AWS serverless architecture diagram"})," ","focuses specifically on showcasing the design and flow of serverless applications, highlighting AWS services like AWS Lambda, API Gateway, and event triggers. Additionally, it is worth mentioning that the AWS VPC diagram can be combined with an AWS serverless architecture diagram. This combination allows for a more comprehensive representation of the overall system architecture. By integrating both diagrams, you can visualize the networking infrastructure provided by the VPC along with the serverless components and their interactions within the architecture"]}),(0,i.jsxs)("li",{children:[(0,i.jsx)("i",{children:"Diagrams that are not primarily network related."})," These diagrams serve specific purposes such as security architecture diagrams, which aid in visualizing the different security measures employed within an AWS environment. They showcase elements such as IAM roles, security groups, encryption mechanisms, and monitoring solutions, offering a comprehensive overview of the security posture. Another example within this group is AWS Organizations setup, which involves organizing resources using organizational units and AWS accounts. Additionally, there are CI/CD related diagrams that illustrate the relationships between AWS deployment services such as AWS CodeBuild and CodePipeline, as well as AWS native code versioning services like AWS CodeCommit, or external ones like GitHub, GitLab, and others. These diagrams provide a visual representation of the CI/CD process, showcasing the integration of various tools and services involved in building, testing, and deploying applications on AWS",(0,i.jsx)("img",{className:"text-center mx-auto w-full  w-[100%]  lg:pt-[20px] lg:pb-[20px]",src:"/assets/aws-architecture-diagram/aws-ci-cd-pipeline.svg",alt:"AWS ci/cd pipeline diagram"})]})]}),(0,i.jsx)("h2",{id:"aws-diagram-examples",children:"AWS Architecture Diagram Examples"}),(0,i.jsxs)("p",{children:["With Cloudviz.io, you can leverage our"," ",(0,i.jsx)(c(),{href:"/blog/aws-diagram-templates-library",children:"library of AWS diagram templates"})," ","to expedite the creation of new AWS diagrams."]}),(0,i.jsx)("p",{children:"List of AWS architecture diagram examples:"}),(0,i.jsxs)("ul",{children:[(0,i.jsx)("li",{children:(0,i.jsx)(c(),{href:"#vpc",children:"Simple VPC with Private/Public Subnets"})}),(0,i.jsx)("li",{children:(0,i.jsx)(c(),{href:"#serverless",children:"Serverless Web Application Architecture"})}),(0,i.jsx)("li",{children:(0,i.jsx)(c(),{href:"#vpc-peering",children:"VPC Peering"})}),(0,i.jsx)("li",{children:(0,i.jsx)(c(),{href:"#organizations",children:"AWS Organizations Setup"})}),(0,i.jsx)("li",{children:(0,i.jsx)(c(),{href:"#three-tier-web",children:"Three Tier Web Architecture"})}),(0,i.jsx)("li",{children:(0,i.jsx)(c(),{href:"#two-tier-web",children:"Two Tier Web Architecture"})}),(0,i.jsx)("li",{children:(0,i.jsx)(c(),{href:"#site-to-site-vpn",children:"Site-to-Site VPN Connection"})}),(0,i.jsx)("li",{children:(0,i.jsx)(c(),{href:"#eks-worker-nodes",children:"Amazon EKS and Worker Nodes"})}),(0,i.jsx)("li",{children:(0,i.jsx)(c(),{href:"#linux-bastion-host",children:"Linux Bastion Host"})}),(0,i.jsx)("li",{children:(0,i.jsx)(c(),{href:"#efs",children:"EFS File System and EFS Mount Targets"})}),(0,i.jsx)("li",{children:(0,i.jsx)(c(),{href:"#vpc-endpoint-gateway",children:"VPC Endpoint Gateway"})})]}),(0,i.jsx)("h3",{id:"vpc",children:"Simple VPC with Private/Public Subnets"}),(0,i.jsx)("img",{className:"text-center mx-auto w-full lg:w-[60%] md:w-[60%] sm:w-[80%] w-[100%]  lg:pt-[20px] lg:pb-[20px]",src:"/assets/aws-architecture-diagram/simple-vpc-with-private-public-subnets.svg",alt:"VPC with private/public subnets diagram"}),(0,i.jsx)("p",{children:"Leverage this diagram to jumpstart the creation of your inaugural AWS architecture. Availability zones are horizontally aligned, and related subnets are vertically organized, offering a solid foundation for your design."}),(0,i.jsx)("h3",{id:"serverless",children:"Serverless Web Application Architecture"}),(0,i.jsx)("img",{className:"text-center mx-auto w-full lg:w-[60%] md:w-[60%] sm:w-[80%] w-[100%]  lg:pt-[20px] lg:pb-[20px]",src:"/assets/aws-architecture-diagram/aws-serverless-architecture-without-text.svg",alt:"AWS serverless web application diagram"}),(0,i.jsx)("p",{children:"This diagram presents a high-level example of an AWS serverless web application architecture, showcasing the main steps involved in utilizing various AWS serverless services:"}),(0,i.jsxs)("ol",{children:[(0,i.jsx)("li",{children:"Request is sent from browser for domain name example.com"}),(0,i.jsx)("li",{children:"DNS Resolver retrieves IP address from Route 53 (keep in mind that there are other DNS related queries before this) based on DNS re

1cord for example.com domain"}),(0,i.jsx)("li",{children:"Route 53 has A alias record pointing to CloudFront distribution"}),(0,i.jsx)("li",{children:"Browser sends request towards CloudFront distribution to retrieve static content files. In order to serve content over HTTPS there is generated TLS certificate for example.com in Certificate Manager and specified in CloudFront distribution configuration"}),(0,i.jsx)("li",{children:"CloudFront requests static content files from S3 bucket and static content files are sent back to browser and processed there"}),(0,i.jsx)("li",{children:"Browser sends new requests towards API Gateway to request necessary data (of course all the 1. and 2. steps are executed before in order to get IP address of API Gateway REST API)"}),(0,i.jsx)("li",{children:"API Gateway sends request to Lambda for processing"}),(0,i.jsx)("li",{children:"Lambda processes request and requests data from DynamoDB and then response is sent back all the way to browser"})]}),(0,i.jsx)("h3",{id:"vpc-peering",children:"VPC Peering"}),(0,i.jsx)("img",{className:"text-center mx-auto w-full lg:w-[70%] md:w-[70%] sm:w-[80%] w-[100%]  lg:pt-[20px] lg:pb-[20px]",src:"/assets/aws-architecture-diagram/vpc-peering.svg",alt:"VPC peering diagram"}),(0,i.jsx)("p",{children:"Illustration showcasing a VPC peering architecture involving two requester and accepter VPCs. Demonstrates the inclusion of targeted routes within route tables to establish a secure and private connection between the VPCs."}),(0,i.jsx)("h3",{id:"organizations",children:"AWS Organizations Setup"}),(0,i.jsx)("img",{className:"text-center mx-auto w-full lg:w-[60%] md:w-[60%] sm:w-[80%] w-[100%]  lg:pt-[20px] lg:pb-[20px]",src:"/assets/aws-architecture-diagram/aws-organizations-setup.svg",alt:"AWS organizations setup diagram"}),(0,i.jsx)("p",{children:"This diagram presents a high-level illustration of an AWS Organizations setup utilizing organizational units (OUs) and three AWS accounts. The diagram showcases the implementation of user access management through the utilization of cross-account roles, ensuring secure and controlled access across the organization."}),(0,i.jsx)("h3",{id:"three-tier-web",children:"Three Tier Web Architecture"}),(0,i.jsx)("img",{className:"text-center mx-auto w-full lg:w-[70%] md:w-[70%] sm:w-[80%] w-[100%]  lg:pt-[20px] lg:pb-[20px]",src:"/assets/aws-architecture-diagram/three-tier-web-architecture.svg",alt:"Three tier web architecture diagram"}),(0,i.jsx)("p",{children:"In this example of a 3-tier architecture, the architecture diagram showcases the three essential layers: Presentation, Business Logic, and Data. The Presentation layer is represented by a CloudFront distribution, serving as the front-end, with two origins. One origin points to static S3 assets, while the other connects to a public Application Load Balancer (ALB) responsible for routing requests to EC2 instances, serving as web servers. The Business Logic layer is supported by an internal ALB, which routes requests to private EC2 instances functioning as application servers. Finally, in the Data layer, private RDS instances are depicted, including a master and replica instances, serving as the database backend for the application. Overall, this architecture diagram provides a clear visualization of the different layers and their corresponding components within the 3-tier architecture."}),(0,i.jsx)("h3",{id:"two-tier-web",children:"Two Tier Web Architecture"}),(0,i.jsx)("img",{className:"text-center mx-auto w-full lg:w-[60%] md:w-[60%] sm:w-[80%] w-[100%]  lg:pt-[20px] lg:pb-[20px]",src:"/assets/aws-architecture-diagram/two-tier-web-architecture.svg",alt:"Two tier web architecture diagram"}),(0,i.jsx)("p",{children:"In this example of a 2-tier web architecture, the architecture diagram illustrates the two main layers: Presentation/Business Logic and Data. The Presentation/Business tier is represented by an Application Load Balancer (ALB) that efficiently routes incoming requests to EC2 instances, serving as both web and application servers. In the data layer, private RDS instances are depicted, including a master and replica instances, which handle the storage and management of the application's data. By visually representing this architecture, the diagram provides an overview of the components involved in the Presentation/Business Logic layer and the Data layer, offering insights into how the different layers interact and support the overall functionality of the web application."}),(0,i.jsx)("h3",{id:"site-to-site-vpn",children:"Site-to-Site VPN Connection"}),(0,i.jsx)("img",{className:"text-center mx-auto w-full lg:w-[60%] md:w-[60%] sm:w-[80%] w-[100%]  lg:pt-[20px] lg:pb-[20px]",src:"/assets/aws-architecture-diagram/site-to-site-vpn-connection.svg",alt:"Site-to-site VPN connection diagram"}),(0,i.jsx)("p",{children:"This diagram demonstrates a site-to-site VPN connection between an Amazon VPC and a corporate data center. It showcases the secure channel established between the two, enabling the seamless exchange of data. The diagram provides a visual representation of the VPC, corporate data center, and the VPN tunnel c

1onnecting them, emphasizing the secure and direct communication between the two environments."}),(0,i.jsx)("h3",{id:"eks-worker-nodes",children:"Amazon EKS and Worker Nodes"}),(0,i.jsx)("img",{className:"text-center mx-auto w-full lg:w-[60%] md:w-[60%] sm:w-[80%] w-[100%]  lg:pt-[20px] lg:pb-[20px]",src:"/assets/aws-architecture-diagram/amazon-eks-and-worker-nodes.svg",alt:"Amazon EKS and worker nodes diagram"}),(0,i.jsx)("p",{children:"This diagram illustrates a straightforward setup of an Amazon Elastic Kubernetes Service (EKS) environment with worker nodes represented by EC2 instances. The worker nodes are deployed in private subnets to enhance security. To enable Secure Shell (SSH) access to these nodes, a bastion host is deployed in a public subnet. The diagram provides a visual representation of the network architecture, showcasing the segregation of resources and the utilization of a bastion host for secure remote access to the worker nodes."}),(0,i.jsx)("h3",{id:"linux-bastion-host",children:"Linux Bastion Host"}),(0,i.jsx)("img",{className:"text-center mx-auto w-full lg:w-[60%] md:w-[60%] sm:w-[80%] w-[100%]  lg:pt-[20px] lg:pb-[20px]",src:"/assets/aws-architecture-diagram/linux-bastion-host.svg",alt:"Linux bastion host diagram"}),(0,i.jsx)("p",{children:"The diagram above presents a basic setup of a Linux bastion host environment. The bastion host serves as a secure gateway to allow Secure Shell (SSH) access to EC2 instances that are deployed in private subnets. By employing the bastion host, administrators can securely access and manage the private EC2 instances without exposing them directly to the public internet. This design enhances the overall security of the architecture while providing a convenient and controlled method for remote access to the private EC2 instances."}),(0,i.jsx)("h3",{id:"efs",children:"EFS File System and EFS Mount Targets"}),(0,i.jsx)("img",{className:"text-center mx-auto w-full lg:w-[60%] md:w-[60%] sm:w-[80%] w-[100%]  lg:pt-[20px] lg:pb-[20px]",src:"/assets/aws-architecture-diagram/efs-file-system-and-efs-mount-targets.svg",alt:"EFS file system and efs mount targets diagram"}),(0,i.jsx)("p",{children:"The diagram illustrates an example of a VPC (Virtual Private Cloud) setup with an EFS (Elastic File System) file system. The EFS file system is connected to specific subnets through EFS mount targets, allowing EC2 instances in those subnets to access the shared file storage. Additionally, a bastion host is included in the architecture to enable Secure Shell (SSH) access to the EC2 instances located in the private subnets. The bastion host acts as a secure entry point for administrators to securely connect to and manage the private EC2 instances. This configuration ensures secure access to resources within the VPC while facilitating efficient file storage and management using the EFS file system."}),(0,i.jsx)("h3",{id:"vpc-endpoint-gateway",children:"VPC Endpoint Gateway"}),(0,i.jsx)("img",{className:"text-center mx-auto w-full lg:w-[70%] md:w-[70%] sm:w-[80%] w-[100%]  lg:pt-[20px] lg:pb-[20px]",src:"/assets/aws-architecture-diagram/vpc-endpoint-gateway.svg",alt:"VPC endpoint gateway diagram"}),(0,i.jsx)("p",{children:"The diagram provides an example of a VPC (Virtual Private Cloud) configuration with an VPC endpoint gateway. When an VPC endpoint gateway is created, it is associated with a specific route table within the VPC. In the diagram, the instance located in the public subnet 10.0.2.0/24 can access Amazon S3 directly through the endpoint gateway. On the other hand, the instances in the second public subnet also have access to S3, but their requests will be routed through the internet gateway."}),(0,i.jsx)("br",{}),(0,i.jsx)("br",{})]}),(0,i.jsxs)("div",{className:"text-center",children:[(0,i.jsx)("p",{className:"mt-4 sm:mt-8 inline-block font-light lg:w-[900px] text-cloudviz-blue lg:mt-10 text-xl sm:text-3xl font-[350]",children:"Looking for a tool to automatically generate AWS architecture diagram?"}),(0,i.jsx)("p",{className:"mt-3 inline-block font-light lg:w-[900px] text-cloudviz-blue text-l sm:text-2xl mb-5 ",children:"Try out Cloudviz.io and visualize your AWS cloud environment in seconds"}),(0,i.jsx)("p",{className:"text-center",children:(0,i.jsxs)("a",{href:"https://app.cloudviz.io/signup",className:"inline-flex  text-base font-light sm:text-[20px] border border-cloudviz-blue items-center px-4 py-2 text-cloudviz-blue transition-all duration-200 bg-white rounded-full hover:bg-cloudviz-blue focus:bg-cloudviz-blue hover:text-white focus:text-white",role:"button",children:["Start your free trial",(0,i.jsx)("svg",{className:"w-6 h-6 ml-7 -mr-2",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,i.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"1.5",d:"M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"})})]})})]})]})}),(0,i.jsx)(a.Z,{})]})]})}},function(e){e.O(0,[3996,5675,2708,2888,9774,179],function(){return e(e.s=61013)}),_N_E=e.O()}]);