Whimsical LogoWhimsical LogoWhimsical Logo

Brand
Get all logo versions.
Download

Architecture Diagram

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.

A layered reference architecture: clients, edge, services, data, plus async and third-party.

What's included

  • A worked e-commerce architecture. A full reference design for an online store, mapped end to end.
  • Layered structure. Clients, Edge, Services, Data, Async, and Third-party, grouped top to bottom.
  • Real components. API gateway, CDN, Catalog, Auth, Orders, Payments, Postgres, Redis cache, search, object storage, a queue and worker.
  • Labeled connections. Arrows naming what flows between parts, like static assets and cache.
  • Grouped layers. Each tier is a labeled container you relabel for your own stack.

Why draw an architecture diagram?

  • Design before you build. Moving a box on a diagram is free; re-platforming later is not.
  • Onboard engineers fast. A new hire sees the whole system in one picture instead of reading the whole repo.
  • Spot single points of failure. A lone database or gateway is obvious on the diagram.
  • Align on the design. Engineers, ops, and stakeholders argue from the same picture.
  • Document for the 2am page. The diagram is the map when something breaks and nobody remembers how it connects.

How to use this template

  1. Set the layers. Group the system into tiers: clients, services, data, and so on.
  2. Place the components. Drop a box or icon for each service, store, and external system.
  3. Connect them. Draw arrows for the calls and data flows between components.
  4. Label the connections. Name what each arrow carries: requests, events, cached data.
  5. Mark the boundaries. Show what's yours and what's a third-party or external system.
  6. Keep it at one level. One diagram per altitude; explode a component into its own diagram if needed.

Architecture diagram vs flowchart

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.

Frequently asked questions

  • 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.