Website Flowcharts and Site Maps AI

This template provides tons of elements for creating visual website flowcharts and site maps. This is the Illustrator / EPS version. We also have an OmniGraffle version:

Beautiful flowcharts in minutes..

Just drag-n-drop and rename pages from our Adobe® Illustrator® flowchart template to create professional deliverables for your clients, developers or team members.

63 Miniature Wireframes...

The flowchart template comes packaged with 63 mini wireframes to represent common page layouts, built on a 4-column grid with elements rounded to 5 pixels, allowing for easy editing and grid snapping.

Loved by Clients & Developers...

Flowcharts not only demonstrate the pages and interactions, but also show a general idea of the content and layout of each page.

In the Template...

Along with the wireframes, you get all the lines and labels to quickly put together website flowcharts and site maps, plus one big example as a starting point.

Follow us on Twitter and Dribbble for updates:


  1. Nikita Gaidouk

    Could you recommend if this will work with some existing "mind map" or "Flow Chart" software, or is this only for illustrator?

  2. Joanne Taylor

    i wish I had the eye for making this kind of item. It looks really artistic, despite the simplicity - or perhaps because of it.

  3. UX Kits
    • Shop Owner

    @Nancy Hernandez Hi Nancy, do you mean the stencil size or the ideal canvas for a flowchart? You can use the starter example but it really depends on the amount of pages you need to display.

  4. Nancy Hernandez

    I meant the ideal canvas size for a flowchart? I'd like to use the style and elements for mobile tablet pages, and possible have it printed for a wall hanging. I am wondering two thing:s the size you recommend, and how were you able to create that slanted view image?

  5. UX Kits
    • Shop Owner

    @Nancy Hernandez The size in the example is about 1600x1200, but you could start with that and then adjust based on your specific flowchart. I just took a photo of the screen for that image. You have to slightly adjust the angle until you get it without much banding (the stripes that show in a photo of a screen). I'd love to see it if you do as a wall hanging! Do you mean to demonstrate to a client or just for personal use?

  6. Nancy Hernandez

    I am a Design Director and I plan to use it with my ux team as well as the dev team - to get feedback from each team to ensure that behaviors, text and flow make sense.

  7. Michael Habenicht
    • Purchased

    Funny... I was telling a colleague yesterday that I needed a stencil for OmniGraffle for mocking up website flow and structure. Exactly what I needed!


Showing 1 - 30 of 63

You must be signed in to post a comment.
How do I contact support?

If you need help with a product contact the shop owner here on the product page! Just click the Message icon on the upper right.

For anything else shoot an email to