Isometric
<isometric> arranges its children in a scene rather than on the page: each <layer> is a plane floating above the next, its contents lying in that plane, and <link> draws the prism joining an object on one plane to one below. The whole projection is a single matrix over each plane's own flat coordinates — x = u − v, y = (u + v) / 2 for the classic 2:1 isometric. It rides on one group per layer, so the rectangles and their labels are projected together; nothing here computes a sheared glyph by hand. Two things the engine works out that are easy to get wrong by hand. A square tile is twice as wide once projected, so spacing has to be reckoned in screen units — space by the tile's own side and they overlap while looking right in the source. And the planes are separated by the edges that actually meet, not by the box around a plane: that box is mostly the empty air beside a parallelogram, so spacing by it charges every layer for a whole diagonal of blank paper. The draw order is the other half: a prism passes behind the tile it hangs from and in front of the one it lands on, which reads as depth. The scene's own order (panels, edges, shapes, labels) cannot express that, so an <isometric> is a figure and owns the order of its parts.
Result
Source examples/isometric.svgn
<diagram padding="28" theme="light">
<!-- `<isometric>` arranges its children in a *scene* rather than on the page:
each `<layer>` is a plane floating above the next, its contents lying in
that plane, and `<link>` draws the prism joining an object on one plane
to one below.
The whole projection is a single matrix over each plane's own flat
coordinates — x = u − v, y = (u + v) / 2 for the classic 2:1 isometric.
It rides on one group per layer, so the rectangles *and their labels* are
projected together; nothing here computes a sheared glyph by hand.
Two things the engine works out that are easy to get wrong by hand. A
square tile is twice as wide once projected, so spacing has to be
reckoned in screen units — space by the tile's own side and they overlap
while looking right in the source. And the planes are separated by the
edges that actually meet, not by the box around a plane: that box is
mostly the empty air beside a parallelogram, so spacing by it charges
every layer for a whole diagonal of blank paper.
The draw order is the other half: a prism passes *behind* the tile it
hangs from and *in front of* the one it lands on, which reads as depth.
The scene's own order (panels, edges, shapes, labels) cannot express
that, so an `<isometric>` is a figure and owns the order of its parts. -->
<isometric>
<layer label="edge">
<rect id="cdn" label="cdn"/>
<rect id="waf" label="waf"/>
</layer>
<layer label="app">
<rect id="api" label="api"/>
<rect id="worker" label="worker"/>
<rect id="queue" label="queue"/>
</layer>
<layer label="data">
<rect id="postgres" label="postgres"/>
<rect id="redis" label="redis"/>
</layer>
<link from="cdn" to="api"/>
<link from="waf" to="worker"/>
<link from="api" to="postgres"/>
<link from="worker" to="redis"/>
</isometric>
</diagram>