June, 2006

Visio Insights
The official blog of the Microsoft Visio product team

June, 2006

  • Visio Insights

    Getting to Know Your Neighbors - Quickly


    Visio's SpatialNeighbors property is useful for finding shapes that are nearby other shapes or that overlap other shapes.  It can be used to programmatically answer the question "What did I drop my shape on top of?".


    Unfortunately, the SpatialNeighbors property can be extremely slow under certain circumstances.  In real world scenarios, searching might take anywhere from a second to over a minute.  That's unacceptable for developers who need to make frequent calls to the method.  Two factors can significantly alter the performance of the method.


    First, searching group shapes is much slower than searching non-group shapes.  This has to do with the way that SpatialNeighbors defines containment.  Shape A is contained within Group Shape B if A is contained within the union of all the sub-shapes of B.  Thus a lot of work is done to calculate that union before any relationship determination is made.  It may not be possible to eliminate groups, but it is always helpful to performance to minimize the number of sub-shapes as much as possible.  Also make sure to avoid nested groups.  Opt instead for of a single group shape with many sub-shapes.  Reducing the number of groups or shapes within groups can double or triple the performance of SpatialNeighbors.


    That's a decent improvement, but the second factor is even more important for performance.  With each call to SpatialNeighbors, the developer must specify the Relation types they wish to detect.  The four relation types are ContainedIn, Contain, Overlap and Touching.  Any combination of types can be searched for.  The problem is that Visio checks for each of these relationships individually and must redo all the analysis work described above every time.  This leads to astronomic execution times.


    The workaround here is to not specify the relation type at all.  When passing in 0 for the Relation parameter, Visio makes several internal optimizations because it no longer cares about the particular way in which two shapes are related.  For developers who don't care about the relation type, passing in 0 is a couple orders of magnitude faster (100x) than passing in all the types.  For those that really do need to find the shapes matching a particular relationship, call SpatialNeighbors passing in 0 to get a collection of candidate shapes.  Then iterate through the collection and use the SpatialRelation property to get the relationship.  This technique uses the really fast searching code to weed out all the shapes that are completely unrelated.  The expensive code to determine actual relationships is then used with a much smaller set of shapes.



  • Visio Insights

    Going Off the Page


    In an ideal world every business process would each fit on a single page.  Users have employed a variety of techniques to squeeze more information into a finite space.  Ultimately some business process diagrams must span across more than one page.  To maintain connectivity between the pages, Visio provides the Off-page reference shape.



    The Off-page reference shape can be found in the Basic Flowchart Shapes stencil that opens with flowchart diagrams.  It works like any other flowchart shape.  You can connect it to other shapes and add text or formatting.  When the Off-page reference is dropped on the page, a dialog box appears asking where the shape should link.



    By default a new page will be created, and a copy of the Off-page reference shape will be added to that page.  The two shapes are linked to each other via hyperlink and as well as double-click.  There is also an option for synchronizing the text between the shapes.


    However, this behavior is not limited to the Off-page reference shape.  The functionality behind the shape is provided by the Off-Page Connector (OPC) add-on.  Your shapes can offer the same linking capability by adding a few calls to this add-on.  Put the following formulas into these cells in the Events section of the Shapesheet for your shape.









    The EventDrop cell is triggered when the shape is dropped on a page.  /CMD=1 tells the Off-Page Connector add-on to show the Off-page reference dialog.  Clicking OK in the dialog will cause the add-on to insert the necessary tracking and linking information into your shape.  EventDblClick is the trigger for double-clicking on the shape.  TheText is the trigger for shape text changes.


    There is a bonus feature in the Off-Page Connector add-on that is not exposed by the Off-page reference shape.  It is possible to link to separate documents in addition to other pages in the same document.  Use these formulas to trigger the Off-document reference.







    When an Off-document reference is triggered, the Off-document reference dialog appears asking what document and page to link to.  Once the link is established, double-clicking or activating the hyperlink will take you to the other document.  Visio will open the other document if it is not opened already.  Note that text synchronization is not provided across documents.



    The Off-Page Connector add-on is available in both Visio Standard and Professional editions, so your custom reference shapes will work with any installation.  If you use the Off-page reference shape or create diagrams that span across pages, please tell us about it.  We would like to hear what types of drawings you work with and how you set up the links.


  • Visio Insights

    Cutting Corners


    One of the challenges in Visio shape design is striking a balance between custom behavior and standard behavior.  The shape designer has one notion about how a shape should be used, and users often have a different notion.  Ideally the shape designer allows as much flexibility as possible without destroying the meaning of their shape.


    Let’s look at an example.  Suppose the designer wants to create a speech balloon shape.



    The essential part of this shape is the triangle underneath the shape, which implies that the balloon contents come from a speaker.  The shape designer draws the balloon outline and discovers during testing that corner rounding does not work with the shape.



    One way to fix this is to prevent corner rounding on the shape (by setting the Rounding cell to =GUARD(0) ) .  However, this frustrates users who expect corner rounding to work.  Disabling corner rounding for the entire shape is too restrictive.  Users should be able to use corner rounding without changing the original meaning of the shape. 



    In this case the shape designer can improve their shape’s behavior with just a few extra steps.  The trick is to understand that Visio can only draw a rounded corner at vertices where there is sufficient room to do so.  If two vertices are too close, the rounded segment between them will be smaller.  In fact, by putting two vertices on top of each other you can eliminate the rounded corner entirely.



    The image above shows the Shapesheet for the original balloon shape.  The first three geometry rows define the speech triangle.  By inserting new geometry rows with the same vertices, no corner rounding will appear for the speech triangle.  You add a row by right-clicking and choosing Insert Row After.  Here is the updated geometry section:



    Now corner rounding works beautifully.  There are additional things to consider in this speech balloon example such as the resize behavior, text block position and alignment box size.  This post simply illustrates the need for shape designers to be aware of the ways their design restricts shape behavior.  Then they can look for solutions that give users the behavior they expect from any Visio shape.



  • Visio Insights

    After Further Review


    Several users have encountered a situation in Visio 2003 where the Reviewing toolbar is always shown.  Even once you turn off the toolbar, it reappears the next time the document is opened or the next time the Visio application is launched. 



    Here are some possible explanations and remedies.  You may need to try multiple remedies to keep the Reviewing toolbar from popping up again.


    1)      The current document is in Track Markup mode.  Go to the Tools menu and turn off Track Markup mode.  Then resave the document.

    2)      Visio is set to display Markup in the document.  Go to the View menu and turn off Markup.  Then resave the document.

    3)      The Reviewing toolbar was visible when Visio was last exited.  Go to View > Toolbars to turn off the Reviewing toolbar.  Then exit Visio and restart.


    Are there other behaviors in Visio that you find frustrating?  Please let us know.


  • Visio Insights

    How It All Began


    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.


  • Visio Insights

    Intelligent Diagrams


    This is the sixth topic in a series discussing the essential features that make up the Visio application.


    Essential Feature:  Extensibility

    Part of the original vision for Visio was that you could use it to make almost any kind of drawing.  Rather than focus on being just a flowcharting application or just a floor plans application, Visio chose to be a general purpose diagramming and drawing application.  The features built into the product covered the basics of working with shapes on a page.


    However, the Visio architects determined that it would be quite useful for specific types of diagrams to have more specialized behavior.  Developers can supplement the generic diagramming experience with functionality that is tailored to the drawing type, making Visio a great Organization Chart application and a great HVAC ductwork application and a great Database Modeling application. 


    One of the interesting aspects of Visio's extensibility story is that the shipping product itself contains over one hundred add-ons to the core drawing engine that utilize the automation interface.  These add-ons range from simple utilities like the Area & Perimeter add-on to the robust behaviors in Organization Charts or UML diagrams.  Many of the features people use every day in Visio are not general features of Visio but are actually capabilities provided by add-ons.  One of the great benefits of using the Visio API for our own features is that it is well-tested before any Visio product goes out the door.


    The real power in Visio extensibility story though is the breadth of automation options available to developers.  Here are some of the more common ways to build on the Visio platform:


    Extensibility Mechanism


    Visio Add-on

    Special C++ dynamic link library

    COM Add-in

    Standard extensibility interface across Microsoft Office.  These may be developed in any programming language that supports COM Automation as well as any managed language.


    Visual Basic for Applications built into the Visio product

    Visio Drawing Control

    ActiveX control for inserting a Visio surface into your application

    XML File Format

    Full fidelity file format for Visio documents in XML structure

    Custom Shapes and Stencils

    User-created content with powerful set of custom behaviors possible


    The Visio drawing platform gets richer with each release, and fortunately there is a great resource to cover it all.  The Visio SDK was initially released with Visio 2002 and has been updated for Visio 2003 and the upcoming Visio 2007 as well.  It's available free on MSDN for download.  There is a lot to learn and take advantage of with Visio extensibility.  Look for more posts on this topic in the future.


  • Visio Insights

    Retooling for Success


    This is the fifth topic in a series discussing the essential features that make up the Visio application.


    Essential Feature:  Drawing Tools

    Visio bills itself as a diagramming application, and Drag & Drop is the core feature that makes Visio easy to use.  However, Visio is also a pretty good drawing application and has a set of tools that can create different geometric primitives such as circles and lines.  One of the original reasons for including drawing tools in the product was to enable users to make their own shapes.  In practice, the drawing tools are just as useful for building diagrams as they are for creating new shapes.


    Historically, all the tools available in Visio have been located on the Standard toolbar, though some tools are now found underneath others.  We significantly reorganized the tools in Visio 2003 to improve usability for new users.  The tools were divided into those related to diagramming such as the Connector tool and those related to drawing such as the Line tool.  The drawing tools were placed into their own toolbar named Drawing.  This change reinforced the notion that Visio is a diagramming app first and foremost, and new users seemed to respond positively.  For those that need to do a lot of drawing with the drawing tools, there is likely a benefit to having a separate toolbar as well.



    Another change in Visio 2003 was the switching behavior for tools.  In usability studies we found that many users would toggle the tools off accidentally, so the selection behavior was changed to remove the toggle.  You must now click on the Pointer tool or another tool to deactivate the current tool.  One exception is that closing the Drawing toolbar will switch the current tool back to the Pointer if one of the drawing tools was active.






    Pointer Tool

    Standard toolbar


    General shape manipulation

    Text Tool

    Standard toolbar


    Adding & editing text

    Connector Tool

    Standard toolbar


    Drawing connectors

    Pencil Tool

    Drawing toolbar


    Drawing lines & arcs

    Freeform Tool

    Drawing toolbar


    Drawing curves

    Line Tool

    Drawing toolbar


    Drawing lines, editing geometry

    Arc Tool

    Drawing toolbar


    Drawing arcs

    Rectangle Tool

    Drawing toolbar


    Drawing rectangles

    Ellipse Tool

    Drawing toolbar


    Drawing circles and ellipses

    Connection Point Tool

    Underneath Connector Tool


    Adding connection points to shapes

    Crop Tool

    Picture toolbar


    Cropping images

    Stamp Tool

    Standard toolbar customization well


    One click placement of shapes

    Text Block Tool

    Underneath Text Tool


    Moving shape text

    Format Painter Tool

    Standard toolbar


    Copy & paste formatting between shapes


    The Visio Product Team has a long term goal to reduce the amount of tool switching required to build diagrams.  In Visio 2003 the Rotation tool was removed, and a rotation handle was added to the shape handle set.  Now you only need the Pointer tool to manipulate the orientation of shapes.  Visio 2007 adds an Insert Text Box command to the Insert menu, which allows you to add a single piece of text to the drawing without switching to the Text tool.  Also the new AutoConnect feature is intended to reduce the switching between the Pointer and Connector tools.


    These changes make drawing and diagramming in Visio more efficient, but there will always be a need for tools.  Whether you want to reposition a text block to just the right place or draw a rectangle around a group of shapes to relate them together, you will find everyday uses for the tools in Visio.  And when you decide to make your own shapes, the Drawing Tools become essential.


  • Visio Insights

    Take a Closer Look


    This is the fourth topic in a series discussing the essential features that make up the Visio application.


    Essential Feature:  Zoom

    From business processes to project schedules to organization charts to network topologies, there are many different kinds of information that people and businesses use Visio to visualize.  But all these scenarios have one thing in common:  The business information presented in these diagrams tends to be complex.  In fact, the more detailed and complicated information is, the more likely you need a tool like Visio to help organize it and present it.  When drawings become large and contain detailed information, one of the most useful features in Visio is Zoom.


    Zoom is a surprisingly under-utilized feature since a full page diagram is not readable on a typical screen.  We see many beginners struggle to create diagrams simply because they are working at full page zoom rather than enlarging the area they are focused on.  Learning how to use zoom effectively is a significant part of the transition from casual user to Visio expert.


    You can change the zoom level by several means.  Clicking on the zoom dropdown in the Standard toolbar is the most frequently chosen method.  There is a Zoom sub-menu under View.  Ctrl+Mouse Wheel also works.  But Visio experts use the keyboard shortcuts: Ctrl+Shift+Left Click and Ctrl+Shift+Right Click.  The keyboard shortcuts are quick.  You can also do Ctrl+Shift+Left Drag to define a particular region of the page to zoom into.


    Of course, once you are zoomed in, panning (scrolling the view) becomes important too.  The scrollbars obviously work here.  Mouse Wheel and Shift+Mouse Wheel work as well.  But again the most convenient method may be Ctrl+Shift+Right Drag.  Thus the Left mouse button assists with zooming and the Right mouse button assists with panning.


    There is one other helpful feature for understanding your current location in relation to the entire diagram.  The Pan & Zoom window shows a bird's eye view of the drawing page, and a red rectangle outlines the region currently shown in the drawing window.  You can click, drag or resize the rectangle to manipulate the view in the drawing window.  There is also a handy slider bar for the zoom level.  The window is accessed from the View menu.





    You can become quite proficient using Visio simply by using Zoom to enlarge your workspace.  The most obvious benefit is that text is readable.  Zoom also increases the precision of shape operations making it easy to get exactly what you want.  It makes it easier to access shape object handles because they are spread farther apart.  These differences are subtle but the result is a better diagramming experience.


  • Visio Insights

    Gluing It All Together


    This is the third topic in a series discussing the essential features that make up the Visio application.


    Essential Feature:  Connectors

    The fundamental drawing type in Visio is the flowchart - a collection of boxes connected together by lines.  When Visio was first introduced, drawing programs mostly worked with geometric primitives.  Boxes and connectors were just sets of lines, with no intelligent behavior.  If you wanted to move a box to a new location, you also had to redraw the connecting line to make it reach the box again.


    To avoid the tediousness of fixing up drawings, Visio introduced a pair of diagramming innovations: connectors and glue.  A connector is a one-dimensional shape consisting of line segments.  Each endpoint is attached to a two-dimensional shape (the box) using glue.  When the box is moved to a new location, the connector stays attached and stretches as needed to maintain the connectivity between boxes.  Visio chooses the route the connector will take between its endpoints.



    Connectors have intelligent routing behavior.  They will avoid other shapes on the page where possible.  They will even show line jumps (or line breaks) where they cross over each other.  When you do choose to override Visio, you can easily control the connector path using green handles found on the shape.


    The default connector in Visio is the Dynamic Connector, which is the shape created by the Connector Tool.  However, any 1-D shape can be used as a connector.  You can turn an ordinary line into a connector by changing the ObjType cell in the Shapesheet from 0 to 2.  You can also make your own connector master shape.  If you name your master "Dynamic Connector", Visio will use it when you draw with the Connector Tool.


    There are some other interesting behaviors when using the Connector Tool in conjunction with masters in the Shapes window.  Try this:  Select an existing shape on the page.  Then switch to the Connector Tool and drag a master shape out onto the page.  Not only is the shape added, a connector is created and glued between the existing shape and the new shape.  You can also make Visio use a different connector shape with the Connector Tool.  Switch to the Connector Tool, then select a 1-D master in the Shapes window.  Now draw a connector on the page.  Visio uses the selected master instead of the Dynamic Connector.


    The Dynamic Connector is itself a master.  It's built into Visio.  The first time you draw with the Connector Tool, Visio looks for a master named "Dynamic Connector" in the Document Stencil.  If no master is found, Visio puts a copy of its built-in Dynamic Connector master in the Document Stencil (File > Shapes > Show Document Stencil).  You can edit this master to change the appearance of all connectors in the diagram.


    There's a lot more that can be said about connectors and also glue, but those are the basics.  Connectors streamline the diagramming process by maintaining their connections with shapes and managing their routing automatically.

Page 1 of 1 (9 items)