# 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:

![Site map diagram](https://help.gocapable.com/images/att1418133636.svg)

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](https://help.gocapable.com/diagrams/guides.html).

---

## Related

[Floor planWalls, doors and furniture, to scale.](https://help.gocapable.com/diagrams/floor-plan.html)

[Office seating chartWho sits where, kept current.](https://help.gocapable.com/diagrams/office-seating-chart.html)

[ExamplesWorking diagrams you can copy.](https://help.gocapable.com/diagrams/examples.html)

---

_Fidelity is a choice, so choose it._