Nested Zones (HTML/CSS)
Best for: a deployment where containment is the message — which instances sit in which zone, which zones make up a region, and what spans all of them
Avoid when: the reader needs call paths between services → use request-paths.md; or there is only one environment → a flat layer-stack.md reads faster
Answers: what runs where, what fails together when a zone fails, and what is deliberately outside every boundary
Data Shape
A tree of three levels — global, region, zone — with the leaf boxes being what actually runs. The nesting is the information: two instances in the same dashed box fail together, two in different boxes do not.
Key Options
| Option | Effect |
|---|---|
border-style to separate boundaries from things inside them |
Every level of containment is a real boundary; a solid border claims ownership, a dashed one disclaims it |
| A status chip in the region heading | Answers "is this the live one" without the reader counting instances |
Instance counts in the leaf text (API ×4) |
A topology diagram that does not say how many is a sketch |
| A separate band for managed services | The most common misreading of a deployment diagram is that everything shown is operated by the team |
| Three zones per region, drawn as a fixed grid | Zone symmetry is a design property worth showing; a ragged grid hides an unbalanced region |
Pitfalls
- ❌ Nesting more than three levels → ✅ global/region/zone is already at the limit of what a page can show; the fourth level belongs in a table
- ❌ Putting managed services inside a zone → ✅ they are not in your failure domain, and drawing them there teaches the reader something false
- ❌ Using a different hue per region → ✅ regions differ by label and status, not by colour; hue is for categories, and these are not categories
- ❌ Omitting instance counts → ✅ the reader will ask, and a diagram that cannot answer sends them elsewhere
- ❌ Drawing this with connectors as well → ✅ containment already encodes reachability; arrows on top of nesting is two diagrams fighting
Alternatives
| Variant | Use instead |
|---|---|
| Call paths between the services in these zones | request-paths.md |
| The layers alone, with no geography | layer-stack.md |
| The layers plus what wraps them, still no geography | layered-with-wings.md |