The Machine

How it works

Each system is a data object - nodes grouped into layers, edges defining connections. No hand-drawn SVG, no image files. The diagram is built from structure.

// each system defines its architecture as data
{
title: 'How a Web Page Loads',
desc: 'Your browser checks its cache, resolves DNS...',

// nodes are organized into semantic layers
// mermaid renders them as subgraphs
layers: [
  { name: 'Client', nodes: [
    { id: 'BR',  label: 'Browser' },
    { id: 'CA',  label: 'Browser Cache' }
  ]},
  { name: 'Resolution', nodes: [
    { id: 'DNS', label: 'DNS Resolver' },
    { id: 'TLS', label: 'TLS Handshake' }
  ]},
  // ...more layers
],

// edges define data flow between nodes
// the animation follows these in order
edges: [
  { f: 'BR',  t: 'CA',  l: 'check cache' },
  { f: 'CA',  t: 'DNS', l: 'cache miss' },
  { f: 'DNS', t: 'TLS', l: 'IP address' },
  // ...more edges
]
}

At render time, this data compiles into Mermaid flowchart syntax - subgraphs for layers, styled nodes, labeled edges. Mermaid handles the layout algorithm and SVG generation.

// compiled output sent to mermaid.render()
flowchart TD
subgraph sg0["Client"]
  BR(["Browser"])
  CA(["Browser Cache"])
end
subgraph sg1["Resolution"]
  DNS[/"DNS Resolver"/]
  TLS[/"TLS Handshake"/]
end
BR -->|check cache| CA
CA -->|cache miss| DNS
DNS -->|IP address| TLS

The animation system walks the SVG after mermaid renders it. Nodes start invisible, then fade in one by one. Edges draw themselves using stroke-dashoffset transitions. Arrowheads are hidden until their edge finishes drawing. The whole sequence chains through setTimeout callbacks - each step triggers the next.

10 systems. Animated on scroll, instant on shuffle. All generated from ~500 lines of data.