Isometric architecture diagrams as code: cloud diagrams in SVG from YAML
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…
Isometric architecture diagrams can be generated from code, allowing for easy updates to the system as it changes. This approach keeps the diagram current by storing the system description in a text-based format, such as YAML, and then using a script to redraw the SVG diagram whenever the system changes. The spec defines zones, nodes, and connections, with positions specified in world units on a grid rather than pixels, enabling the drawing code to adjust scale, angle, or style without modifying the spec itself.
The system uses a limited set of node kinds, like client, CDN, load balancer, service, queue, worker, database, and cache, to cover most web systems. Adding a new node kind is straightforward, as it only requires a small drawing function. Diagrams are laid out on a grid and then converted to an isometric view using a simple projection function.
Zones flow from back-left to front-right, with nodes placed inside their zones on the y-axis. The projection involves scaling x and y axes at 30 degrees, with z pointing up, creating depth in the diagram. The code for this projection and additional styling can be found in the provided GitHub repository.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
