Updated 14th of July 2012!
This post is for all interaction designers out there using OmniGraffle. Most of us use OmniGraffle for making flows and documenting wireframes (documenting, not drawing, but that is another post) and our documents tend to get long, like over 50 pages. A table of contents would be nice, but this button is nonexistent in OG…. Since I started using OmniGraffle a few years ago I already was searching the web for a solution, but found nothing really useful until last week. I improved the method and now it is possible to create a ToC in a single click. Great until OmniGraffle 6 comes out (it is in there, right?).
Note: Recently the guys at IQContent took this script and added new features.
Issues with OG 5.4
We had some comments on the blog that the script did not work as expected with Omnigraffle 5.4. We checked out the issue and it not the script, but OG. It will work in the version 5.4.1 which will be out soon. For now, just run the script, select the ToC (just the lines) and select a font and color. The ToC will be visible now.
New features
Thanks to the great people leaving comments we made some tweaks to the script. We added font color as a variable and added some information on how to find add your favorite font to the script.
I found this post, from a guy called Joshua Dickens. An AppleScript that automatically generates a TOC from all your canvases. Nice, thanks Josh. I made some improvements to the page numbering. This was not working out for our documents as the order of the canvases in a document has nothing to do with the canvas ID. Also I added some easy configuration and a multiple column layout and of course some oral feedback, as this is the first AppleScript I have written :).
Can’t wait?
Download the script
What does it do
- Adding a Table Of Contents of all your canvases to the second canvas of the document based on the Canvas TitleYou can change it to the first or third or every canvas you like. You probably figured out to use “<%Canvas%>” as a canvas title.
- If the list gets too long (you decide how long it should be) it automatically creates a new column. Ideal for landscape documents, like ours.
- If you open the document in presentation mode (View > Start Presentation) or export as PDF, the TOC will link to the page. How cool (thanks agian Joshua, that’s his part)
How to use it
Configure
I advice to first change the script so it will fit your page setup and style
- Download the script and unzip
- Open “Create Table Of Content.scpt” with AppleScript Editor
- Change configuration. See the script comments for explanation. The default values are based on our company template, which is probably different from yours.
- To get your font:
1) Create some text in the font that you want
2) “Copy As…” in the edit menu and select Applescript
3) Paste it somewhere, applescript editor, text editor, in OG. You’ll see somewhere in the text font:”NameOfTheFont-ExtraBits” – that’s the name of the font as Omnigraffle sees it.
4) Copy and paste that font name into the TOC script - Open an OmniGraffle document
- Create an empty second canvas
- Run the script
- Tweak configuration
Getting easy access to the script
- Open your AppleScript Editor (of course using Launchbar, Quicksilver or spotlight if you will)
- Go to preferences, tab general and select “Show script menu in the menu bar” and show computer scripts at the top
- Open Omnigraffle (we use OmniGraffle Pro 5.2.3 at the moment)
- Click
in the menu bar and select “Open Scripts Folder > Open OmniGraffle Pro Script folder” - Drop your unzipped file in the folder
- Restart OmniGraffle
From now on, just do this
- Open any OmniGraffle document
- Make some space on the second canvas
- Run the script using the icon in the menu bar
Posted: 08:48 on 23 July 2010:
23 July 2010 on 08:48:
Works like a charm, love it 🙂
Posted: 10:03 on 22 September 2010:
22 September 2010 on 10:03:
This is absolute genius. You have saved me countless hours of mind-numbing labour. Thank you! (and to the original script author, of course!)
Posted: 11:41 on 13 October 2010:
13 October 2010 on 11:41:
Found a need for this, looked for it, first thing we found was this and it works awesome. Thanks, saved us writing one!
Posted: 19:29 on 31 October 2010:
31 October 2010 on 19:29:
I am new to Omnigraffle. I have installed the script an run it on a file with 2 canvases, with their own names, and canvas 2 for the TOC, but nothing comes up. I would appreciate help, since I might create in the future files with more canvases.
Thank you
Posted: 19:31 on 31 October 2010:
31 October 2010 on 19:31:
Hi, i am new to Omnigraffle. I have run the scrip on a File with 3 canvases, including canvas2 clean, and I get no Table of Contents, although I hear the start and end message.
Also, Is there any way to export all the text from a canvas?
Posted: 23:53 on 9 November 2010:
9 November 2010 on 23:53:
@Youri, you can send me the file if you don’t mind, so I can check out what is going wrong.
Posted: 02:04 on 10 November 2010:
10 November 2010 on 02:04:
Hi Matthijs,
it will not be necessary. It worked. It is simply that I had some more content in Canvas 2 and the table of contents was not easy to see at first glance.
Thanks for your support. It is indeed a great script. Congratulations!
Posted: 23:03 on 18 November 2010:
18 November 2010 on 23:03:
bad ass! (thx)
Posted: 14:58 on 30 November 2010:
30 November 2010 on 14:58:
Thanks! This is a great tool which will save me from endless hours of brainless work. Do you have more useful scripts to share? I cannot find anything else in your site but would be awesome!
Posted: 17:19 on 6 January 2011:
6 January 2011 on 17:19:
Thanks for the script. Some of my canvasses are more than one page long. Do you know how I can use page numbers instead of canvas numbers. Example scenario: I have an 3-canvas document. Canvas 1 is one page. Canvas 2 is three pages. So I want the TOC to say: [Canvas 1 Title]:Page 1, [Canvas 2 Title]: Page 2, [Canvas 3 Title]: Page 5. I don’t need to repeat the canvas title for the additional pages in Canvas 2. Thanks in advance for your help!
Posted: 10:25 on 28 January 2011:
28 January 2011 on 10:25:
@yenny Currently working on a “tools” section on our site.
Posted: 10:27 on 28 January 2011:
28 January 2011 on 10:27:
@brian Mmm, I don’t know about that one. We always try to keep our canvases one page. You can probably tweak the script and replace “page” by “canvas”, but that is just a guess. Let me know if you get any further with this.
Posted: 03:06 on 23 March 2011:
23 March 2011 on 03:06:
Wonderful!!
That was super easy and worked like a charm. Links are great.
Posted: 09:42 on 29 April 2011:
29 April 2011 on 09:42:
That’s awesome. I still don’t understand why this functionnality is not available on Omingraffle..
Posted: 17:31 on 4 May 2011:
4 May 2011 on 17:31:
Worked like a charm! This was so easy and effective. Love it! Thanks so much for figuring this out and posting it.
Posted: 15:47 on 31 May 2011:
31 May 2011 on 15:47:
Helemaal blij mee!
Posted: 21:36 on 7 June 2011:
7 June 2011 on 21:36:
Great script – worked perfectly. I’m not an applescripter, but managed to figure out how to change the text color as well if it’s relevant to anyone – define color var…
set tocFontColor to {0.4, 0.4, 0.4}
and then drop color:tocFontColor into the ‘text’ calls.
Thanks for the script.
Posted: 23:34 on 19 July 2011:
19 July 2011 on 23:34:
This works like a charm, but as noted in the script, changing the font doesn’t actually change the font. Any ideas on how to get this working? The font I want to use is “Myriad Pro”, wondering if it’s got something to do with the space…
Posted: 16:10 on 20 July 2011:
20 July 2011 on 16:10:
Thanks. This is an awesome script; saved me a bunch of time.
Posted: 06:50 on 1 August 2011:
1 August 2011 on 06:50:
For other people with the font issue I asked about, I’ve found the solution. You can’t use the font name directly for some fonts, because a) it has a space in the name and b) it might have some other features related to to it – light, semibold, etc. Easy way to find what font name you want to use:
1) Create some text in the font that you want
2) “Copy As…” in the edit menu and select Applescript
3) Paste into an empty applescript window. You’ll see somewhere in the text font:”NameOfTheFont-ExtraBits” – that’s the name of the font as Omnigraffle sees it.
4) Copy and paste that font name into the TOC script, and you’re good to go
Mathijis, maybe worth putting this into your script or updating the post…
Posted: 23:57 on 26 September 2011:
26 September 2011 on 23:57:
Hi –
This configures very well, allowing me to create a ToC for a 70pp document in two columns on a single page (9pt Arial Narrow), with a tocHeight of 600.
But I’m having a persistent problem. When I set tocWidth to 200 (or anything less than the default) the page numbers disappear from the first column, even though they appear correctly for the second column.
I’ve examined padding, but found no solutions there.
Can anyone tell me what I am doing wrong?
Posted: 19:18 on 9 April 2012:
9 April 2012 on 19:18:
I’m a happy man!
Posted: 03:26 on 5 June 2012:
5 June 2012 on 03:26:
Help! I upgraded to the beta version of Omnigraffle Professional, and the script is no longer working. It generates the lines, but there is not anything in the boxes where the page names and page numbers would be located. Just a bunch of lines basically…
Posted: 13:24 on 12 June 2012:
12 June 2012 on 13:24:
Similar problem here as Mike Earley’s. I upgraded Omnigraffle to version 5.4, and the script now only generates the lines…
Posted: 17:52 on 27 July 2012:
27 July 2012 on 17:52:
Awesome – so grateful for this. Silly OG hasn’t built even a rudimentary version in yet.
Posted: 20:22 on 9 August 2012:
9 August 2012 on 20:22:
Hi,
Thanks very much for this. I would love to use this script but am obviously missing something.
When I run the script, page 2 of my document does show a series of lines and empty text boxes. How do I get these to populate with the various canvas titles and page #? I have Omnigraffle 5.4 Pro.
Thanks
Posted: 09:15 on 25 August 2012:
25 August 2012 on 09:15:
AA, read this post: http://unitid.nl/2012/07/some-tips-about-omnigraffle-5-4-and-our-toc-script/
Posted: 23:17 on 17 January 2013:
17 January 2013 on 23:17:
Matthijs, thank you for creating this script – I’ve used it for many projects over the past year or so. Recently I added some extension so that I could use different styles and format – I have shared my work in a blogpost here: http://iqcontent.com/blog/2013/01/styles-for-automatically-created-table-of-contents-in-omnigraffle/
I see that you have moved on to use InDesign mostly at UNITiD but maybe some other readers of this blog might find the updated scripts useful.
Posted: 19:26 on 24 April 2013:
24 April 2013 on 19:26:
Matthijs,
This is simply awesome.
Thank you for sharing with the IxD community.
Best,
David
Posted: 15:13 on 13 September 2013:
13 September 2013 on 15:13:
Hi, script runs but doesn’t display page numbers, any idea? Otherwise beautiful work 🙂
Posted: 12:10 on 17 October 2013:
17 October 2013 on 12:10:
Genius. Love you!
Posted: 17:17 on 14 January 2014:
14 January 2014 on 17:17:
I use the script almost everyday so I made it a little easier for me to use it. I turned it into an Alfred workflow:
http://reinier.me/post/73313150335/create-a-table-of-contents-in-omnigraffle
Posted: 22:06 on 14 January 2014:
14 January 2014 on 22:06:
Nice one, Reinier!
Posted: 12:28 on 29 July 2014:
29 July 2014 on 12:28:
The links to the script download is not valid anymore
Posted: 13:12 on 29 July 2014:
29 July 2014 on 13:12:
Hi Sanita, I think it still works. Can you try again: http://unitid.nl/wp-content/uploads/Create%20Table%20Of%20Content.scpt.zip
Posted: 22:02 on 28 August 2014:
28 August 2014 on 22:02:
I’ve been using your script for what seems like years, and it has always worked great. Thank you!
However, now I cannot get the page numbers to appear. The action links are still there but the page numbers are not. I downloaded a fresh version of the script, but still no luck.
Not sure what I am doing wrong.
Thanks in advance for you help.
Posted: 23:11 on 20 May 2015:
20 May 2015 on 23:11:
Hi, I have always been using the script. Now all of a sudden it doesn’t work anymore. When I run it from Applescript I get this error:
—
error “OmniGraffle got an error: Can’t make «class » id 15 of document \”20150517_UNmarket_UX_ADMIN_MOBILE.graffle\” into type reference.” number -1700 from «class » id 15 of document “20150517_UNmarket_UX_ADMIN_MOBILE.graffle” to reference
—
I am running the latest version of Omnigraffle: 6.22
Any ideas?
Thanks,
Posted: 21:25 on 21 May 2015:
21 May 2015 on 21:25:
Hi Jurgen. I have to admit I haven’t used Omnigraffle for quite some time and I have never seen this error before. You can take a look into the script or that page 15 if you not already did so. Anybody else got this issue?
Posted: 08:18 on 14 August 2015:
14 August 2015 on 08:18:
awesome
Posted: 21:50 on 28 March 2016:
28 March 2016 on 21:50:
This script has worked perfectly for years. However, since the last 2 updates, this script is broken (at least for me) and no longer shows the page number in the table of contents. Have you experienced this since the update?
Posted: 22:12 on 28 March 2016:
28 March 2016 on 22:12:
Hi Arondae. As we haven’t use Omnigraffle for documentation for quite some while, we stopped working on the script. If anyone finds a solution, I am happy to change the code. By the way, we wrote this in 2012! Omnigraffle still has no decent table of contents feature?
Posted: 01:34 on 9 July 2016:
9 July 2016 on 01:34:
I found a fix to the issue that people are reporting with OG 6. Remove this line from the script:
set jump of tocBox to theCanvas
and it works!