To create a new document:

1. Go to the Locations screen.
2. Select the folder in which you’d like to store the file.
3. Tap in the toolbar at the top of the screen.
4. Choose a Template from one of the eight pre-installed templates or from one you’ve created or added to OmniGraffle. For the sake of following along, choose the third template in the first row, Autosizing - Pixels.

After choosing the template, OmniGraffle opens a new document (named My Diagram, but you can change that later).

The other buttons in the toolbar include:

• Tap to hide and show the Canvases sidebar on the left. This is where you manage, create, and delete Canvases and Layers in your document.

  

  You can also toggle between List or Styles view, which is really convenient for when you need to make changes to a bunch of like-styled objects. You know, for that one instance when your manager wants you to change the fills from aubergine (#3d0734) to chartreuse (#c1f80a).

• Tap to discover details about the Canvas you are working on. If you have an object selected on the Canvas, this is also where you access the Inspectors.

  

• Tap to open the Stencils library. Use the Stencils library to find and drag objects to the Canvas, or to search Stenciltown online for new stencils.

  

Now that you’ve had a chance to peruse the buttons in the toolbar, it’s time to take the Drawing Tools out for a little test drive.

1. Tap to select the Shapes tool.

2. With one finger, tap on the Canvas and drag your finger to draw a shape.

   

   As you draw on the Canvas, OmniGraffle displays the dimensions of the shape you are drawing, as well as its x/y position on the Canvas.

If you prefer to use one of the pre-installed stencils, tap in the bottom bar. This opens a menu from which you can select any stencil. You can either double-tap a stencil to add it to the canvas:

Or you can touch and hold a stencil and then drag it to the canvas:

When you drag a stencil to the canvas, the Stencils menu disappears and blue alignment bars appear to help you position the object on the Canvas. Pink alignment bars help you position the object at the horizontal and vertical centers.

1. Tap to activate the Freehand drawing tool. Don’t forget, you can also double-tap on a tool to make it persistent; for example .

2. Use your finger (or your favorite stylus) to draw on the Canvas.

   

You can select and customize your shapes with the Inspectors by tapping the button in the top bar. Here, we’ve selected the “head” for the smiley face and have added a yellow radial fill.

1. Start out by double-tapping ; this makes the Freehand tool sticky so you can continue working with it after you draw something.
2. After you double-tap the Freehand tool, you will see the following message appear onscreen just above the bottom toolbar:

   

3. To turn on Shape Recognition, tap .

   

4. Draw some shapes with your finger.

   

   OmniGraffle recognizes the following shapes:

   

5. If OmniGraffle can’t recognize the shape, you’ll be left with your finger-drawn shape. To try again, tap . That erases the shape, but still leaves the Freehand tool selected so you can continue drawing.

Once you have the basic shape you desire, you can change its Fill, Stroke, edit the curves (and more), just as you would with anything else you have drawn. To disable Shape Recognition, just tap , and the button reverts to its off state .

1. Tap to open the Stencils menu.

2. Tap at the top of the Stencils menu.

   

   If you haven’t already authorized OmniGraffle access to your Photos app, you’ll see the following alert:

   

   To grant OmniGraffle access, double-tap the Home button on your iPad, locate and open the Settings app, then tap Privacy on the left, and then flip the switch for OmniGraffle.

   

   Now double-tap Home again and switch back to OmniGraffle.

3. After tapping , some options slide up from the bottom of the Stencils menu:

   • Tap Take Photo to use the iPad’s camera.
   • Tap Choose Existing to select an image from your Photos library.
   • Tap Use Latest to have OmniGraffle place the last image added to your Photos library.

   

4. If you tap Choose Existing, a Photos pane slides into the menu. From here, you can choose from All Photos on your iPad, or photos that have been Recently Added.

   

5. Finally, scroll through the images and tap the image you would like to add to the Canvas.

   

   The Stencils menu disappears and the image is placed on the Canvas.

   

You can further alter the image with the Inspectors. First select the image, and then tap in the navigation bar. This opens the Inspectors menu, from which you can apply any number of styles and effects to the image.

1. Double-tap so you can draw some objects on the Canvas; a couple rectangular shapes should be good.

   

   Notice the light blue sizing guides along the objects. These appear when you draw similar shapes on the Canvas so you can match their sizes. (Of course, you could just draw one shape, and then Copy and Paste the object using tap and hold gestures.)

2. Tap to make the Line tool active.

3. To draw a line between shapes: drag from one shape to the next.

   

4. To draw an unattached line: drag across the canvas.

   

To adjust the endpoints of the line:

1. Touch and hold an endpoint of your line…

   

   …and then drag it to the new desired location:

   

   Notice how the endpoint snaps onto the leading point of the other line when it gets close.

Freehand Drawing with Apple Pencil

There are two modes of freehand drawing with Apple Pencil—with or without Shape Recognition:

With Shape Recognition turned off, you can draw lines, dots, write text, and other shapes without those being converted to proper shapes. All you need to do is double-tap the Freehand tool and then start drawing on the canvas.

With Shape Recognition turned on, OmniGraffle will convert (or attempt to convert) the things you draw on the canvas into a shape. First double-tap the Freehand tool, and then tap this button to enable Shape Recognition before drawing on the canvas.

For example, with Shape Recognition turned off, you can write on the canvas and sketch out your ideas:

Or with Shape Recognition turned on, you can make the shape for the icon’s placement look a little more polished:

Using Apple Pencil to Fill Shapes for Rapid Prototyping

When you are rapidly trying to build a prototype—such as an app screen or a webpage—there are times when all you need is a basic shape fill to help illustrate your point.

OmniGraffle takes input from Apple Pencil’s tilt sensors to let you apply a colored marker fill to shapes on the canvas. To apply one of four color marker fills:

1. Select the shape
2. Double-tap the Freehand drawing tool to make it active:
3. Tap to turn on Shape Recognition
4. Then, while holding your Apple Pencil at an angle, use the side of the Pencil’s tip to “shade-in” the shape. As you start filling in the shape, Apple Pencil fills the object with a grayish shade. When you lift the Pencil, however, OmniGraffle detects the angle of the shading and applies the appropriate marker fill and color.

   

   The marker fill color is based on the direction of the shading within the object, as follows:

   • Up/Down (vertical)—Red Marker Fill:

     

   • Left/Right (horizontal)—Blue Marker:

     

   • Upper-Left to Lower-Right (diagonal)—Purple Marker:

     

   • Lower-Left to Upper-Right (diagonal)—Green Marker:

     

To apply a fine stroke to an object, draw with just the very tip of Apple Pencil. OmniGraffle also supports Apple Pencil’s pressure sensitivity, so if you press harder with the Pencil, you will get a slightly thicker stroke. For a wider stroke, draw the object with the pencil tip at more of an angle.

Here’s how this works:

• Drawing the shape once gives you a single-stroked object on the canvas:

  

• Draw over the shape again, and OmniGraffle applies a double-stroke to the object after you lift your finger or Apple Pencil:

  

• Repeat this process until you get the desired effect from the object.

  

You can watch the following video for a quick overview of how to apply a double-stroke and stroke-fill to an object.

The arrowhead is added to the end of the line when you lift your finger or Apple Pencil from the canvas. To change the style of the arrowhead, we have added shortcut drawing gestures for the following styles:

• Open Arrowhead — Draw a closed triangle over either end of the line:

  

• Double-Open Arrowhead — Draw two closed triangles over either end of the line:

  

• Chevron Arrowhead: Draw a chevron over either end of the line:

  

• Double-Chevron Arrowhead: Draw two chevrons over either end of the line

  

And, if you’d like, you can add arrows to both ends of the line as well:

You can also add standalone blocks of text to the Canvas by using the Text tool (). Such blocks of text are independent from the other objects on the Canvas unless you group them together.

To add a label to a shape, double-tap the shape. The default text, Label appears already highlighted so you can just enter text to give the object a proper name.

When you’ve finished typing, tap the Hide Keyboard button in the lower-right corner of your iPad’s keyboard. If you’re using a Bluetooth keyboard, press Esc to accept the text you’ve entered.

If you ever need to edit a label, all you need to do is double-tap the label to select it, and then make the changes you need. If you need to insert or delete a certain character, you can touch and hold on the text object and then use your fingertip to move the insertion point to another location in the text.

To add a label to a line:

1. Double-tap on a line and a text label appears.

   

2. Enter some text to describe the action related to the line’s direction.

   

3. To adjust the label’s position on the line, tap to open the inspector.

   

   You can:

   • use the Fill inspector to add a background color to the label.
   • use the Text Position inspector to adjust the label’s position and text alignment.
   • use the Font inspector to change the font size, style, and color.
   • use the Geometry inspector to rotate the label if you need to.
   • use the Notes inspector to add additional information about the label or the objects it connects to.

To add a control point to a line:

1. Tap and select the line.

   

2. Tap to use the Point Editing Tools.

   

3. Tap to choose the Add Point tool, and then tap on the line where you’d like to place a new control point. A little blue diamond appears on the line where you tapped.

   

4. To move a control point along the line, tap to use the Point Selection Tool, and then tap and drag the control point along the canvas.

   

You can add as many control points as you’d like to a line (as long as all of them fit, of course). After adding the control points, you can further change the line’s appearance using the Line inspector.

For example, you can change the line from Straight to Curved to get a wavy line, or you could change it from Straight to Bézier so you can create beautifully curved lines with ease.

For more details about Bézier curves, see Working with Bézier Curves later in this chapter.

Start by tapping in the Drawing toolbar to make it active.

• To select an object, just tap it.

• To select everything on the Canvas, touch and hold the Canvas for a second or two, and then let go. A contextual menu appears just above where you pressed; tap Select All in the menu.

  

• To select multiple objects on the Canvas, touch and hold on the Canvas (don’t let go!); when the selection indicator appears, drag over the objects you’d like to select.

  

  Alternatively, you can touch and hold an object with one finger, while tapping others with another, to add to your selection one object at a time.

  

• To resize an object (or group of objects):

  • Select the objects you wish to resize.
  • Touch and hold one of the handles, and then drag to resize (either larger or smaller). If the object is a shape or a label, a heads-up display appears on the canvas with the selection’s dimensions.

• To specify a size without dragging, tap the object and use the Geometry inspector to specify height and width. You may also want to turn on the Maintain Aspect Ratio and Scale Contents options at the bottom of the Geometry inspector to ensure that your objects continue to look their best.

  

• To move an object: touch and hold the object, and then drag it around the Canvas until you find an appropriate place for it. If the object has connections, its connecting lines come along for the ride, too.

If you touch and hold on the Canvas, the contextual menu offers these options:

• Select All selects everything on the Canvas.
• Full Screen hides everything but the Canvas. Choose this option for when you need an unfettered view of your work, or when you want to show off the things you’ve been drawing in OmniGraffle. To get the navigation and drawing tools back, touch and hold on the Canvas, and then choose Exit Full Screen from the menu.
• A third option, Paste appears in the Canvas’s contextual menu if something has been copied or cut to the clipboard.

Options you’ll find in the contextual menu when you select a single object are:

• Cut
• Copy
• Select All
• Paste (if something is already on the clipboard)
• Delete
• Lock/Unlock
• Send to Back
• Make Table (Pro)
• Copy Style
• Full Screen/Exit Full Screen

And finally, if you have multiple objects selected and touch and hold to reveal the contextual menu, you’ll get all of the previous options, plus Group or Ungroup.

Using the contextual menu can save you a lot of time for performing tasks you might otherwise use a keyboard shortcut for when using OmniGraffle on your Mac.

This quick tutorial will show you how to take a basic shape (a triangle) and turn that into a leaf. Just follow along…

1. From your favorite folder, tap to create a new document.

2. Choose the Autosizing - Pixels template.

3. In the navigation bar, tap to open the Stencils menu.

4. Select Shapes.

5. In the listing of Plain shapes, double-tap the triangle shown here to add it to the Canvas:

   

6. Tap anywhere on the Canvas to make the Stencils menu go away.

You now have a lone, right-pointing, triangle on the Canvas. And we’re sure that you’re thinking, “How in the heck am I going to turn that into a leaf?!”. Hang on, we’re getting there.

The next task is to rotate the triangle so it is pointing upward (or relatively so).

1. Pinch to zoom in on the triangle. Your zoom may vary; the point here is to zoom in enough so you can use a two-finger gesture to rotate the object.

   

2. Using two fingers at the same time, touch and hold the triangle. Rotate your fingers slightly. When you see an upward-pointing blue arrow appear, remove one of fingers from the display and then use your other finger to rotate and spin the triangle to the left. You can see the angle of rotation in the Inspector bar; here we’ve set the angle to 285 degrees.

   

   Now we can get down to the business of Béziers. Vive la Béziers!

3. With the triangle selected, tap to use the Point Editing Tools. By selecting the Point Editing Tool, the three points of the triangle now become editable control points. You’re going to convert all three into Bézier curves.

4. Touch and hold the top control point of the triangle. There are a few things that happen rather quickly, so let’s step through them one by one:

   • When you touch and hold on the top control point, a blue diamond animates around the point to isolate that control point; this to let you know you can drag the point around to change the shape of the triangle—but don’t do that, there’s more to be done.

     

   • As you continue to touch and hold the top control point, the blue square changes to a red diamond; this to let you know that you can drag to convert this point into a Bézier point:

     

   • If you continue to touch and hold the top control point, the red diamond changes into a set of blue crosshairs; this to let you know that the control point is temporarily locked into position and you’re free to drag out the Bézier control bar.

     

   • Drag your finger to the right to convert the control point into a Bézier curve. A red Bézier control bar follows your finger as you drag it away from the control point.

     

   As mentioned earlier, all of this happens in the blink of an eye—okay, maybe two blinks—but it’s important to understand what’s happening here. For example, if all you wanted to do was grab a control point and drag it to alter the shape of the triangle, you would just have to wait for the blue triangle to appear over the point.

5. Convert the two remaining control points into Bézier curves. You should have something that looks like this:

   

After converting all of the control points to Béziers, it kinda looks like an egg, but with a little work your freaky little circle will take form. Experiment with the different Bézier points on the circle:

• Drag the Bézier handles in or outward to get the curvature of the leaf just right.

• Double-tap between the existing control points to add more, if needed.

• If you only need to adjust one side of the Bézier, first touch and hold one of the Bézier handles, and then touch and hold somewhere else on the Canvas with another finger. That extra finger you’ve just added locks the Bézier curve’s control point so you can swing the other finger around to create angular or more oblique curves.

  

• To create a sharp point with a curve on the other side, touch and hold one of the Bézier handles, and then touch and hold with another finger elsewhere on the Canvas to lock the control point. Now, with the finger that controls the Bézier handle, drag that inward to the control point. You’re left with a one-sided Bézier curve.

  

Finally, after a little work and by adding a few more lines, your leaf can look something like this:

Some of the tools and inspectors you’ll need include:

• Use the Connections inspector on the leaf edge to turn off all possible connections. This makes it so you can place the lines for the spine and veins wherever you need them to be.
• Use the Line tool to create the spine and veins.
• Use the Line inspector to remove endpoints from the lines.
• Use the Stroke inspector to vary the point size of the lines.
• Use the Stroke inspector to change the style of the leaf edge to Freehand.
• Use the Fill inspector to apply a double linear gradient to the leaf.
• Use pinch gestures to zoom in and out on the Canvas while placing the spine and veins of the leaf.

And, if you create something really cool that you think other OmniGraffle users could enjoy, don’t forget that you can submit it as a stencil to Stenciltown.