down arrow
colorful shapes with images of 1) two hands pointing at a blueprint and 2) a ruler on a building blueprint

29+ Visual Sitemap Examples & Templates and 30+ Tools to Create Your Own

All the tools, templates, and AI assistance you need to create easy and informative visual, XML, and HTML sitemaps.

You need a sitemap? We got sitemaps. 

Twenty nine visual sitemap templates and examples, to be exact—plus some helpful lists of tools and sitemap generators to help you map out your current (or future) website.

Keep on reading for:

  • A quick rundown of the different types of sitemaps 
  • 29 visual sitemap templates
  • 18 tools for creating visual sitemaps
  • 12 website sitemap generators
  • Do AI sitemap generators work? (I did I few test runs to find out)

What is a sitemap?

Clue’s in the name with this one. A sitemap (or site map) is a map of your site. 

Put less flippantly, a sitemap is a map or blueprint of your website that shows the structure and hierarchy of your pages. Sitemaps help both users and search engine crawlers to navigate your site efficiently. Visual sitemaps in particular can also be helpful tools during website design, research, and development. 

Types of sitemaps

There are different types of sitemaps, each of which serves a different purpose. In brief:

  • XML sitemaps—made for search engines, not optimized for human readability, can include URLs in any order, important for SEO
  • HTML sitemaps—made for website visitors (but can also be crawled by search engines), optimized for human readability, provides a structured list of important pages, important for UX
  • Visual sitemaps—made for internal users, optimized for human readability, helps UX and design teams visualize a website and create smooth navigation, important for collaboration

Let’s take a closer look at each type of sitemap and some examples of what these different sitemap formats look like.

1. XML sitemaps

This type of sitemap is primarily used by search engines to crawl and index a website's content more efficiently. An XML sitemap is essentially a file that lists all the pages on your website. It can also include details like how frequently the page is updated, its priority relative to other pages, and other technical information that is good for SEO. If XML sitemaps sound boring, it’s because they are. (They’re also super important, though, so make sure yours is in good order.)

example of an XML sitemap document tree without style information
An XML sitemap example with additional information like last moderated date, change frequency, and relative priority. (Source: Semrush)

2. HTML sitemaps

XML sitemaps are designed for bots; HTML sitemaps are designed for human visitors. 

An HTML sitemap is a page on your website (usually that lists all the important pages on your site, like a table of contents. These are usually linked at the footer of websites to help users easily discover different pages without getting lost in a digital maze.

Unlike an XML sitemap, if you have a large website with many pages, your HTML sitemap should not include every single page of your site—just the ones that will help visitors navigate your website efficiently. In other words, you probably don’t want to list every blog post or support doc in an HTML sitemap—just the blog category pages or even just /blog.

user-friendly html website sitemap from webflow with 4 columns
An HTML sitemap example that is designed for readability and easy navigation. (Source: Webflow)

3. Visual sitemaps

A visual sitemap is a graphical representation of your website’s structure and hierarchy that shows how individual pages connect with each other. 

Content-wise, visual sitemaps are often similar to HTML sitemaps—you will likely include the same pages and page depth in both formats. 

The key difference (other than the obvious one of format) between HTML and visual sitemaps is that the latter is intended for use by an internal audience of designers, researchers, developers, and other folks involved in the website development process. 

Visual sitemaps often take the shape of website flowcharts with blocks, arrows, and color-coding used to show the relationship between webpages. This is the type of sitemap that we’re principally concerned with in this article.

Callout: Speaking of maps, have you seen the latest UX Research Tools Map? It’s the visual guide to just about any research tool worth using!

Why bother with a visual map of your site?

Visualizing your website structure in a flowchart format can help you:

  • Clarify the relationship between different pages and sections of your website
  • Identify gaps or redundancies in your website content
  • Create a simplified, streamlined navigation for website visitors
  • Provide a framework for future website development
  • Reduce the number of pages/steps in your conversion funnel
  • Collaborate effectively across teams

In short, creating a visual sitemap is an important step in the web development process—whether you are creating a new site from scratch, adding new pages to an existing site, or redesigning your website UX entirely. Skip over it at your own risk!

29 visual sitemap templates and examples

1. Interactive sitemap example from Flowmapp

This visual sitemap example from Flowmapp includes content overviews, tags, and emojis.

This visual sitemap example from Flowmapp includes content overviews, tags, and emojis.

2. Information architecture & indexation template for FigJam

FigJam whiteboard template for information architecture & indexation with colorful shapes

This colorful flowchart template from the Figma Community includes instructions and sample content.

3. Sitemap templates from Miro

This Miro template includes three options for visualizing your website structure—as a mindmap, minimal flowchart, or more detailed flowchart. 

This Miro template includes three options for visualizing your website structure—as a mindmap, minimal flowchart, or more detailed flowchart. 

4. Ecommerce sitemap example template from Moqups 

This Moqups sitemap template includes links to external pages for blog, support, and social media. (shown as dotted lines)

This Moqups sitemap template includes links to external pages for blog, support, and social media.

5. Example of a good visual sitemap from Miro

Example of a good visual sitemap with yellow sticky notes

Miro offers this example of a good sitemap (as well as an example of a bad sitemap), which can be created using the whiteboard software.

6. Straightforward sitemap template from InVision

simple sitemap example for Freehand with thin connector lines and color coded shapes

This simple flowchart sitemap template for Freehand by InVision is a straightforward option.

7. Indexed hierarchy (silo architecture) sitemap template from Slickplan

example of a business website site map with indexed hierarchy

Slickplan’s sitemap template includes utility and footer pages, and provides a useful (dare I say utilitarian) template for an indexed hierarchy website.

8. Cafe website site map from Canva

canva site map template slide with simple architecture and an illustration of a happy coffee cup on the bottom left

This Canva sitemap template is an example of a sitemap that a simple small business website might have—there are relatively few pages and a simple hierarchy.

9. Detailed ecommerce sitemap example from Octopus

sitemap example from with page detail preview

This visual sitemap example from includes information about page sections for every webpage.

10. CRM sitemap example from Moqups

simple sitemap example for a CRM website

CRM (Customer Relationship Management) software is inherently complex—and CRM websites tend to be, too. This sitemap example from Moqups includes many pages and depths.  

11. Sitemap maker template from Figma

figma template for a detailed sitemap

This sitemap generator Figma template lets you easily define folder, page, and linking structures within a drag-and-drop interface.  Sitemap maker template from Figma

12. Sitemap template with page sections from Whimsical

sitemap flowchart template from Whimsical

Whimsical offers several sitemap templates, like this clean and simple example that includes blocks for page sections.

13. Website flowchart template from Miro

Website flowchart example from Miro with numbered pages

This website flowchart from Miro is another example of a more detailed map with page previews to help you visualize the relationship between webpages and parts of your website.

14. Vertical sitemap example from Creately

vertical sitemap example for a website redesign

Depending on the “shape” of your website, you may find that a vertically oriented sitemap like this one from Creately works better.

15. Sitemap template with icons from Milanote

Website sitemap with icons, cards, and user login

This template from Milanote has curved connector lines and colorful icons.

16. Software company website map example from Rarchy 

sitemap example for a large website with many pages and hierarchy

This detailed but clean sitemap example from Rarchy shows a software company website with color-coded page previews.

17. Basic sitemap diagram template from Mural

simple sitemap template with a white background

Like many other whiteboard tools, Mural’s core features are great for creating simple, drag-and-drop sitemaps like this one.

18. Colorful restaurant website sitemap example from Flowmapp

website sitemap example with directional arrows

Here’s another colorful, interactive sitemap example with icons and page component previews from Flowmapp.

19. Simple indexed sitemap template from Slickplan

black and white site map template for a personal portfolio website

This example of a simple indexed sitemap for a personal portfolio website includes utility pages and a footer section.

20. Website sitemap presentation template from Venngage

sitemap slide deck template for presenting to stakeholders

This sitemap example from Venngage feels ready to be shared with stakeholders as a slide or static image.

21.Sitemap whiteboard example project from Clickup

example of a work in progress sitemap with collaborative otes

Clickup’s sitemap example includes sample notes and other helpful collaborative elements that might be included in a work-in-progress map of a new site or redesign.

22. Color-coded sitemap template from Aha!

Sitemap example for from product management tool Aha

Aha! is a product management tool that offers templates for roadmapping, project management, and—you guessed it—sitemaps.

23. Education website site map example from Lucid

lucidchart sitemap example of an education website

This template site map from Lucid includes a diagram key, secondary pages, and future pages. This is example uses stacked shapes to indicate when there are multiple pages in the same category.

24. Website redesign sitemap example from VisualParadigm

Website redesign diagram with planned pages shown as dotted outlines

This sitemap example from VisualParadigm shows future pages sketched out as part of a redesign. It also includes details of the website footer.

25.Starter sitemap template from Whimsical

Sitemap flowchart template with purple and gray blocks

Whimsical’s starter template shows how the same elements (shapes, connecting lines, and arrows) can be combined in different ways to create variations of the same site map.

26.Sitemap template variations (flowchart, mind map) from Whimsical

Two different types of visual sitemaps (flowchart and mind map) in a whiteboard tool

Speaking of sitemap variations, Whimsical offers a template that includes three different sitemap formats, so you can play around and find the right one for your website’s information architecture.

27. Mobile app sitemap example from

Mobile app visual sitemap from automatic sitemap generao

This example from shows what a sitemap for a mobile payment app might look like, with details like page sections filled in.

28. Bookstore website sitemap with folder icons from Visual Paradigm

basic sitemap example that uses folder icons for webpages

This sitemap template from Visual Paradigm uses skeuomorphic folder icons for each webpage.

29. No-frills sitemap from Moqups

generic sitemap template for a website with multiple pages

If all these color-coded, emoji-ful sitemap examples feel a bit much, you can always go back to basics with this generic, no-frills sitemap template from Moqups.

Tools for creating sitemap diagrams 

To be honest, you can create a visual sitemap with just about any tool that allows you to draw shapes and lines. But some tools are better suited to this task than others. On the “better” side are flexible, collaborative design tools and purpose-made sitemap makers like these:

  1. Creately
  2. Dyno Mapper Visual Sitemap Generator
  3. Figma/FigJam
  4. Flowmapp
  5. Freehand (InVision)
  6. Gloomaps
  7. Lucid
  8. Miro
  9. Mockflow
  10. Moqups
  11. Mural
  12. Slickplan
  13. Whimsical
  14. Writemaps
  15. Venngage
  16. Visme
  17. Visual Paradigm
  18. VisualSitemaps

Bonus FigJam plugin: This Visual Sitemap text editor plugin is super easy to use and can help you create a sitemap quickly—which is especially useful if you have a large site with many pages!

visual sitemap text editor plugin for FigJam from Figma Community

Website sitemap generators

Remember how I said that an XML sitemap is a big, boring list of every page on your website (minus the no-index ones)? 

Well, I’ve got great news for you—there are plenty of sitemap generator tools out there that can extract your page URLs and create an XML sitemap of your website for you. From there, you can upload the file to Google (and Bing, Yahoo, DuckDuckGo, etc.) to crawl and index your content.

Easy peasy. And—even peasier!—some website builders, like Webflow, create and submit XML sitemaps to Google automatically. If yours doesn’t, or you want help generating an HTML sitemap for visitors, check out the list below for popular options.

XML/HTML sitemap generators

  • PowerMapper is a “one-click” sitemap generator that will give you a visual, HTML, and XML map of your site.
  • Slickplan is a drag-and-drop sitemap generator that allows you to create visual, HTML, and XML sitemaps.
  • is a great free/affordable option that does what it says on the tin.
  • Yoast SEO is a popular plugin for WordPress websites. Once you have the plugin installed, Yoast will automatically generate an XML sitemap.

AI and automated sitemap generators

  • is an AI sitemap generator that allows you to create a visual sitemap from scratch (from a prompt). You can also input your website URL for to have Octopus generate a visual map of your existing site.
  • Relume is an AI tool that includes a visual sitemap generator. You can create a simple sitemap (boxes and arrows) or a more complex map with page content data.
  • Taskade is an AI tool that can generate workflows, mindmaps, and project timelines based on user prompts. Their sitemap generator returns a table of contents style list (like an HTML sitemap) rather than a visual sitemap.
  • Tools that include AI features: Mockflow, Visme, and Whimsical have all both powered up their site mapping capabilities with AI.
  • Not AI, but automated: Rarchy and VisualSitemaps will both generate a visual sitemap of your website (or any website) from a website crawl. 

How well do AI sitemap generators work?

I gave some of these AI tools a few prompts to see what kind of sitemaps they spit out in return. None of the results are perfect (expect to edit any generated site map you get) but they all solve the problem of a blank page. It’s easy to see how these tools can be real timesavers if you’re mapping a site from scratch!

Prompt A (somewhat specific):

“A company website for a research participant recruiting platform, with homepages for researchers and participants, 2 feature pages, a customer page, blog, webinars, product announcements, and other resources”
AI generated sitemap from Relume with a complex prompt
AI-generated visual sitemap made with Relume
detail of AI generated sitemap with pages for customers, blog, and webinars
Details of AI-generated sitemap made with Relume

AI generated visual sitemap made with Octopus
AI generated visual sitemap made with Octopus
AI generated mind map from a sitemap prompt, made with Taskade
AI generated mind map made with Taskade (more like a list of pages/sections, really)

Prompt B (very broad):

“A university website”
ai generated website site map from a very broad prompt, made with relume
Simple AI-generated sitemap made with Relume (prompt = "university website"

ai generated website site map from a very broad prompt, made with octopus
AI-generated visual sitemap made with Octopus (see it in detail)
university website sitemap ai-generated mind map from taskade
AI-generated sitemap, made with Taskade

How to test your website architecture

Creating a sitemap is good and necessary. But the most beautiful diagram in the world can only get you so far if you don’t also take the time to test your website architecture with real users.

Two popular methods for doing this are card sorting—which helps you understand how users categorize information—and tree testing—which helps you evaluate the usability of your website navigation.

Of course, for either method (and any subsequent usability testing you do as part of web development) you’ll need qualified users to test with.

You could try your luck with gen pop panels… or you could target and source reliable participants from User Interviews’s panel of over 4.1 million qualified consumers and professionals.

Try us free!
Katryna Balboni
Head of Creative Content & Special Projects

Content marketer by day, thankless servant to cats Elaine Benes and Mr. Maxwell Sheffield by night. Loves to travel, has a terrible sense of direction. Bakes a mean chocolate tart, makes a mediocre cup of coffee. Thinks most pine trees are just okay. "Eclectic."

Subscribe to the UX research newsletter that keeps it fresh
illustration of a stack of mail
Table of contents
down arrow
Latest posts from
UX Research Toolshand-drawn arrow that is curved and pointing right