August, 2009

Visio Insights
The official blog of the Microsoft Visio product team

August, 2009

  • Visio Insights

    Organizing Diagrams with Containers

    • 17 Comments

    As the Visio product team began planning for the Visio 2010 release, we collected a lot of customer drawings.  Even though there were many different types of diagrams represented, we found some similarities.  We noticed that as diagrams got more complex, users added special shapes to help keep things organized and understandable.  Often users drew boxes around clusters of shapes to define a logical grouping.  That got us thinking whether we could help with this kind of organization, and the Containers feature was born.

    Flowchart sample

    You’ve probably used something like a container in Visio already.  In the past, you would draw a rectangle around some shapes, choose Send to Back to move it behind the shapes, add a text label and position it near the rectangle edge, and finally group everything to keep the shapes together.  This works but it makes it hard to access the individual shapes, and you must ungroup and regroup every time the contents changed.

    The Containers feature in Visio 2010 makes it easy to add a visual boundary around shapes, including a label.  Visio does all the work to maintain the relationship between the container and its contents.  To add a container to your diagram, first select the shapes to be contained.  Then choose the Container command from the Insert tab of the ribbon.  A gallery appears with several different container styles.  Click on a style to add the container to the diagram.

    image

    The shapes inside the container are not in a group, so you have direct access to continue working with them.  Shapes are added or removed simply by dragging them in or out of the container.  When dragging a shape, an orange highlight appears around the container to indicate that Visio will make the shape a member of the container.  The container can automatically grow or shrink as needed to fit the contents.  Moving, copying or deleting the container will move, copy or delete the contents as well.

    image

    Containers can be formatted just like regular shapes.  In particular the alignment of the heading is changed using the paragraph alignment buttons on the Home tab of the ribbon.  There is also a contextual tab that allows further customization of containers.  You can control how tightly the container bounds its contents by adjusting Margins or using the Fit to Contents command.  You can switch between different visual styles and change the position of the container heading.  It is also possible to lock the container to prevent shapes from being added or deleted.

    image

     

    The primary benefit of Containers is that you get both a visual grouping and a logical grouping of shapes in your diagram.  Your diagram is more readable and looks professional.  Visio does all the work to keep things together.  You just need to decide which shapes belong in the container.

    image

    In our next post, we’ll take a look at more capabilities of containers and how to create your own container shape.  Please tell us what you think about containers by using the Send a Smile feedback tool or by commenting on this post.

     

  • Visio Insights

    The New Shapes Window in Visio 2010

    • 16 Comments

    The Shapes Window has been redesigned in Visio 2010 to streamline the identification and use of shapes when creating diagrams. We've made several enhancements to make it easier to move from the initial "creation" phase to the "editing" phase of working with shapes. In this post, you'll learn all about the new features and how you can use them.

    clip_image002clip_image004

    Stencil list view navigation

    In the screenshot above, you'll see the new and improved UI for the Shapes Window. You can easily navigate between stencils by using the list view at the top of the window. This makes it easier to find and select the stencils you want and eliminates the problem of losing track of stencils, which were stacked at both the top and bottom of the Shapes Window in past releases. To open new stencils, you simply click on the "More Shapes" menu to choose from a wide variety of stencils.

    Support for live rendering of master shapes

    With live rendering, shapes are now drawn as they will appear when dropped on the page, with the current theme applied in full-color. This provides a more accurate preview of a shape's appearance before you select it for use in a diagram.

    Support for re-ordering shapes

    You can customize the order of shapes by simply dragging the icons to a new position in the stencil. By doing so, you can easily access the shapes you use most frequently together in one place. Modifications are persisted and will appear the next time you use the stencil.

    Quick Shapes

    Quick Shapes represent a subset of shapes that are more commonly used within a given stencil. The faint horizontal divider line shown in each open stencil indicates the division between Quick Shapes (above divider) and non-Quick Shapes (below divider). You can choose your own Quick Shapes by dragging the icon of a shape above the divider line.

    You can also click on the new "Quick Shapes" view which generates a stencil showing all the Quick Shapes across your open stencils. This makes it easy to use common shapes across multiple stencils without having to switch between them.

    clip_image006

    Collapsed view

    You can also collapse the Shapes Window, by toggling the small arrow on the top right of the window. This provides more screen space when working with large diagrams or on small monitors. The collapsed view can show all the shapes in the current stencil or just the shapes in the Quick Shapes view. The collapsed view is fully functional with the ability to drag and drop shapes.

    clip_image008

    Stay tuned for a future post that will cover the new AutoConnect functionality that ties into Quick Shapes for faster diagram creation.

    We're interested in your feedback on the new Shapes Window in Visio 2010 Technical Preview, so use the Send a Smile feedback tool or comment on the blog to let us know what you think.

  • Visio Insights

    Layout Improvements in Visio 2010

    • 9 Comments

    A challenge many users face when building diagrams is getting them to look neat and organized. Visio has included a number of features to help with the placement of shapes for many releases. Some of these are manual and only help when dragging a single shape. Others are automated but often a bit too rigid in forcing a layout style on shapes with no regard to how the user initially placed them.

    What if you could clean up a diagram with a few clicks, maybe just one, and preserve the work you have already put into it? In support of the Ease of Use and Process Management initiatives discussed in our introductory Visio 2010 post, we have added new layout features that make best-effort attempts to clean up a diagram while maintaining the general layout that already exists among the shapes. Rather than tell you how shapes ought to be organized, Visio assumes you have the placement pretty close and simply neatens things up a bit. After all, you know what kind of diagram you’re building and where your shapes belong!

    clip_image002

    This can be accomplished using Auto Align & Space in the Arrange group on the Home tab.

    clip_image004

    Auto Align & Space looks at the selected shapes and determines how two shapes that are connected together should be aligned and spaced from one another. It assumes that the shapes are close to the “right” position relative to the rest of the diagram and makes small adjustments to align and space them evenly, giving you a neat and orderly diagram. It acts on the selected shapes or, if no shapes are selected, on the entire page.

    For example, the selected shape below is connected to, close to and almost aligned with the shape on the left. Auto Align & Space examines the connectors and determines that the selected shape is downstream from – or a child of – the shape on the left. The selected shape is moved to align with the left shape and space from it using the default page spacing distance. Everything else connected downstream from the selected shape doesn’t get left behind – it follows along, but does not align or space. Of course, you could also select more shapes to clean up, or have no selection and clean up everything.

     

    clip_image002[6]

    image

    clip_image004[5]

         

    clip_image006

    image

    clip_image008

     

    In addition to the big Auto Align & Space button, we have broken out Auto Align and Auto Space as separate actions in the Position dropdown button. One of the big benefits the Ribbon enables is the ability to preview these actions so you can see the effects before committing to the change. We’ll talk more about previewing Ribbon actions in a future post.

    clip_image010

    Spacing Options lets you choose a non-default spacing distance between shapes for the automatic spacing actions.

    We kept the existing Align and Distribute features from previous versions of Visio and enhanced them by enabling preview. The Distribute actions are less frequently used and are located in the Space Shapes flyout menu.

    The existing rotate and flip shapes behaviors are in the Rotate Shapes flyout menu.

    Rotate Diagram is a new feature that allows you to change the direction a diagram flows by rotating or flipping it, but without rotating or flipping the individual shapes

     

    Rotate (and Flip) Diagram is handy when you want part of a diagram to rotate around a parent shape to extend in a different direction, or when you want an entire diagram to be vertical rather than horizontal. For example, selecting the shapes shown below and using Rotate Left makes the diagram more compact.

    clip_image012

    clip_image014

     

    Finally, we have also maintained the existing layout feature from previous versions of Visio. You can find Re-Layout Page in the Layout group on the Design tab. This is useful when you want Visio to completely revise the layout of the diagram. We pulled the most common layout configurations into a gallery so you can preview them to see how different layout choices will affect your diagram. More Layout Options takes you to the traditional dialog with full layout options.

    clip_image016

    As always, we're interested in your feedback on layout, so use the Send a Smile feedback tool or comment on the blog to let us know what you think.

  • Visio Insights

    The Office Fluent UI in the Visio 2010 Technical Preview

    • 8 Comments

    The Visio 2010 user interface has been completely revamped this release based on the Office Fluent or “Ribbon” UI. The Office Fluent UI represents a dramatic departure from the overloaded menu and toolbar design model of previous Visio releases. Visio’s extensive capabilities are now organized into logical, easy to find groups that help you accomplish tasks efficiently rather than choosing features.

    There are several design elements that comprise the Office Fluent UI.

    The Ribbon replaces menus and toolbars as the place to find functionality organized to help you accomplish tasks. You’ll find the many features that Visio 2010 has in common with other Office applications on Ribbon tabs of the same name.

    Here’s a brief breakdown of each of the core tabs across the Visio 2010 Ribbon.

    The Home tab contains the most common and frequently used drawing tasks and tools: cut/copy/paste from the clipboard, formatting text and shapes, drawing tools, and shape arrangement.

    image

    The Insert tab is where you introduce new elements into a drawing: pages, pictures, clip art, CAD drawings, as well as new Container and Callout shapes.

    image

    The Design tab includes everything you might change for an entire page: page orientation and size, themes, backgrounds, borders and title blocks, layout commands, and connector styles.

    image

    The Data tab provides everything you need for linking external data to drawings and shapes, displaying that data with data graphics, and generating legends to show the meaning of data graphics.

    image

    The Process tab includes functionality focused on the creation of business process diagrams: simplified creation of subprocesses, validation of diagrams based upon defined rules, import and export of SharePoint workflows.

    image

    The Review tab includes proofing and language tools as well as functionality for inserting and managing comments and other markup when reviewing diagrams.

    image

    The View tab is where all drawing and visual aids that assist diagram creation, such as rulers, grid, AutoConnect, and Dynamic Grid are turned on or off.

    image

    At the bottom of the application window is the new Status Bar. The right side of the Status Bar includes convenient controls for quickly adjusting the zoom level of the Visio drawing, switching into Full Screen mode, or switching between open drawings.

    image

    The left side of the Status Bar includes status items related to what you’re working with. Beyond merely showing status, these items help you take actions. For example, if you need to set the width of a shape, simply select it and click on the Width status item. The Size & Position window is opened with the Width value already selected.

    image

    In the upper left corner of the application window is the Quick Access Toolbar, into which you can add the commands you use most frequently, eliminating the need to switch to the Ribbon tab on which they are located while creating diagrams.

    image

    This post is merely an overview of the primary Office Fluent design elements you’ll see in Visio 2010 Technical Preview. Stay tuned for future posts that will explore the new design in greater detail.

    We're interested in your feedback on the new Office Fluent UI design in Visio 2010 Technical Preview, so use the Send a Smile feedback tool or comment on the blog to let us know what you think.

  • Visio Insights

    Improved Flowchart Routing in Visio 2010

    • 5 Comments

    When creating and maintaining flowcharts, a pain point users suffer from is ensuring that the connectors between shapes look good. Visio introduced the dynamic connector many releases ago to help simplify diagram maintenance. Dynamic connectors in combination with dynamic glue allow Visio to choose the sides of shapes to glue your connectors for the best looking results.

    In Visio 2010 we made improvements to Visio's routing engine to address some common flowcharting pain points. (For more on the dynamic connector and why you should use dynamic glue, see this previous post titled "Gluing It All Together". )

    Improving Flowchart Readability

    Clarity is important in flowcharts. Overlapping connectors flowing in opposite directions can create ambiguity about the meaning of the diagram. It is easy to get into a situation where two connectors appear visually to be connected, but were not explicitly connected by the diagram author. Visio 2010's routing engine detects such ambiguous situations and relocates connectors to actively avoid them.

    Consider the example below where I draw two dynamic connectors: one from shape A to B and the other from B to C. In Visio 2007, this leads to an ambiguous drawing, where it appears as if shape A is connected to shape C. Visio 2010 moves the connector between A and B to an alternate side of shape B to resolve the ambiguity.

    incoming conflict

    We made this design change based on user feedback. It scales to handle more than just a few connectors, and allows connectors to overlap when they are flowing in the same direction.

    A consequence of this change is that if you open a diagram that was created in older versions of Visio in Visio 2010, as you edit your diagram, you may see connectors relocate to different sides of shapes. Note that Visio doesn't move glue points of connectors that are statically glued.

    Relaxing Constraints on Flowchart Direction

    Visio flowcharts that use the "Flowchart" routing style have a routing direction, like "Top to Bottom" or "Left to Right". In flowchart routing, this controls what sides of shapes dynamic connectors (mostly) connect to. Strict adherence to this direction can easily lead to situations where a dynamic connector takes a path around a shape with 5 segments.

    Using "Top to Bottom" as my routing direction, routes generally exit from the bottom of a shape and connect to the top of the shape, except in cases where shapes line up exactly.

    In Visio 2010, we enable dynamic connectors to connect to alternate sides of shapes when the shapes are close to each other.

    virtual overlap

    To strike a balance between having simple looking connectors and still adhering to the flowchart direction, Visio connects to non-standard sides of shapes when two shapes are close to each other in the axis of the routing direction.

    As always, we're interested in your feedback on routing, so use the Send a Smile feedback tool or comment on this post to let us know what you think.

  • Visio Insights

    Details on Container Behaviors

    • 0 Comments

    In our previous post we introduced the Containers feature in Visio 2010 and demonstrated some of their basic capabilities.  In this post we’ll look at some additional behaviors of containers. 

    Display Order

    Typically in Visio the most recently added shape is shown on top of the other shapes on the page.  To change this display order you can use commands such as Send Backward or Bring Forward, which are found in the Arrange group on the Home tab.  Containers are intended to sit behind other shapes in the drawing, so we added a new feature in Visio 2010 where we could designate a shape to automatically go behind other shapes when dropped.  Thus you never have to move a container to the back, even if it was the last shape added.

    image

    Selecting Shapes In Containers

    In the previous post we mentioned that containers allow full access to the shapes inside because the container does not form a group.  You can directly click on a shape in a container to select it.  However, whenever shapes overlap, selection works differently; and it can be more challenging to select the exact shapes you want.  We often observe users that select multiple shapes by dragging their cursor to create a selection rectangle.  This is not possible when working on top of other shapes because the drag action will select the underlying shape and start moving it.  Additionally, clicking a shape that is already selected will normally deselect it, but clicking a selected shape that overlaps another will deselect the shape and also select the shape underneath.

    To make sure that containers do not interfere with the natural selection actions of users, we gave them a special ability.  We made the interior of the container act like it had no fill for the purposes of selection.  You can see this behavior in the Technical Preview by trying this: starting with no selection, place the cursor in one corner of the interior of the container and drag a selection rectangle around several shapes inside the container.  You will find that the container is not selected and dragged as would normally occur with a filled shape.

    image 

    We added one more touch to aid with shape selection in a container.  There is a command in the Container Tools contextual tab and on the shape context menu to select all the container’s contents at once.  You can access the Select Contents command when the container is selected or when a member of the container is selected.

    image

    Disband Container

    Shapes placed into a container become members of the container.  When the container is moved, copied or deleted the member shapes are also moved, copied or deleted.  Since deleting a container deletes the members of the container too, what do you do if you only want to get rid of the container?  You could drag all the shapes out first, but this is a lot of work to move them back afterwards.  Thus we added a Disband Container command to the Container Tools contextual tab and shape context menu.  This command deletes the container without deleting the contents.

    Boundary Shapes

    So far we have always shown the member of a container inside the container boundary.  It is also possible to put shapes directly on the container boundary.  The shapes are still considered members of the container, but they behave differently during resize actions.  To put a shape on the boundary of a container, simply drag it there.  Notice the difference in highlighting feedback between dragging a shape into a container versus onto the boundary.  Boundary highlighting appears along a single edge of the container.

    image

    Once a shape is on the container boundary it will move with that boundary.  You can resize the container and the shape will stay on the boundary.

    There’s even more that containers can do once you get into custom shape development.  We’ll save that for a future post.  Next we will look at a special application of the Containers feature.  And don’t forget to send us your feedback through the Send a Smile feedback tool or by commenting on this post.

Page 1 of 1 (6 items)