Originally published on Homingo Learn .

An isometric architecture diagram that lives in the repo, diffs in review and redraws itself when the system changes. The spec, the layout rules and a small generator in plain JavaScript.

Drawn from the YAML file in this guide, by the method in this guide (with a few extra panels per shape).

Isometric architecture diagrams are popular for a reason: a system drawn as zones and machines on a floor reads like a place, and people remember places. Most of them are made in drag-and-drop editors, though, and an exported PNG goes stale the week the system changes. Text-based tools such as Mermaid, D2 or Graphviz stay current but draw flat boxes. This guide joins the two: a short YAML file describes the system, and a script of a few hundred lines draws the isometric SVG from it, every time, in CI.

Describe the system, not the picture

The spec names zones, nodes and connections.…