How to Make a Sitemap Diagram for a Website in 6 Steps

Published November 1, 2026 · Updated November 1, 2026 · 8 min read · by the Sakura5 team

To make a sitemap diagram for a website, list every page the site needs, group those pages into a handful of top-level sections, arrange them as a tree with the homepage at the top, and then check each branch against what visitors actually come to do. The result is a one-page picture of the site’s structure that designers, writers and developers can all point at before anyone builds a template.

It matters because structure is the expensive thing to change later. Moving a page from one section to another after launch means new URLs, redirects, broken internal links and a navigation menu that has to be redesigned. Moving a box on a diagram takes two seconds.

This guide covers why most first sitemaps come out wrong, a six-step method for building one, a full worked example for a small bakery website, how to handle the awkward cases like pages that belong in two places, and the questions people ask most often.

Why most first sitemap diagrams come out wrong

The most common mistake is copying the org chart. A company has a sales team, a support team and a careers page, so the site gets Sales, Support and Careers in the top menu. Visitors don’t think in departments. They arrive with a task — check a price, book a slot, find opening hours — and the sitemap should be shaped around those tasks, not around who inside the company owns the content.

The second mistake is starting with the menu. People open a design tool, draw five boxes across the top, and then try to fit every page underneath them. The top-level labels end up decided before anyone knows what the pages are, so half the content gets crammed into a section called “Resources” or “More.” A good sitemap works bottom-up: pages first, groups second, labels last.

The third is confusing the two kinds of sitemap. A visual sitemap diagram is a planning document for humans. An XML sitemap is a file you submit to search engines so they can find your URLs; Google’s overview of XML sitemaps explains what that file does. The diagram comes first and shapes the site. The XML file is generated afterwards from whatever you actually built.

How to make a sitemap diagram for a website in six steps

Budget an hour for a site of 15 to 40 pages. Do the first three steps as loose lists or on a free-form canvas, and only commit to a tidy tree in step four.

1. Write down what visitors come to do

Before listing pages, list tasks. Five to ten short lines, each starting with a verb: “See the menu,” “Order a custom cake,” “Find the address.” If you have an existing site, your analytics and your inbox are the best sources — the questions customers email about are the pages they couldn’t find. These tasks become the test you run against the finished diagram.

2. Inventory every page, in any order

List every page the site needs, plus every page the current site has if you’re redesigning. Don’t group yet. Include the boring ones: privacy policy, terms, the 404 page, the thank-you page after a form. A mind map is a useful container here because it lets you capture pages without deciding where they go. In Mindmap AI, a MindMap Pro subscriber can paste an existing page’s URL or a long description of the business and the AI builds a first map of the topics it covers, which gives you an inventory to correct rather than a blank page to fill.

3. Group pages by the task they serve

Drag related pages together until you have three to seven clusters. Each cluster should answer one kind of visitor intent. If a cluster has a single page in it, it probably belongs inside another one. If it has more than about a dozen, it’s likely two sections pretending to be one.

4. Name the sections and build the tree

Now give each cluster a short, plain label — the words a visitor would use, not your internal jargon. Put the homepage at the top, the section labels on the second level, and the individual pages underneath. Most small and medium sites work best at three levels deep. If you find yourself on a fifth level, the structure is probably hiding a section that deserves its own top-level slot.

5. Mark the page types and the global pages

Not every box is the same kind of thing. Mark which pages are one-off (About), which are templates that repeat (each product, each blog post), and which sit outside the tree in the footer (privacy, terms, contact). Draw a repeating template as a single box labelled something like “Product page × 24” instead of drawing 24 boxes. That keeps the diagram readable and tells the developer how many templates they actually need to build.

6. Test it against the task list

Go back to the list from step one. For each task, trace the clicks from the homepage to the page that completes it. If a task takes more than three clicks, or if two people on the team trace different routes to the same task, the structure needs another pass. Fix the tree, not the labels — a clever label rarely rescues a page that sits in the wrong branch.

A worked example: a bakery website with 22 pages

Take a neighbourhood bakery, call it Crumb & Co, that wants a new site. It sells walk-in pastries, takes custom cake orders, runs two weekend baking classes, and has a short blog.

Tasks. Talking to the owner and reading a month of customer emails produces seven tasks: see today’s menu, order a custom cake, check opening hours, find the address, book a baking class, ask about allergens, and apply for a job. Allergens turn out to be the most-asked question, and the current site buries the answer in a PDF.

Inventory. The page list comes to 26 items. Four are duplicates or dead pages from the old site — two separate “Contact” pages, an old holiday promotion and a staff page nobody updates. That leaves 22.

Groups. Clustering by task gives five sections: Menu (pastries, breads, seasonal, allergens), Cakes (gallery, how ordering works, order form, pricing), Classes (class list, each class page, booking), Visit (hours and address, parking, contact) and Journal (blog posts). Jobs and the privacy policy go to the footer.

The tree. Homepage on level one, the five sections on level two, and everything else on level three. The blog is drawn as one template box, “Journal post × 12,” and the class pages as “Class page × 2.” The finished diagram fits on one screen with 18 boxes.

The test. Tracing the seven tasks shows six of them reachable in two clicks. The exception is allergens, which sits under Menu on level three — fine for browsing, but it’s the most common question. The fix is a link from every menu item page plus a footer link, not a sixth top-level section. A two-minute change on the diagram that would have been a redesign after launch.

Pages that belong in two places, and other awkward cases

A page that fits two sections. Pick one home for it in the tree — that decides its URL and its place in the menu — and draw a dashed line to the second section to show it’s cross-linked. A page with two parents in the diagram usually ends up with two URLs on the live site, which is a maintenance problem.

Very large sites. Past roughly 60 boxes, a single diagram stops being readable. Draw a top-level map that shows only the sections and their main landing pages, then give each big section its own diagram. This is the same idea as breaking a project into a work breakdown structure: one overview, then detail on demand.

Flows that cross the tree. A sitemap shows where pages live, not the order a visitor moves through them. Checkout, sign-up and booking are sequences, and they’re better drawn as a separate user-flow chart. Our guide to making a flowchart for a process covers that part.

Keeping it current. A sitemap diagram is only useful while it matches the site. Keep it somewhere the team can edit quickly. Mindmap AI on iPhone, iPad and Mac works well for this because the same nodes can be viewed as a branching map or switched to an outline view, which reads like an indented page list you can hand straight to a developer.

FAQ

What is the difference between a visual sitemap and an XML sitemap?

A visual sitemap is a diagram for people: it shows how pages are grouped and nested so a team can plan structure and navigation before building. An XML sitemap is a machine-readable file listing your live URLs so search engines can discover them. You plan with the first and generate the second from the finished site.

How many levels deep should a website sitemap be?

For most small and medium sites, three levels is enough: the homepage, the main sections, and the pages inside them. Going deeper is fine for large catalogues or documentation, but each extra level adds a click. If a common task needs more than three clicks from the homepage, reconsider the structure.

Can I use a mind map to make a sitemap diagram?

Yes. A mind map is a tree with a single centre, which is exactly the shape of a site hierarchy. Put the homepage in the middle, the main sections as first-level branches and individual pages as sub-branches. It’s especially useful early on, when you’re still moving pages between sections.

Should I make the sitemap before or after wireframes?

Before. The sitemap decides which pages exist and how they connect, and wireframes decide what goes on each page. Wireframing first means designing layouts for pages that might be merged, moved or cut. Agree the sitemap, then wireframe the templates it identifies, starting with the homepage and the busiest section.

← All articles