Draw a System Architecture Diagram on a Whiteboard

To draw a system architecture block diagram on a whiteboard, pick one level of detail first. For most conversations that is the C4 container level: boxes for each application and data store, arrows labelled with what flows between them, and the people and outside systems around the edge. Write the question the diagram answers at the top, add a legend, and stop at about a dozen boxes.

That takes about 20 minutes once you know the order to work in. This post gives the order, the four C4 levels it comes from, a worked example, and an honest comparison of the AI tools that now promise to draw the diagram for you: Miro AI, Eraser's DiagramGPT and tldraw. We draw these diagrams at the start of every product we build, mostly on a shared whiteboard during a call, so the method below is the one we actually use.

What a system architecture diagram should show

A system architecture diagram answers one question about a software system for one audience. "How does a payment get from the checkout to the bank?" is a question. "Everything about our platform" is not, and a diagram that tries to answer it ends up with forty boxes nobody can read.

Three things belong on almost every block diagram:

The boxes. Each one is something that runs or stores data: a web app, an API, a worker, a database, a queue.
The arrows. Each one is a relationship with a direction and a verb: "sends orders to", "reads from", "publishes events to".
The edges of the system. The people who use it and the external systems it depends on, such as a payment provider or an email service.

What usually does not belong is infrastructure detail (load balancers, subnets, availability zones) unless the question is about deployment, and code detail (classes, functions) unless the question is about one component.

The four C4 levels, and which one belongs on the whiteboard

The C4 model, created by Simon Brown and documented at c4model.com, is the most useful way we know to decide how much to draw. It describes a system at four levels of zoom, plus supplementary views for landscape, dynamic behaviour and deployment.

C4 level	What the boxes are	Who it is for	Good on a whiteboard?
1. System context	Your system as one box, with users and external systems around it	Everyone, including non-technical people	Yes; the best first drawing
2. Container	Applications and data stores inside your system: web app, API, worker, database	Developers, architects, technical leads	Yes; the most common block diagram
3. Component	The main parts inside one container: modules, services, controllers	Developers working on that container	Sometimes, for one container at a time
4. Code	Classes, interfaces, tables	Developers, usually generated from code	Rarely; draw it from the code instead

In practice we draw level 1 in the first five minutes of a project kickoff, then spend the rest of the session on level 2. Level 3 appears when one container is complicated enough to argue about. We almost never draw level 4 by hand.

How to draw a block diagram on a whiteboard in 20 minutes

This method works on a physical whiteboard, an online canvas or paper. The timings assume a system of moderate size, such as a SaaS product with a web front end, an API, background jobs and a few third-party services.

Minutes 0 to 3: write the question at the top

Write one sentence at the top of the board: what this diagram is meant to answer, and for whom. "How a booking is created and confirmed, for the new backend developer" is enough. Every box you add later has to help answer that sentence.

Minutes 3 to 8: draw the people and outside systems

Around the edges, draw the people (customers, staff, admins) and the external systems (payment provider, email service, calendar API). Use a different shape or colour for anything you do not own. This is your system context, and it often surfaces a dependency someone had forgotten.

Minutes 8 to 14: draw the containers

In the middle, draw one box per running application or data store. Give each box three lines: a name, its technology in brackets, and one sentence on what it does. "Booking API (Node.js) - creates and confirms bookings" beats a box labelled "API". Keep it to about twelve boxes; if you need more, you are drawing two diagrams.

Minutes 14 to 18: draw the arrows with verbs

Connect the boxes, one arrow per relationship, pointing in the direction of the request or the data. Label every arrow with a verb and, where it matters, the protocol: "sends confirmation via (SMTP)", "reads availability from (JSON over HTTPS)". An unlabelled arrow is where the misunderstandings live.

Minutes 18 to 20: add a legend, a title and a date

Add a small key explaining your shapes, colours and line styles, a title that says which C4 level this is, and today's date. The date matters more than it seems: a diagram without one gets trusted long after it stops being true.

Notation rules that keep a block diagram readable

One shape per kind of thing. Rectangles for applications, cylinders for databases, a person icon for people. Do not mix meanings.
Colour means ownership, not decoration. For example, your systems in one colour and third-party systems in grey.
Arrows point one way. If two boxes talk both ways, draw two arrows with two verbs.
No orphan boxes. Every box has at least one arrow, or it does not belong on this diagram.
Group with boundaries, not proximity. Draw a dashed box around the things inside your system so the edge is explicit.
Write labels, not acronyms. "PSP" means something different to each person in the room.

A worked example: a booking product at the container level

Here is the level 2 diagram we would draw for a simple booking product, described in words so you can sketch it alongside.

At the top: "How a booking is created and confirmed, for a new backend developer. C4 container level. 28 October 2026."

On the left, a person: Customer. On the right, three grey external systems: Payment provider, Email service and Google Calendar.

Inside a dashed boundary labelled "Booking system", five boxes:

Web app (Next.js) - shows availability and takes the booking.
Booking API (Node.js) - validates and creates bookings.
Worker (Node.js) - sends confirmations and syncs calendars.
Database (PostgreSQL) - stores bookings, customers and availability.
Queue (Redis) - holds jobs for the worker.

Arrows: Customer "books a slot using" Web app; Web app "creates booking via (HTTPS)" Booking API; Booking API "reads and writes" Database; Booking API "takes payment through" Payment provider; Booking API "enqueues confirmation job on" Queue; Worker "picks up jobs from" Queue; Worker "sends email through" Email service; Worker "creates event in" Google Calendar.

That is nine boxes and eight arrows, and a new developer can read it in under a minute.

Whiteboard or AI generator: Miro AI, Eraser DiagramGPT and tldraw compared

Search demand for "block diagram whiteboard AI" has grown because several tools now generate a first draft from text. A generated draft saves the drawing time, not the thinking time: you still need to know the question, the level and the boxes. Facts below are from each vendor's own pages, as of October 2026.

Tool	What the AI does	Price as of October 2026	Best for
Miro AI	Generates an editable diagram on the board from a prompt or from existing stickies and sketches; types listed include flowcharts, ER, mind maps, UML sequence and class	Free plan: 3 editable boards, 10 AI credits a month; Starter $8 a member a month billed yearly with 25 credits; Business $20 with 50 credits	Workshops where the team already uses Miro
Eraser DiagramGPT	Generates flowcharts, ER, cloud architecture, sequence and BPMN diagrams from a text prompt; edit afterwards as shapes or diagram-as-code	Free: 3 files, 3 AI credits; Business $45 a member a month billed annually ($60 monthly), 100 credits	Engineering architecture diagrams that live in docs
tldraw	tldraw.com is a free whiteboard; the tldraw SDK ships an agent starter kit developers can use to build an AI that draws on the canvas	Whiteboard free; SDK licence priced on application, 100-day trial	Sketching, and teams building their own canvas product

Miro AI

Miro's AI diagram generator takes a prompt, or a cluster of sticky notes already on the board, and produces a fully editable diagram. Each generation uses one credit, and the Miro pricing page lists 10 credits a month on Free, 25 a member on Starter and 50 on Business. Miro does not list a dedicated C4 or architecture type; you get there through flowchart and UML options and some editing. It is a good choice if the diagram is part of a workshop board the team already uses.

Eraser DiagramGPT

Eraser's DiagramGPT is the most engineering-focused of the three. It lists cloud architecture as one of its five diagram types, and every result can be edited as shapes or through Eraser's diagram-as-code syntax, which is handy when a label is faster to fix in text. The Eraser pricing page shows 3 AI credits on the free plan, which is enough to try it, not to rely on it.

tldraw

tldraw is a fast, free whiteboard with a hand-drawn look that suits early sketches. Its AI story is for developers: the tldraw SDK includes an agent starter kit for building an AI that reads and edits the canvas, and the tldraw licence page prices the SDK on application. We could not find a built-in AI diagram generator on tldraw.com itself documented on the vendor's pages, so we do not rate one here.

For a wider comparison that also covers Visual Paradigm and Mermaid written by an LLM, see our post on AI block diagram tools.

Where Atrix whiteboards fit, and what they do not do

Atrix is the tool we build, so the limits come first. Atrix pages can hold Excalidraw whiteboards as blocks, started blank or from thirteen templates that include architecture and flowchart. Drawing on them is manual: there is no text-to-diagram generation on the Atrix whiteboard. What you get instead is the diagram sitting under the paragraph that explains it, inside a page attached to the project, with live co-editing, comments and version history.

The AI side of Atrix works on the writing, not the drawing. A Develop run takes a brief and produces requirements, an architecture document and planned issues; the architecture document is text, and we draw the container diagram from it on the whiteboard in the same page. The docs and whiteboards page describes exactly what the whiteboard does, and the AI agent page describes what a Develop run produces. If you want a tool that draws the diagram from a prompt, use Miro AI or Eraser and link the result from your doc.

For the document that usually surrounds the diagram, see how to write an architecture doc with AI.

FAQ

What is a block diagram in software architecture?

A block diagram shows the main parts of a system as boxes and the relationships between them as arrows, without implementation detail. In C4 terms, most software block diagrams are system context or container diagrams.

What is the best way to draw an architecture diagram on a whiteboard?

Write the question the diagram answers, draw the people and external systems first, then the containers in the middle, then labelled arrows, and finish with a legend and date. Keep it to about a dozen boxes at one level of detail.

Can AI draw a system architecture diagram?

Yes, as a first draft. Miro AI and Eraser DiagramGPT generate editable diagrams from a text prompt, and any LLM can write Mermaid code you render elsewhere. You still need to check every box and arrow, because the draft only reflects what you described.

What is the C4 model?

The C4 model, by Simon Brown, describes software architecture at four levels: system context, container, component and code. Each level zooms in on the one above. It also defines supplementary diagrams for system landscape, dynamic behaviour and deployment.

Does Atrix generate diagrams from text?

No. Atrix has Excalidraw whiteboards inside pages, including an architecture template, and drawing on them is manual. Its AI agent writes architecture documents as text, which you can diagram on the whiteboard in the same page.

Next step

Open a page, drop in a whiteboard from the architecture template, and draw your system's container diagram using the 20-minute method. The docs and whiteboards page shows how pages and whiteboards fit together.

Sources

Checked in October 2026: C4 model, Miro AI diagram generator, Miro pricing, Eraser DiagramGPT, Eraser pricing, tldraw, tldraw licence.

How to draw a system architecture block diagram on a whiteboard in 20 minutes, and when AI helps