An architecture diagram shows the parts of a software system and how they connect: the clients, services, data stores, and outside systems, with the paths between them. This template is a worked example, a reference architecture for an e-commerce web app, layered from clients through an edge tier and services down to data, with async workers and third-party integrations. Engineers and architects use it to design and document systems.
An architecture diagram and a flowchart describe a system from opposite angles. An architecture diagram is structural: the components, services, and data stores, and how they connect, a static picture of what the system is made of. A flowchart is procedural: the sequence of steps and decisions in a process, in the order they run. Use an architecture diagram to design and document a system's structure; use a flowchart to map how a single task or process flows.
An architecture diagram is a visual of a software system's structure: its components, services, and data stores, and how they connect. It shows the parts of the system and the paths between them, from a high-level overview down to specific services. Engineers use it to design a system, document how it works, and communicate the structure to other teams and stakeholders.
Common types include the system architecture diagram, which maps the whole system and how its parts connect; the application architecture diagram, which details the internal structure of one application; the deployment architecture diagram, which shows servers, storage, and networks; and the software architecture diagram, which focuses on software components and their relationships. This template is a system-level reference architecture.
Group the system into layers, like clients, services, and data, then place a box or icon for each component and external system. Connect them with arrows for the calls and data flows, and label what each carries. Mark the boundary between your system and third parties. Keep one diagram at a single level of detail, and explode any complex component into its own diagram.
An architecture diagram is structural: it shows the components of a system and how they connect, a static picture of what the system is made of. A flowchart is procedural: it shows the sequence of steps and decisions in a process, in the order they run. Use an architecture diagram to design and document a system's structure; use a flowchart to map how a task or process flows.
This template's board is one: an e-commerce web app. Clients (web and mobile) reach an edge tier with an API gateway and CDN, which routes to services like Catalog, Auth, Orders, and Payments. Those read and write a data tier of Postgres, Redis cache, search, and object storage, while a queue and worker handle async jobs and a third-party email provider sits outside the system.