Visio Insights
The official blog of the Microsoft Visio product team

How It All Began

How It All Began

  • Comments 3

We're going to wrap up our look at Visio's essential features with the most significant innovation of all - the SHAPE.

 

Essential Feature: Shapes

A central concept in Visio is assembling a diagram from a pre-packaged set of content.  Users do not need to construct drawings from scratch using geometric primitives, nor do they need to be artists to draw great-looking symbols.  You only have to find a shape in one of Visio's stencils and drag it into the drawing.

 

Visio shapes differ from Clip-Art in three important ways:

 

·         Shapes are vector-based graphics meaning that they size and scale well (yes, some Clip-Art is vector-based too).

·         Shapes can have behaviors that control their appearance or interactivity with the user. 

·         Users can customize shapes or build new ones from scratch to easily create new content. 

 

We refer to Visio's content as SmartShapes because they react in an intelligent manner when you manipulate them in a diagram.

 

There are many, many things to say about designing and using shapes in Visio, but for now let's look at one shape in particular.  Looking back at the history of Visio, you could say it all began with a single SmartShape - the block arrow.

 

 

If you want to see an example of this shape in the current product, open the Basic Shapes template (File > New > Block Diagram > Basic Diagram) and drag out the 45 degree single shape from the Basic Shapes stencil.  There are two special behaviors on this shape.  First, you can stretch the width of the arrow without affecting the size of the arrowhead.  Second, you can control the size of the arrowhead by changing the height of the shape.  These behaviors preserve the 45 degree angle of the arrowhead across a wide range of shape sizes.

 

 

Compare this resize behavior to a standard symbol.  Every arrowhead has a different angle.

 

 

How does this work?  Every Visio shape is actually a collection of properties that are defined using parametric expressions.  Unlike many objects that have properties with static values, a Visio shape has properties with either a static value or a dynamic value that is calculated from a formula.  Other shape properties are often used as parameters in the formula, and that gives the shape its behavior.  For example, I can make a rectangle whose Width property is a function of Height.  If I set Width = Height * 2, then I have made a behavior that changes the Width automatically whenever the user adjusts the Height of the shape.

 

Visio shapes have hundreds of properties, each of which can have a formula.  These properties are organized into a spreadsheet interface called the ShapeSheet.  Just as in a spreadsheet, the properties are called Cells in the ShapeSheet.  Cells are organized into rows, columns and sections.  See for yourself.  Select the arrow shape on the page and choose Window > Show ShapeSheet from the menu.  The ShapeSheet Window opens, showing you the real power behind shapes.

 

 

If you look at the ShapeSheet for the 45 degree single arrow shape, you can see some of the parametric formulas that give this shape its special behaviors.  The 1-D Endpoints section tracks the current begin and end points of the arrow.  The Shape Transform section has formulas that depend on the endpoints.  For example, the Width of the shape uses the Pythagorean theorem to compute its value from the endpoints.

 

The Geometry section lists the points that make up the line segments you see on the screen.  If you tile the drawing window and ShapeSheet window together (Window > Tile), you can select a cell in the Geometry section and Visio will highlight that point on the arrow in the drawing window.  Notice that all these points are expressed in terms of Width and Height and also a pair of Scratch cells.  The smarts behind this arrow shape are found in the Scratch.X1 cell.  This cell has a formula that determines the correct size of the arrowhead in order to maintain a 45 degree angle.

 

One of the best ways to learn how to make shapes is to look at the ShapeSheets of existing Visio shapes.  You can see the formulas those shapes use.  You may just need to customize an existing shape slightly to make the SmartShape you want.  There are thousands of shapes that ship with Visio.  Or you may want to make a shape from scratch incorporating behaviors you discovered in other shapes.  The ShapeSheet is a powerful tool that Visio exposes to all users so that they can create shapes that have the visual appearance users need and behaviors that make diagramming with them easy.

 

Leave a Comment
  • Please add 4 and 4 and type the answer here:
  • Post
  • Great post! It helped that you showed the ShapeSheet cause-effect scenarios.
  • There are arrows in Visio 2003 that don't have a geometry section. How is the shape of the arrow controlled in that case?
  • Some of the block arrow shapes are groups, which means the geometry is in a sub-shape.  You can go to View > Drawing Explorer to drill into these sub-shapes and get at their Shapesheets.

    Mark
Page 1 of 1 (3 items)