Hierarchy visualiser

Why draw the hierarchy

An outline in a document hides its shape. Once it is drawn as a tree, a few things become obvious: one section holding half the site, a branch that runs six levels deep, three top-level sections with a single page each. Seeing the shape is the quickest way to start a conversation about whether it works.

What the visualiser reports

• Total pages and depth. How many lines the outline has and how many levels deep it goes.
• Pages per level. A quick sense of whether the tree is broad and shallow or narrow and deep.
• Crowded sections. Any page with more direct children than the limit you choose. The default is nine; pick the number that suits your menus.
• More than one top-level line. If your outline has several lines with no indent, one of them may be the home page and the rest should sit beneath it.
• Depth beyond four levels. A prompt to check that the deepest pages can also be reached another way.

Why the depth check uses four

The Australian Government Style Manual advises writers to "keep the hierarchy shallow" and to "use no more than 4 heading levels". That advice is about headings inside a document, not sections of a website, but the reasoning carries over: every extra level is another decision a reader has to make correctly. Deep pages are not wrong in themselves. Large sites need depth. What matters is that people have other routes to them, such as search, related links and hub pages. That is the reason WCAG 2.2 includes the Multiple Ways criterion (2.4.5).

Why the crowding limit is yours to set

There is no research-backed maximum number of menu items that applies to every site. A list of twenty council services in alphabetical order may be easy to scan; a list of eight vague labels may not be. The limit exists to make you look again, not to declare a section wrong. Change it and run the tool again to see how the flags move.

Reading the tree

The tree is drawn as nested lists, which screen readers announce with their level and the number of items. Each page that has children shows how many sit directly beneath it. You can copy the tree straight from the page, or download the outline as plain text with consistent two-space indents, ready to paste into a document or back into the sitemap builder.

Things to look for

• A section that everything ends up in. "Resources", "Information" and "More" can collect pages that did not fit elsewhere. Ask what a visitor would expect to find there.
• Sections named after teams. If the top level mirrors your organisation chart, visitors need to know how you are organised before they can find anything.
• Repeated labels. The same label at two places in the tree, such as "Forms" under three sections, can work if each is clearly scoped, or it can confuse.
• Very uneven branches. One branch with sixty pages beside four branches with three each suggests the big branch holds more than one topic.

Doing it without the tool

Write the outline with indents, then count lines per level by hand or with a spreadsheet: paste the outline into one column, count the leading spaces in the next column, divide by two and add one to get the level. A pivot table gives pages per level.

When to get help

If the tree shows problems but the fix is not obvious, an information architecture audit looks at the content, labels and links behind the shape. If you are designing menus from the tree, navigation design turns the structure into menus, breadcrumbs and local navigation.

A worked illustration

Privacy

The visualiser runs entirely in your browser. Nothing you paste is sent to us or kept after you close the page.

Sources checked 4 November 2026 for hierarchy visualiser

1. Multiple Ways (2.4.5), W3C
2. Hierarchical structure, Style Manual