Treemap Layout Grammar & Editorial Diagram Guide

Compare parts of a whole within a hierarchy.

When to use this diagram

Compare parts of a whole within a hierarchy. Choose this grammar when that relationship is the main question your reader needs to answer. Establish the scope and the audience before adding detail; if ownership, timing, or quantity is the real question, compare the neighboring diagram families in the directory.

How to organize the layout

Make rectangle area proportional to the stated measure. Use containment for hierarchy and keep tiny labels outside boxes that cannot hold them.

What to put in your source

Provide the hierarchy, nonnegative values, and units. Explain the aggregation rule and do not use unrelated color categories as a second hidden hierarchy. Keep the source specific and review the generated result against those facts before sharing it.

The 6 Editorial Diagram Design Principles & Geometry Laws

4px Grid: Align node coordinates, widths, heights, and corner radii to multiples of four. A shared grid makes tiers line up, gives labels predictable clearance, and lets small manual adjustments remain consistent.
Orthogonal r=8 Elbows: Route off-axis architecture and flow connectors through horizontal and vertical segments with 8px rounded turns. Keep arrows away from labels. Charts such as Sankey and polar plots retain the curves their data encoding requires.
Single Accent Focal Rule: Choose a primary decision, integration point, or bottleneck as the visual focus. Reserve coral for that story and keep supporting components quiet. Labels and shapes must still communicate meaning when color is removed.
5 Semantic Color Tokens: Use --paper for the canvas, --ink for primary text, --muted for annotations, --soft for quiet boundaries, and --accent for emphasis. Change the palette without changing what each visual role means.
Instrument Serif + Geist Typography: Set editorial headings in Instrument Serif, component names in Geist, and technical annotations in Geist Mono. Distinct text roles separate the diagram’s story from implementation details without adding decoration.
WCAG AA Brand Extraction: Enter a public brand URL to extract the five-color palette. The extractor checks ink against paper at a minimum 4.5:1 contrast ratio and corrects that pair when needed. Review the full diagram separately for accessibility.