Skip to content

Sitemap diagram maker

The page tree, before anyone starts building it. Tab adds a child page, Enter adds a sibling, and the structure you cannot justify becomes obvious quickly.

Browse templates

No account. Saved in this browser until you export it.

Example sitemap diagram maker diagram: the Website sitemap template.

The pieces

What goes on the canvas

Page
One page, with its URL
Section
A group of pages
Form
A page that captures input
Note
A remark about a page

Building one

From blank canvas to finished diagram

  1. 1Start with the homepage and press Tab to add the first top-level section.
  2. 2Enter adds a sibling; Shift+Tab promotes a page that turned out to matter more.
  3. 3Add URLs to the pages so the diagram doubles as a build reference.
  4. 4Collapse sections you have settled to keep the rest readable.

Where it helps

Good uses

  • Website redesigns

    The current structure and the proposed one, side by side.

  • Content audits

    What exists, before deciding what survives.

  • Navigation design

    If it will not fit in a menu, it will not fit in a header.

  • Handover to developers

    The page inventory, agreed in advance.

Questions

Asked often

Can I import a site?
No. That would need to crawl your site from a server, and DiagramDock has none. Sitemaps are built by hand or from a diagram file.
Can I add URLs?
Yes, each page node takes a label and a URL.
How deep should a sitemap go?
Deep enough to expose the structure. Past three or four levels, the diagram usually stops helping.
Does it generate an XML sitemap?
No. This is a diagram of site structure, not a file for search engines.

Draw the page tree

Nothing to sign up for. The diagram stays on this device.