Module 1 / What is system design? / Reading and drawing a system diagram

Lesson8 minModule 1 · lesson 7 of 9

Reading and drawing a system diagram

Boxes, arrows and what they must say.

A diagram is the main way designers talk to each other, so it needs to be read and drawn carefully. A good one answers three questions at a glance: what are the parts, who talks to whom, and what travels along each connection. A bad one is a pile of unlabeled boxes where everyone sees something different.

UserLoad balancerAPI serverCacheDatabaseQueueWorkerHTTPS requestforwardread firston miss /writesslow jobsconsume
A typical web system: boxes are components, arrows are requests.

Read it by following one request. A user's request enters a load balancer, which hands it to one of several API servers. The API checks the cache; if the data is missing it asks the database. Work that does not need to finish before replying, such as sending a confirmation email, is placed on a queue and handled later by a worker. The arrows have direction because it matters who initiates a call: the API calls the database, not the other way round.

How to draw a diagram that others can read

Step 1 of 6

Start from the user

Put the client on the left. Everything is a response to what it asks for.

Also look for what is missing. In the diagram above there is one database and one load balancer. Each is a single point of failure: if it dies, the whole system stops. A reader who sees that can ask the right question early, which is the real purpose of drawing.

Question 1

In the diagram, why does the API server put slow jobs on a queue?

Question 2

What does an unlabeled arrow between two boxes fail to tell you?

Your turn

Draw (describe in words) a diagram for a chat app: users, one server, one database. Then name one single point of failure.

Stuck? List boxes and arrows, then ask what happens if each dies.

What to remember

  1. A diagram shows parts, connections and what travels between them.

  2. Follow one request through the arrows to read it.

  3. Label arrows and mark sync versus async.

  4. Look for single points of failure.

  5. Name boxes by role, not by product.