Diagram template

System architecture diagram template

A clean starting point for showing how your software fits together: clients, the edge, services, data stores and the background work between them.

Use this template for free All templates
  • Clients, CDN and gateway
  • API, database, queue and worker
  • A private network boundary
  • Labelled connections
A system architecture diagram in Starlex with web and mobile apps, a CDN, a gateway, an API, PostgreSQL, a queue and a worker

What is a system architecture diagram?

A system architecture diagram shows the main parts of a software system and how they talk to each other. It helps new engineers find their way, speeds up design reviews and shows where a change will have an effect. Good architecture diagrams pick one level of detail and stay there. The C4 model, for example, puts context, containers, components and code into separate diagrams.

What is in the template

  • Clients: a web app and a mobile app.
  • CDN: the edge that serves traffic over HTTPS.
  • Private network: a boundary around everything that is not public.
  • Gateway and API: the entry point and the service behind it.
  • PostgreSQL: the main database, reached over SQL.
  • Queue and worker: events from the API, processed in the background.

How to adapt it to your system

  1. Rename the boxes to your real services and remove what you do not have.
  2. Label every connection with what travels over it, such as HTTPS, SQL or events.
  3. Use dashed lines for asynchronous traffic and solid lines for requests.
  4. Draw boundaries around networks, accounts or teams.
  5. Put deeper views, such as the inside of the API, on extra pages.

Tips

  • Embed the diagram in the doc that describes the system, so it stays in view and in date.
  • Show which way data flows, not only that two things are connected.
  • Review the diagram whenever an epic changes the architecture.

Use this template in Starlex

Open a project, go to Notes, then Diagrams, choose New diagram and pick System architecture. To add it to a diagram you already have, use Insert, then From template.

  • More than a hundred shapes, with connectors that stay attached when you move things.
  • Pages and layers for large diagrams, and automatic tree, grid and circle layouts.
  • Import draw.io files and Mermaid flowcharts, and export to PNG, SVG or draw.io.
  • Embed the diagram in an issue or a note, where it always shows the latest version.

Frequently asked questions

Which shapes does Starlex have for architecture diagrams?

The diagram editor has more than a hundred shapes, including servers, databases, queues, devices and network symbols, plus containers for boundaries.

Can I import an existing architecture diagram?

Yes. Import a draw.io file or an SVG, or describe the structure as a Mermaid flowchart and let Starlex lay it out.

How do I keep the diagram up to date?

Embed it in the issues and docs that need it. Everyone sees the latest version, and people with access can switch to editing in place.