It’s hard to build a mental picture of the structure of a large website simply by browsing the site, reviewing a list of URLs or looking at a spreadsheet or XML sitemap. I like visual things — I’m a big infographics fan — so more than once I’ve searched for a quick way to get the structure of a site into an easy to digest diagram, only to find nothing useful, give up and default to cell formatting in Excel. Have I been doing it wrong?
I’ve recently switched to Mac, so this time when I wanted to visualise the structure of a large website I was including Apple terms, and I’d heard about Omnigraffle from Cory-Ann Joseph’s presentation at the Content Strategy Forum, so I threw that around as well.
It wasn’t long before I came across an AppleScript that takes an existing XML sitemap and generates a visual layout for it in Omnigraffle. It works quite well.
Here’s a quick run through of the process:
1. Download Omnigraffle
Head over to OmniGroup.com to download a copy of Omnigraffle. It’s free to trial for 14 days.
2. Generate an XML sitemap for your domain
I used XML-Sitemaps.com which crawls the site and creates a sitemap.xml file. There is a limit of 500 pages. There are other tools that can do this for a larger site.
3. Download the XML Sitemap to Omnigraffle AppleScript from Github
This AppleScript lurked around on the Omnigroup forums for a while before going through various revisions by a number of people. It reads an XML sitemap and generates the corresponding page nodes in Omnigraffle. Most recently Nikjftk has released a substantial update which makes using it simpler.
4. Open up your AppleScript Editor and Paste in the Code from Github
You can then either just hit the Run button and choose your sitemap.xml file when prompted, or save the script as an Application with an icon which you can simply drag your Sitemap.xml files onto.
5. Sit back and watch the build
The script will begin walking through the XML file and creating page nodes and connections in Omnigraffle based on your site hierarchy. There’s not much to do at this stage but sit back and wait. For a site with a couple of hundred pages this took about 10 minutes on my iMac. It seems to break if you switch Spaces, but using other applications on the same Space was not an issue. All the page nodes will appear on top of one another in the top left of the page and not be organised neatly until all of them have been processed.
6. Choose your format
By default the image looks quite ugly, but Omnigraffle comes with a range of different styles. In the menu select Format > Choose Diagram Style and choose your preferred design from the list. My preference (and the one used in the example images) is ‘Org Chart (plain)’.
7. Save and/or Export
You can export this in a variety of formats, including PDF for printing, or Microsoft Visio for sharing with your Microsoft colleagues.
Extras
Some other cool stuff goes on in the background. The content of the page will be loaded and added to the Omnigraffle file. Mouse over each page node to get a preview of the page text. If you export as a PDF each page node will link out to the web for easy reference.
This is the best way I’ve found to get a visual representation of an existing site without much effort. Once this is set up you can create visual sitemaps like these in just a few minutes.