Site map diagram

A site map shows structure: which pages exist, how they nest, and how somebody navigates between them. It is the diagram to draw before an information architecture argument, not after.

Because it is a tree, it generates itself from indented text and stays tidy as it grows.

#When to reach for one

Planning or restructuring a website or documentation space.
Agreeing navigation before anybody builds it.
SEO and content work, where depth from the home page matters.

#How to draw it in Capable

Route	Use when
Mermaid	A tree from text; adding a page is one line.
draw.io	When you want to annotate each node with owners or status.

#A worked example

A documentation site map, three levels deep:

The source, which you can paste into a new diagram and edit:

flowchart TD
  H([Home]) --> P[Product]
  H --> D[Docs]
  H --> S[Support]
  H --> A[About]
  P --> P1[Features]
  P --> P2[Pricing]
  P --> P3[Integrations]
  D --> D1[Get started]
  D --> D2[Guides]
  D --> D3[Reference]
  D2 --> D2a[Editors]
  D2 --> D2b[Diagram types]
  S --> S1[Contact]
  S --> S2[Status]

#A few things that catch people out

Depth from the home page is worth marking; anything four clicks deep is effectively hidden.
Link each node to the page or spec it represents where you can.
For a site map generated from your actual content rather than drawn, see the space graph in Guides.

Floor plan

Walls, doors and furniture, to scale.

Office seating chart

Who sits where, kept current.

Examples

Working diagrams you can copy.

Fidelity is a choice, so choose it.