Architecture diagrams are drawn in isometric perspective for a reason: zones read as surfaces, hosts stand on them, and routes run along the floor. This page is an ordinary network chart — a layout that places hosts on grid cells and draws straight links — with one prop, perspective, doing everything else. Hover a host to trace its links; switch the view to see the same layout flat.
Skip to data tableTwo hosts need attention: web-prd-1 runs at 81% CPU and demo-bastion fails its health check. The S3 sync link from the internet to Web Storage is failing.
⚠ CPU 81%
⚠ Health check
One prop
The layout above never changes when you switch views: it returns flat ground positions. The chart projects them after layout, keeps the pictograms upright and depth-sorted, lays the zone plates and routes on the ground, and seats each zone's hosts on its plate. Tooltips, keyboard focus, the alert callouts and the accessible table all follow the projected marks.
JSX
import { NetworkCustomChart } from "semiotic/network" import { isometricGlyphs } from "semiotic/network/perspective" <NetworkCustomChart nodes={hosts} edges={links} layout={gridLayout} // flat ground positions + glyph nodes perspective={{ type: "isometric", ground: { grid: { step: 40 } }, regions: [ { id: "dmz", label: "INTERNET FACING", nodes: ["web-prd-1", "web-storage", "bastion"], depth: 10 }, { id: "private", label: "PRIVATE SUBNET", nodes: ["web-prd-2", "web-storage-2"], elevation: 34, depth: 8 } ], edges: { route: "orthogonal-rounded" }, labels: { mode: "ground" }, elevation: "cpu", // optional: lift hosts by a data field transition: { duration: 700 } }} />
Elevation is the only thing perspective adds to the encoding. Here it can lift hosts by CPU load, drawn with drop lines to their ground point so the position stays readable. Everything else is presentation: a flat chart and an isometric one say the same thing. That is also the honest limit of the technique — use it where position is topological or categorical, as in this diagram, not where distance encodes a measured quantity.