animdiagram · Gallery

01System design·System Design Interview · news feed, fan-out on write

News feed fan-out

One post becomes N feed entries at write time, so every friend's read is a cache hit.

open .svg ↗ spec.json ↗ loop 8 s

Schedule from spec.json

id	kind	start	end	label / note
m1	packet	0.2	0.7	user publishes a post
m2	packet	1	1.4	post id handed to fanout
m3	packet	1.7	2.1	ask the graph db for friend ids
ph1	phase	0	1.6	1 · POST
m4	packet	2.7	3.1	friend ids come back after a lookup
ph2	phase	1.7	3.6	2 · RESOLVE
m5	packet	3.4	3.9	one message enqueued
m6a	packet	4.7	5.4	worker writes alice's entry
m6b	packet	4.7	5.4	…and bob's, at the same time
m6c	packet	4.7	5.4	…and cara's
ph3	phase	3.7	6.4	3 · FAN OUT
s1	stream			workers never stop draining

Motion used

packets
arrival rings
destination glow
tile glow
simultaneous fan-out
phase captions
ambient stream

Cut from the source

web tier, load balancer, DNS, notification service, user cache and user DB — the read path is a second diagram.

02System design·System Design Interview · rate limiter middleware

Rate limiter

Over the limit, the middleware answers 429 itself; the API servers only ever see the allowed share.

Schedule from spec.json

id	kind	start	end	label / note
r1	packet	0.2	0.6	first request reaches the limiter
r2	packet	0.9	1.2	increment the client's counter
b1	bar	0	5.6	window usage: 2/5 idle, 3/5 after r2, full after r6
r3	packet	1.5	1.8	3/5
r4	packet	2.1	3.1	forwarded to the api servers
ph1	phase	0	3.4	1 · ALLOW
r5	packet	4.6	5	a later request in the same window
r6	packet	5.3	5.6	increment again
r7	packet	5.9	6.2	6/5
r8	packet	6.5	7.5	429
ph2	phase	4.5	7.8	2 · REFUSE

Motion used

packets
labelled packets
growing bar
colour lanes
return corridor
phase captions

Cut from the source

rules store and rule-refresh workers, drop-vs-queue option for refused requests.

03Cloud architecture·Azure Architecture Center · AI agents at scale (AKS + Foundry)

AI agents at scale

The prompt crosses the gateway once; everything after it stays on private endpoints inside the VNet.

Schedule from spec.json

id	kind	start	end	label / note
a1	packet	0.2	0.6	prompt hits the gateway
a2	packet	0.9	1.2	gateway forwards to the agent pod
a3	packet	1.5	1.8	agent asks the models for a plan
a4	packet	2.3	2.6	TOOL
ph1	phase	0	3	1 · PLAN
a5	packet	2.9	3.6	agent retrieves from ai search
a6	packet	4	4.7	DOCS
ph2	phase	3.1	5.2	2 · RETRIEVE
a7	packet	5	5.3	second model call with the docs
a8	packet	5.9	7.1	ANSWER
ph3	phase	5.3	8.2	3 · ANSWER
s1	stream			conversation state written continuously
s2	stream			some tool calls leave through the firewall

Motion used

zone boundary
packets with waypoints
labelled reply
two ambient streams
boundary crossing
phase captions
passive sinks

Cut from the source

load balancer, container registry, key vault, storage, Redis, Entra ID, Monitor / App Insights, private DNS, DDoS plan.

04Cloud architecture·AWS reference architecture · serverless web application

Serverless web app

No server waits for the request; each hop exists, and is billed, only while it runs.

Schedule from spec.json

id	kind	start	end	label / note
w1	packet	0.2	0.6	JWT
w2	packet	0.9	1.2	gateway invokes the function
ph1	phase	0	1.2	1 · INVOKE
ph2	phase	1.3	2.5	2 · COLD START
w3	packet	2.6	3	function writes the item after the cold start
w4	packet	3.3	3.7	dynamodb acknowledges
w5	packet	3.9	4.2	function returns to the gateway
w6	packet	4.5	5.5	201
ph3	phase	2.6	5.4	3 · RUN · RETURN
b1	bar	0	3.9	billed duration grows only while the function runs
s1	stream			static assets keep coming from the cdn

Motion used

packets
labelled packets
cold-start phase
growing bar
return corridor
ambient stream
passive sink

Cut from the source

Cognito user pool (folded into the gateway's authorizer sublabel), Amplify hosting, CloudWatch, DynamoDB streams.

05Cloud architecture·Google Cloud Architecture Center · streaming analytics

Streaming on GCP

The producer is acknowledged immediately; the warehouse write happens later, off the device's clock.

Schedule from spec.json

id	kind	start	end	label / note
e1	packet	0.2	0.6	device publishes an event
e2	packet	0.8	1.2	pub/sub acks the device at once
ph1	phase	0	1.4	1 · PUBLISH
e3	packet	1.5	1.9	dataflow pulls the event
ph2	phase	1.5	2.9	2 · WINDOW
e4	packet	2.9	3.3	streaming insert into bigquery
e5	packet	2.9	3.8	raw copy archived at the same time
e6	packet	4.1	4.5	ACK
ph3	phase	3	5.2	3 · COMMIT
s1	stream			other devices keep publishing
s2	stream			other devices keep publishing

Motion used

packets
immediate ack on the same stroke
simultaneous writes
labelled ack
two ambient streams
phase captions
passive sink

Cut from the source

Looker / BI layer, Bigtable serving path, Dataflow autoscaling, dead-letter topic, IoT Core ingestion.

06System design·System Design Interview · consistent hashing, adding a server

Consistent hashing

Adding a server moves only the keys between it and its predecessor; every other key stays put.

Schedule from spec.json

id	kind	start	end	label / note
k0	packet	0.2	0.8	k0 walks the space to s1
k1	packet	0.9	1.4	k1 to s2
k2	packet	1.5	2	k2 to s3
k3	packet	2.1	3.3	k3 wraps around to s0
ph1	phase	0	4	1 · FOUR SERVERS
join	show	4.4	9.6	s4 joins between s0 and s1 and stays
jp	pulse	4.4	5	join ring on s4
ph2	phase	4.2	5	2 · S4 JOINS
k0b	packet	5.3	5.7	only k0 changes owner: s4 is now next
k1b	packet	5.9	6.3	k1 unchanged
k2b	packet	6.4	6.8	k2 unchanged
k3b	packet	6.9	7.9	k3 unchanged
ph3	phase	5.1	8.8	3 · ONLY K0 MOVES

Motion used

packets with waypoints
wrap-around corridor
tile glow
show window (server joins)
pulse
phase captions
before / after in one loop

Cut from the source

virtual nodes, server removal, replication to the next N servers, the ring drawn as a circle (orthogonal space instead).

07System design·System Design Interview · chat system, long polling

Long polling

Ask once and let the server hold the request until something happens; idle round trips disappear.

Schedule from spec.json

id	kind	start	end	label / note
p1	packet	0.2	0.8	client asks once
held	show	0.9	3.9	request parked until there is something to say
p2	packet	3.6	4.1	MSG
p3	packet	4.3	4.9	NEW
p4	packet	5.1	5.7	client asks again immediately
held2	show	5.8	9.6	parked again, nothing else happens
s1	stream			short polling: a request every second
s2	stream			…and an empty reply every second

Motion used

comparison panels
ambient stream vs story
held-state show window
waiting slot
labelled packets
re-poll chain

Cut from the source

WebSocket alternative, timeout-and-retry on the held request, message persistence, presence.

08Cloud architecture·Google Cloud Architecture Center · RAG-capable generative AI app using GKE

RAG on GKE

Retrieval runs before generation; the model only ever sees a prompt already stuffed with the nearest chunks.

Schedule from spec.json

id	kind	start	end	label / note
q1	packet	0.2	0.6	prompt reaches identity-aware proxy
q2	packet	0.9	1.2	authenticated request to the frontend's chat interface
q3	packet	1.5	1.9	semantic search in pgvector
q3b	packet	1.5	2	responsible ai check runs in parallel
ph1	phase	0	2.8	1 · RETRIEVE
q4	packet	2.4	2.8	CHUNKS
q5	packet	3.1	3.5	contextualized prompt to the inference server
ph2	phase	2.9	5.6	2 · GENERATE
q6	packet	4.7	5.1	ANSWER
q7	packet	5.4	6.6	response returns through the proxy
ph3	phase	5.7	7.6	3 · RESPOND
s1	stream			internal and external sources land raw data in the bucket
s2	stream			ray job reads the bucket over the fuse csi driver
s3	stream			embeddings stored in cloud sql
s4	stream			inference server streams logs, metrics and analytics

Motion used

two subsystems + spanning cluster
packets
parallel safety check
labelled reply
generate phase in amber
return corridor
four ambient streams
inner tiles
passive sinks

Cut from the source

Nothing structural: every box in the source is present (chat interface and Ray parts as inner tiles, logging / monitoring / analytics as one sink with three tiles). Region label and the Google Cloud banner dropped. Over the skill's budget on purpose: 9 story packets, 4 streams.

09Sequence·RFC 7636 · OAuth 2.0 authorization code flow with Proof Key for Code Exchange

PKCE flow

A public client proves it started the flow: the code is useless without the verifier only it holds.

Schedule from spec.json

id	kind	start	end	label / note
n1	show	0.2	11.5	app derives verifier and challenge before anything is sent
m1	packet	0.8	1.3	authorization request carries the challenge, never the verifier
m2	packet	1.7	2.6	auth server shows the login and consent page
m3	packet	3.4	4.3	user authenticates and consents
m4	packet	4.7	5.2	redirect back with the authorization code and the state
ph1	phase	0	5.3	1 · AUTHORIZE
n2	show	5.4	11.5	app checks the state it sent
m5	packet	5.8	6.3	token request: code plus the original verifier
n3	show	6.5	11.5	server hashes the verifier and compares with the stored challenge
m6	packet	6.8	7.3	tokens issued only if the hash matches
ph2	phase	5.4	7.5	2 · EXCHANGE
m7	packet	7.7	8.6	api call with the bearer token
m8	packet	9	9.9	protected resource returned
ph3	phase	7.6	10.2	3 · CALL API

Motion used

sequence layout (lifelines)
eight ordered messages
destination glow on participants
show windows for computations
phase captions
exchange phase in amber

Cut from the source

Refresh-token rotation, token introspection, the attacker's failed replay (told in the caption instead), id_token / OpenID Connect claims, nonce.

10Flowchart·System Design Interview · URL shortener, collision handling

URL shortener

A hash can collide; the flow re-salts and tries again until the short URL is unique, then saves once.

Schedule from spec.json

id	kind	start	end	label / note
f1	packet	0.2	0.6	long url goes to the lookup
f2	packet	0.9	1.2	not in the db: hash it
f3	packet	1.5	1.8	check the short url for a clash
ph1	phase	0	2.3	1 · LOOKUP · MISS
f4	packet	2.3	2.7	clash: go re-salt
f5	packet	3	3.6	back to the hash function
f6	packet	3.9	4.2	second short url checked
ph2	phase	2.4	4.6	2 · CLASH · RE-SALT
f7	packet	4.7	5	unique this time: save
f8	packet	5.3	5.6	done
ph3	phase	4.7	6.4	3 · UNIQUE · SAVE

Motion used

flowchart layout (pills, boxes, diamonds)
decision branches with YES / NO labels
retry loop in amber
one token walks the path
untaken branch drawn cold
phase captions

Cut from the source

Bloom filter before the DB lookup, the pre-generated key service alternative, rate limiting, the read path (short → long redirect).

DIAGRAMS THATEXPLAIN IN TIME

News feed fan-out

Rate limiter

AI agents at scale

Serverless web app

Streaming on GCP

Consistent hashing

Long polling

RAG on GKE

PKCE flow

URL shortener

DIAGRAMS THAT
EXPLAIN IN TIME