Explore the examples

Client-server architecture

Persistent WebSocket connection: we see the client code and the hub code, then a SendAll broadcasting the message to all connected clients.

Auth and Data behind Nginx, each with its database: authentication (JWT) then data request.

The web server returns HTML then JavaScript; the rendered shell waits for the data, which the Web API serves as JSON.

Diffie-Hellman key exchange on a public channel eavesdropped by Eve: she sees the public values pass by but cannot reconstruct the shared key.

ClientHello / ServerHello, certificate validation, session key derivation, then switch to encrypted channel for application data.

Delegated login: redirection to the authorization server, single-use code, exchange for a token on the back channel, then API call.

A single machine floods the server with requests until it saturates; the legitimate user is then denied service. Since everything comes from one IP, the attack stays blockable.

A command-and-control server (C&C) orders a botnet to attack: every bot floods the target simultaneously. With traffic coming from thousands of IPs, you cannot just block one address.

A reverse proxy caps requests per IP: the single-source flood is rejected with 429 at the edge, the backend stays healthy and the legitimate user keeps being served.

All traffic flows through a filtering edge (Cloudflare/Anycast-style) that absorbs the volumetric flood and drops the bots; only the legitimate request reaches the origin, which never sees the attack.

The resolver queries the root, the TLD and then the authoritative server in turn before returning the IP address to the browser (and caching it).

From git push to deployment: webhook, tests and build in the runner, publishing the image to the registry, then deploying to production.

Circular layout: a candidate requests votes from followers, gets the majority, becomes leader then maintains authority via heartbeats.

A producer publishes an event in a broker, which distributes it to multiple workers; each processes then acknowledges.

The same resource requested twice: first call is a cache MISS (goes to origin), second is a cache HIT served immediately from the edge.

Three successive requests distributed to different backends; the fourth loops back to the first.

From kubectl apply to Running pod: the API Server persists the desired state in etcd, the scheduler picks a node, the kubelet starts the container.

Payment intent, bank authorization with strong authentication, then asynchronous shop confirmation via webhook.

A signed transaction joins the mempool, multiple miners search for the nonce, one forges the block and propagates it to the network.

From Alice's client to Bob's inbox: SMTP dispatch, MX record resolution, relay between mail servers, then IMAP retrieval.

A single request split by the gateway to multiple subgraphs, whose responses are recomposed into a single object.

Delivery fails twice (receiver unavailable) then succeeds; the dead times between attempts materialize the exponential back-off.

Circular layout: a central orchestrator distributes a command to satellite services then aggregates their confirmations.

Inserting a red leaf under a red parent whose uncle is also red: rebalancing is a pure recoloring (parent and uncle to black, grandparent to red), no rotation. Showcases the set_color action.

The rotation case: inserting a red node under a red parent whose uncle is black. Recoloring alone is not enough — it takes a rotation then a recoloring. Combines the rotate_subtree and set_color actions.

Inserting 10, 20, 30 degenerates into a right-leaning chain (balance factor −2). A single left rotation rebalances it. Showcases direction:'tree' and the rotate_subtree action (nodes glide to their new depth).

Searching a key in a binary search tree: a token descends from the root, compares at each node and branches left or right until it finds the value. Shows the step-by-step O(log n) descent.

Inserting a key into a binary search tree: the new key arrives as an orphan and walks down step by step, comparing at each node, until the empty slot where the node is then created.

Dijkstra's algorithm on a free weighted graph (direction:'graph', nodes placed via x/y). It settles the nearest unvisited node in turn; each step recolours the node and the edge it was reached through, growing the shortest-path tree to the target.

A* on a grid (direction:'graph', nodes placed via x/y): Dijkstra guided by a heuristic h(n) = Manhattan distance still to go. It always expands the node with the smallest f = g + h, so the search heads straight for the goal without exploring the sideways cells.

Kruskal's algorithm (direction:'graph'): sort the edges by weight and add the cheapest one that does not form a cycle, until all six nodes are linked by five edges. Accepted edges turn green; those that would close a cycle are skipped.

The App ↔ DB segment is used in both directions simultaneously: the engine automatically offsets the paths into parallel lanes.

Full lifecycle of a push notification: how Alice's device registers its delivery address (the FCM token), then how a message sent by Bob is routed to her, even if her app is closed.

A battery/switch/resistor/LED series loop on `direction: circuit`: orthogonal wires between named terminals, closing the switch (`toggle`), then animated current (`flow`) and the LED lighting up.

Two LEDs in parallel on `direction: circuit`: the current (`flow`) splits at the junction, feeds both branches at once, then recombines.

Explains the difference between voltage (potential difference, across), current (amperage, through), resistance and power (V·I) on a series circuit with an ammeter and a voltmeter.

The six core logic gates (AND, OR, XOR, NAND, NOR, NOT), fed the same inputs, with each one’s rule and output.

A complete digital diagram: two bits A and B added by a XOR (sum) and an AND (carry), stepping through all four combinations.

The half-adder rebuilt from NAND gates alone (the "universal" gate): five NANDs reproduce the XOR (sum) and AND (carry).

The half-subtractor (A − B) from NAND gates alone: five gates give the difference (XOR) and the borrow (A′·B), mirroring the half-adder.

The full adder (A + B + carry) from nine NAND gates: two XORs for the sum, the carry reusing their inner terms. The cell of every adder.

The full subtractor (A − B − borrow) from eleven NAND gates: a double XOR for the difference, the borrow reusing the XOR’s inner terms.

Two cross-coupled NAND gates form a latch — one bit of memory. Active-low inputs stepping through set, reset and hold (the memory).

What is INSIDE a NAND gate: two pMOS in parallel above, two nMOS in series below. The conducting transistors light up for each input combination.

A resistor charges a capacitor: the transient response, the time constant τ = R·C, the exponential voltage rise, and the current stopping once charged.