1.2 KiB
19 · Map / Diagram
A single large spatial diagram organises the page — flowchart, floor plan, network graph, system map. Information is laid out spatially, not linearly.
- Heading: a small orientation phrase above or beside the map.
- Body: the map itself; nodes and edges; a legend somewhere.
- Divider: the diagram has no internal sections — it's one composition.
- Button: node-internal links; one outlined CTA below the map.
- Image: the map IS the image; SVG with interactive hovers.
- Reveal: node-by-node ink-on as the user enters viewport (cap to 5 nodes).
Reach for it for system overviews, ecosystem maps, process diagrams, organisation charts.
Avoid as a substitute for narrative. Some stories shouldn't be read spatially.
Reference: process visualisation sites, ecosystem maps, knowledge-graph products.
Sample opening lines (imitate the specificity — Map / Diagram openings name the path or the territory):
"Browser → API → Database. Where Tracejam fits." — names the layers, names the position "From stdin, through the pipe, into your dashboard." — labels the spatial flow on the page below "Three tiers · two regions · one ledger." — counts the system, geographic + structural