Five servers on a whiteboard elect a leader and replicate a log. Now break them.
Five servers run the real Raft protocol on an event-driven clock: randomized election timeouts drain as rings, RequestVote and AppendEntries fly as envelopes, and every server's log grows as blocks colored by term, hatched until a majority stores them and solid once committed. Votes go only to candidates whose logs are up to date, a new leader appends a no-op so older entries can commit, and followers with a conflicting suffix truncate it before appending. Cut the network and the stranded leader keeps accepting writes that can never commit while the majority elects a new one; heal it and the old leader steps down and its stale entries are erased. A space-time diagram traces every message, lane and term as it happens.
Try it. Click a server to crash or revive it. Drag across the board to draw a partition, and click the line to heal it. Buttons or keys: C crash the leader, P partition, H heal, V revive all, W client write, + and - for speed, Space to pause, R for a fresh cluster. Left alone, it tours partitions, crashes and lost majorities.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an interactive visualization of the Raft consensus algorithm with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Draw five servers in a circle. Each has a role (follower, candidate or leader), a current term, its vote for this term, and a log of entries tagged with their term.
- Drive everything with an event queue: a list of events sorted by simulated time (a message arriving, an election timer firing, a heartbeat timer firing). Each frame, advance the clock and handle every event that is now due, in order.
- Give each follower a randomized election timeout (say 1.5 to 3 seconds). When it fires, the follower becomes a candidate, increments its term, votes for itself and sends RequestVote to everyone. Grant at most one vote per term. Whoever gets three votes becomes leader and sends empty AppendEntries as heartbeats, which reset everyone's timers.
- Messages take a few hundred milliseconds to arrive. Draw them as envelopes moving between servers, and each election timer as a draining ring.
- Let a click crash or revive a server.
Once that works, make it real and beautiful:
- Add log replication: the leader sends prevLogIndex and prevLogTerm with its entries, followers reject on a mismatch, and the leader steps nextIndex back until the logs agree. Commit an entry once a majority has it and it is from the current term.
- Only vote for candidates whose log is at least as up to date as yours.
- Draw each log as a row of blocks colored by term: hatched until committed, solid after.
- Let me drag a line across the canvas to partition the network, so messages that cross it are dropped.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a space-time diagram of every message, a client that retries when the leader disappears, or log compaction with snapshots.
