Our previous post on AutoConnect in Visio 2010 discussed how Visio 2010 makes it simpler and faster for end users to create connected diagrams such as flowcharts. Many developers will be pleased to hear that Visio 2010 also brings greatly simplified utilities for working with connected diagrams programmatically. The Visio 2010 API contains new methods that let developers manipulate and traverse connected diagrams or graphs at a higher level of abstraction than previously, which can result in greater programmer productivity and more concise, readable code.
In this blog post, we will introduce the new Visio 2010 methods used for working with connected diagrams. Then we will see these methods in action by doing a visual walk-through of a program that manipulates a flowchart. (The source code and diagram used below are also available for download here.)
For each of the following API methods, we give a brief description on what the method does, along with an explanation of the method’s arguments. This is not meant to be a complete reference; the forthcoming Visio 2010 SDK will contain much more complete documentation on these methods.
Returns an array of identifiers (IDs) of shapes that are one degree of separation away from the given shape (i.e. separated by a 1-D connector).
Returns an array of identifiers for the shapes that are glued to a shape. For instance, if the given shape is a 2-D shape that has multiple connectors attached to it, this method would return the IDs of those connectors. If the given shape is a connector, this method would return the IDs of the shapes to which its ends are glued.
Creates a new Shape object on the page, places the new shape relative to the specified existing target shape, and adds a connector from the existing shape to the new shape. Returns the newly created shape. This feature parallels the AutoConnect feature in the Visio user interface.
Splits the specified connector with the specified shape. Returns the new, duplicated connector.
Unglues the specified connector end points and offsets them the specified amount from the shapes they were joined to.
Automatically draws multiple connections in the specified directions between the specified shapes. Returns the number of shapes connected.
Here is a screenshot of a Visio drawing we will be manipulating and traversing:
Using a few of the above listed methods, we’ll add to this flowchart and traverse it. Each step along the way, we’ll show you the corresponding line of C# code along with a screenshot of the change it caused.
Note: In the below code snippets, page refers to the active drawing page, and the Visio namespace is an abbreviation of Microsoft.Office.Interop.Visio. The meanings of most other variables should be apparent from the context.
First, let's split the connector that currently connects "Start Event" to "Task" and insert a Sub-Process shape. We can access that connector using the GluedShapes method. Once we’ve accessed the connector, we use SplitConnector to split it.
Array shapesGluedToStartEvent = startEvent.GluedShapes(Visio.VisGluedShapesFlags.visGluedShapesOutgoing1D, "", null); // In this example, the above array has 1 element. Let's get that element. int splittableConnectorID = (int)shapesGluedToStartEvent.GetValue(0); Visio.Shape splittableConnector = page.Shapes.get_ItemFromID(splittableConnectorID); page.SplitConnector(splittableConnector, subprocessMaster);
This yields the following result:
Let's say we want to programmatically access the "Task" shape. If we have a reference to "Start Event", we can access "Task" by traversing across "Sub-Process", using ConnectedShapes.
Array shapesConnectedToByStartEvent = startEvent.ConnectedShapes(Visio.VisConnectedShapesFlags.visConnectedShapesOutgoingNodes, ""); // In this example, the above array has 1 element. Let's get that element. int subProcessID = (int)shapesConnectedToByStartEvent.GetValue(0); Visio.Shape subProcess = page.Shapes.get_ItemFromID(subProcessID);
// Repeating the same action as above to get from "Sub-Process" to "Task". Array shapesConnectedToBySubProcess = subProcess.ConnectedShapes(Visio.VisConnectedShapesFlags.visConnectedShapesOutgoingNodes, ""); int taskID = (int)shapesConnectedToBySubProcess.GetValue(0); Visio.Shape task = page.Shapes.get_ItemFromID(taskID);
Now let's use DropConnected to drop an End Event shape onto the page and have "Task" connect to it. We use the default connector, so the last argument can be null.
Visio.Shape endEvent = page.DropConnected(endEventMaster, task, Visio.VisAutoConnectDir.visAutoConnectDirRight, null);
We hope this walk-through was a helpful illustration of Visio 2010’s new API utilities for working with connected diagrams. This article covers only a small part of the enhancements made to Visio’s API for the 2010 release; more information will come in future posts on this blog, and with the release of the Visio 2010 SDK.
We’re interested to hear what developers think of this API functionality, so please use the Send a Smile feedback tool or leave a comment below.
AutoConnect was a feature first introduced in Visio 2007. The original intent of the feature was to simplify the creation of connected diagrams such as business process flowcharts by accomplishing multiple tasks in a single action:
1. Dropping a new shape on the page.
2. Connecting the new shape to the original shape.
3. Aligning and spacing the new shape attractively with other shapes in the diagram.
The notable efficiency is that AutoConnect accomplishes these tasks without the need to switch to the Connector tool (and subsequently back to the Pointer tool).
In Visio 2010 we have extended AutoConnect to make the creation of connected diagrams even more efficient. Here’s a summary of the new features.
In many ways, AutoConnect’s core ability of adding new connected shapes works much the same as it did in Visio 2007 – with one very significant enhancement in Visio 2010. AutoConnect now allows you to choose from up to four Quick Shapes from the current stencil as the added shape.
Note: Quick Shapes represent a subset of shapes that are more commonly used within a given stencil. For more information on the new Quick Shapes feature in Visio 2010, see the earlier blog post concerning the new enhancements to the Shapes Window.
In the image above, when hovering over the AutoConnect arrow to the right of shape #1, a Mini Toolbar appears that contains the first four shapes from the Quick Shapes area of the active stencil in the Shapes window. As you point to a shape on the Mini Toolbar, a live preview of the shape and the connector is shown on the page. Clicking on the shape adds it to the page, connected, aligned, and spaced.
As you create and edit connected diagrams, very often the need is to connect one shape to another already on the drawing page. AutoConnect can simplify this task in a couple ways.
In the image above, AutoConnect automatically previews a connector between the original shape (#1) and a neighboring shape (#2) when hovering over the AutoConnect arrow. Clicking on the arrow completes the connection. The neighbor connect feature looks for a shape in close proximity in the direction of the respective AutoConnect arrow. (Note: The neighbor connect feature was not functional in the Tech Preview of Visio 2010 but will be fixed in the Visio 2010 Beta.)
But what if the intent is to connect shape #1 to shape #3? In Visio 2010 this can now be accomplished by simply dragging a new connector from any AutoConnect arrow.
In the sequence above, after hovering over the AutoConnect arrow to the right of shape #1, a connector is dragged to the target shape #3. The connector can be glued dynamically to shape #3 as shown or to a particular connection point if desired. Although the behavior while dragging is identical to that of the Connector tool, the important distinction is that switching to the Connector tool was not required and further diagram editing can continue with the Pointer tool.
As always, we're interested in your feedback on the enhancements we’ve made to AutoConnect, so use the Send a Smile feedback tool or comment on the blog to let us know what you think.
Visio 2010 introduces a new way to apply a background or border and title design to your diagrams. The new Backgrounds and Borders & Titles galleries on the Design tab in the ribbon let you choose from a variety of styles and apply them with one click.
For several versions, Visio has provided a way to apply a background design to diagrams using shapes that you drag out from the Backgrounds stencil that opens with many of the templates. In Visio 2010, you can do this by clicking on a preview thumbnail in the Backgrounds gallery.
When you apply a background, Visio creates a background page (named “VBackground-1”, if it’s the first one), drops the background shape on it, and assigns it to the foreground page.
If you right-click on the preview thumbnail in the Backgrounds gallery, you can choose to apply it to all the pages in the document or just the current page.
Once the background page is created, you can click on its page tab to put additional items on it that you want to appear on all the foreground pages it’s assigned to, like your company name or logo.
The color of the background can be defined by a theme. After a background is applied, additional themes with background colors appear in the Themes gallery. When one of these themes is applied, the background takes the color from the theme.
You can also click on the Background Color command at the bottom of the Backgrounds gallery to pick a color.
Borders & Titles
You can apply border and title designs to your pages in a way similar to backgrounds, using the Borders & Titles gallery on the Design tab. As with the Backgrounds gallery, a background page is created to hold the border shape. And you can right-click on the gallery thumbnail to choose to apply the border to all the pages in the document or just the current page.
You can edit the border’s title by clicking on the background page tab, selecting the border shape, and typing a title. This title will appear on all the foreground pages that the background page is assigned to, so it works best as a document title rather than a title for individual pages.
If you don’t want the border’s footer (which usually includes a page number) to appear at the bottom of the page, you can right-click on the border shape on the background page and choose Hide Footer.
Let us know what you think about the new Backgrounds and Borders & Titles features in the Visio 2010 Technical Preview using Send a Smile or a comment on the blog.
In Visio 2007, we introduced the Themes feature to make it easy to apply a professionally designed look to a diagram. In Visio 2010, the Themes feature gets a whole new user interface that takes advantage of the Office Fluent UI. The theme choices are displayed in a gallery on the Design tab in the ribbon.
An improvement over Visio 2007 is that you can apply both theme colors and effects with one click on a thumbnail in the main Themes gallery, instead of having to visit two separate task panes. Each thumbnail is a pairing of a color scheme from the Colors gallery and an effect scheme from the Effects gallery.
As in Visio 2007, the color schemes include colors for text, fills, lines, connectors, shadows, and backgrounds, as well as a collection of five accent colors. The effect schemes include the font used in text, as well as formatting for the fills, lines, connectors, and shadows.
If none of the theme pairs in the main gallery are to your liking, you can choose from any of the schemes in the Colors or Effects galleries, which are located next to the main gallery.
As in Visio 2007, you can also click “Create New Theme Colors” or “Create New Theme Effects” at the bottom of the gallery to create your own custom theme.
Themes is one of the features that demonstrate the Live Preview capability of the Office Fluent UI. As you move the cursor over each thumbnail in the gallery, the theme’s formatting is previewed on your diagram. This lets you quickly experiment with various looks without forcing you to commit to the change. If you don’t click on anything, the diagram reverts back to whatever was applied before the preview.
Live Preview helps break the repetitive “Undo” cycle of applying formatting to content, deciding against the formatting change, choosing Undo to return to the original formatting, and then starting the cycle all over again.
Live Preview is available for many other galleries and menus in Visio 2010. Another feature that makes good use of it is the Containers feature discussed in an earlier post. When you move the cursor over the various container designs in the Container gallery on the Insert tab, the container style is previewed on the selected shapes so you can see what it would look like if applied.
If you’re running the Visio 2010 Technical Preview, check out the new Themes user interface and Live Preview and let us know what you think via Send a Smile or a comment on the blog.
The Visio team is anxiously preparing to introduce Visio Services to the world at the Microsoft SharePoint Conference 2009, which runs from October 19th to 22nd, 2009 in Las Vegas.
Visio Services is a new SharePoint feature that allows you to share Visio drawings across your organization in SharePoint. But it does more...
If you're interested in hearing what, register for the conference and come listen to our talks. Don't worry if you can't make it -- in the coming months, we'll be presenting conference highlights on the blog as well as an in depth look at Visio Services features.
Harry Miller and Jonathan Foster in Office Content Publishing recently created a new educational video series called “Clarity," whose aim is to encourage people to learn more about how to use Visio. (Note that these videos feature Visio 2007, rather than the newer Visio 2010 Community Tech Preview we have been discussing on the blog recently.) Here are the first two episodes of “Clarity”:
Thanks Harry and Jonathan for the great videos!
In our last post, we discussed Diagram Validation—a new Visio 2010 feature which allows users to check their diagrams for common errors and allows companies to ensure that employees are following certain diagramming standards. In this post, we’ll talk more about how validation rules are stored and how to create custom validation rules.
With Visio 2010, we provide diagram validation support for Basic Flowchart, Cross Functional Flowchart, Microsoft SharePoint Workflow and Business Process Modeling Notation diagrams. We also provide an extensive validation API for creating custom validation rules. The supported functionality includes adding and deleting rules and rule sets, directly manipulating validation issues, triggering validation, and detecting the validation event. This support allows companies to develop custom validation rules to meet their own needs.
At a high level, validation rules belong to rule sets, such as the Flowchart and BPMN rule sets. To see which rule sets are available in your current diagram, click the Check Diagram pull-down menu on the Process tab, and then click Rules to Check. Rule sets with a checkmark beside them are active—rules from these sets will be evaluated during validation. Clicking on a rule set will toggle it between active and inactive.
There are two main approaches to creating custom validation rules and rule sets.
1. You can write validation rules and validation logic that will be stored in a custom Visio template. These rules are automatically available to users that create diagrams based on this template. When a user clicks Check Diagram on the Process tab, Visio uses the validation logic provided to determine whether the diagram has issues. In Visio 2010, this technique is used for the Basic Flowchart, Cross Functional Flowchart and Business Process Modeling Notation templates.
2. You can also write validation logic in code and deploy this logic as part of a Visio solution. For this approach, the solution code listens for the appropriate RuleSetValidated event and uses its own logic to determine the list of issues to add to the document. In Visio 2010, this technique is used for the Microsoft SharePoint Workflow template.
In both cases, the validation rules and corresponding rule sets are stored inside your Visio file. To see how these rules are stored, you can save a Visio file with validation rules as an XML Drawing (*.vdx) and open the XML Drawing in an XML editor. A search using the keyword “validation” will lead you to the XML related to validation. In the image below, a section of the XML for the Flowchart rule set is shown.
Notice that each rule in the Flowchart rule set contains a RuleFilter and RuleTest property. These properties define the logic that Visio uses to determine whether a rule applies to a particular Visio object, and whether the rule is satisfied by the object. The syntax for each logic expression is the same as a ShapeSheet expression, but the allowable functions differ slightly. You can see many examples of valid RuleFilter and RuleTest expressions in our Flowchart and BPMN rule sets.
If you save a Microsoft SharePoint Workflow diagram as an XML Drawing (*.vdx) and open the XML Drawing in an XML editor, you will see that there is no logic in the RuleFilter and RuleTest expressions. In this case, the solution contains code with the validation logic. The SharePoint Workflow solution listens for the SharePoint Workflow RuleSetValidated event, and, when this event occurs, it scans the diagram to determine if there are issues. When an issue is found, it uses the validation API to add the issue to the document. Visio automatically displays these issues in the Issues Window.
Although you can modify the validation properties directly in the XML, we suggest that developers use the validation API to manipulate rules programmatically. You can use Visual Basic for Applications, accessible through the Developer tab, and its Object Browser to view the validation API. The key objects, methods and properties for validation are shown below.
There is a lot more that can be said about creating custom validation rules, but hopefully this post gives you a good sense of the options available for using Diagram Validation. The following list summarizes these options.
1. End-users and companies can use the default rules provide in Visio 2010 to check their diagrams for issues and ensure diagram consistency. Out-of-the box support is included for Basic Flowchart, Cross Functional Flowchart, Microsoft SharePoint Workflow and Business Process Modeling Notation diagrams.
2. Developers can extend the out-of-box support by creating custom templates with validation rules. These rules are available to users who create diagrams from these templates.
3. Developers can create Visio solutions that listen for the validation event. When the Check Diagram button is clicked, the solution can run code to validate complex logic and use the validation API to add issues to the list of issues displayed in the Issues Window.
4. Developers can create Visio solutions that trigger validation from within their code. This allows solutions to make use of validation without relying on a click of the Check Diagram button. For example, the Microsoft SharePoint Workflow template triggers validation when a user clicks the SharePoint Workflow button Export on the Process tab.
We’re interested to hear your feedback, so use the Send a Smile feedback tool or comment on this post to let us know what you think.
Are all the shapes in my diagram labeled? Do I have any loose connectors that are not attached to other shapes? We have heard from customers that it is often hard to answer these types of questions, especially in large diagrams. As a result, they spend a lot of time manually checking diagrams for errors. At the same time, they have to manually ensure that the different diagrams they create are visually consistent.
We have also heard from companies that they want to enforce certain diagramming standards or rules within their organization. It’s much easier for different people to understand a diagram if it uses standardized notation. As an example, many companies are adopting BPMN as a standard for business process modeling.
To help address these needs, we added support for diagram validation in Visio 2010. This allows users to check their diagrams for common errors and allows companies to ensure that employees are following certain diagramming standards. With Visio 2010, we provide diagram validation support for Basic Flowchart, Cross Functional Flowchart, Microsoft SharePoint Workflow and Business Process Modeling Notation diagrams. Companies can also develop custom rules for their own needs.
You can access the diagram validation functionality from the Process tab. Once you start working on a diagram with a supported set of rules, you can click the Check Diagram button to see whether the diagram has any issues.
Visio will either tell you that there are no issues in the document, or it will list the issues in the Issues Window. In the diagram below, a connector is not attached to the next shape in the flowchart. When the Check Diagram button is clicked, Visio displays two issues to fix. To easily find shapes with issues, you can click on an issue and the corresponding shape will be selected.
Once you fix the listed issues, you can click Check Diagram to check that there are no longer any issues with the diagram.
Sometimes you might find that an issue does not apply to a certain shape in your diagram. When this happens, you can ignore the issue and Visio will not display it in the Issues Window. If a rule does not apply to the entire diagram, you can also ignore the rule so that no issues associated with that rule are displayed. You do this by right-clicking an issue in the Issues Window, and selecting the appropriate option.
Using the same menu, you can also choose to display the ignored issues and to rearrange issues in the Issues Window so that issues with the same rule, category or page are next to each other.
Validation rules are grouped into logical sets of rules, such as BPMN and flowchart rule sets. When you create a new Basic Flowchart, Cross Functional Flowchart, Microsoft SharePoint Workflow or Business Process Modeling Notation diagram in Visio 2010, the appropriate rule set is automatically available in your document. It is also easy to import the flowchart rule set into flowchart diagrams made with previous versions of Visio. Simply open your legacy diagram in Visio 2010 and, on the Process tab, click the Check Diagram pull-down menu and then click Import Rules From.
The flowchart rule set is always available to import into a diagram. You can also import rules from other Visio diagrams. Any open diagrams with rules sets will be listed as possible sources to import rules from. This makes it easy to add new validation rule sets to any diagram.
In our next post, we’ll talk more about how validation rules are stored in a diagram, and how a developer can write new validation rules.
We are interested in your feedback on diagram validation, so use the Send a Smile feedback tool or comment on the blog to let us know what you think.
Visio has long had a setting called “developer mode” that developers and shape designers can enable in order to surface extra functionality. In previous versions of Visio, enabling developer mode made new items appear in couple of different menus (Chris Roth has a good overview here). With Visio 2010, we have taken advantage of our new Fluent user interface by grouping this extra functionality into one Ribbon tab named “Developer”. The result is one central location for working with code and designing shapes in Visio:
The developer tab does not appear by default, since we want to provide a streamlined interface for users who do not need it. To surface the Developer tab, click on the Backstage Button, and click on Options. This brings up the Visio Options dialog. Click on the Customize Ribbon section. On the right-hand side, check the box that says “Developer” and press OK.
(Note: an alternate method is to go to the Advanced section in Visio Options and check the box at the bottom that says, “Run in developer mode”.)
Here is an overview of how the Developer tab is organized, group by group.
These two leftmost groups are common across many Office applications. Use them to work with Visual Basic code and ActiveX controls. Note that the Macros button is also available in the Ribbon’s View tab, so users who do not have developer mode turned on can still access this button.
This group contains functions used when designing shapes.
Clicking on the top part of the Show ShapeSheet button opens the selected shape’s ShapeSheet. (You can read more about the ShapeSheet in a previous post.) Clicking on the bottom part of this button lets you choose to instead view the ShapeSheet for the active page or the active document. This makes these ShapeSheets easier to access than they were in previous versions of Visio.
The geometry tool is a split button that contains different drawing tools. Note that although a similar button is available on the Home tab, that button only contains the Rectangle, Ellipse, and Line tools, and not the Freeform, Arc, and Pencil tools.
Clicking on the Shape Name button will open up the dialog that in previous versions of Visio was available under “Format > Special” (this dialog box has been renamed “Shape Name” to better reflect its purpose):
The Behavior and Protection dialogs that were previously in the Format menu are in the Shape Design group now:
This group lets you create a new metric or US stencil.
This group lets you toggle the view of the document stencil, drawing explorer window, and master explorer window.
We hope the Developer tab makes your development and shape design tasks more convenient. We’re interested to hear your feedback, so use the Send a Smile feedback tool or comment on this post to let us know what you think.
For flowcharts that have clearly defined stakeholders and assignments, cross-functional flowcharts are often used. Today, cross-functional flowcharts can span a whole conference room’s wall. The number of swimlanes can grow to five or even ten! At the beginning of the Visio 2010 planning, we heard from our users that it is hard for them to manage swimlanes and to author large cross-functional flowcharts. We decided that we need to make our cross-functional flowchart more scalable and easier for repeated editing and collaboration.
Here is a list of the top cross-functional flowchart improvements we have made in Visio 2010:
1. Simpler Creation Experience
Just like in the past, you can create a cross-functional flowchart starting from the Cross-functional Flowchart Template. Upon creation, we will automatically create two swimlanes in the cross-functional flowchart for you. To add more swimlanes, you can now mouse along the edge of the cross-functional flowchart to where you want to add the swimlane, and a blue arrow will appear.
Click on the blue arrow and voila, you have a new swimlane inserted!
2. Cross-functional Flowchart Configurations (i.e. “You’ve got options!”)
Once you have created your cross-functional flowchart, you have several options to modify the cross-functional flowchart to your liking. While in the past you had to decide on the flowchart orientation at creation time, you can now change that any time you want, even long after the flowchart is created.
For example, here’s a horizontal cross-functional flowchart:
To change to vertical orientation, you can simply visit the new cross-functional flowchart tab and use the Orientation drop-down menu to switch to a vertical cross-functional flowchart!
Similarly, if you look at the cross-functional flowchart tab, you also have other options such as the showing/hiding of the title or phase bars and the direction of the cross-functional flowchart.
3. Swimlanes as Containers
We’ve discussed the idea of containers in one of our previous posts. One fun fact about the new cross-functional flowchart in Visio 2010 is that swimlanes are containers! Effectively, a cross-functional flowchart in Visio 2010 is in fact a list of containers. What does that mean to you? First, a swimlane highlights when shapes are added to a swimlane:
Second, you can easily reorder swimlanes and the shapes they contain will come along!
4. Editing with Fewer Fix-ups
One common feedback we get from users is that once they have created the flowchart, there is still a lot of fix-up needed. For example, users would often need to align the shapes and fix-up connectors. Cross-functional flowchart is no exception. In one of our previous posts, we discussed how flowchart routing hass been improved. This applies to cross-functional flowcharts as well: cross-functional flowcharts use the same routing style and direction as simple flowcharts, but the additional presence of swimlanes and phases can lead to routes that get hidden because they overlap with swimlane and phase boundaries.
In Visio 2010, the routing engine looks for these overlaps and adjusts routes to avoid them. If necessary, Visio also moves the glue points of dynamic connectors to different sides of shapes to avoid the boundary.
In future posts, we will introduce more improvements for flowcharting, many of which will also benefit cross-functional flowcharts. So stay tuned!
Please use the Send a Smile feedback tool or comment on this post if you have further thoughts on the cross-functional flowchart feature in Visio 2010. We would love to hear from you!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!
This can be accomplished using Auto Align & Space in the Arrange group on the Home tab.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The Review tab includes proofing and language tools as well as functionality for inserting and managing comments and other markup when reviewing diagrams.
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.
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.
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.
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.
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.
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.
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 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.
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.
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.
One of the first things you’ll notice when you start Visio 2010 is the new getting started screen, which is where you’ll choose a template for the diagram you plan to create. While it’s similar to the “Getting Started with Microsoft Office Visio” screen that greets users of Visio 2007, it’s actually part of the new Microsoft Office Backstage View that is common to all Office 2010 applications.
The Backstage View is the location for features that interact with the Visio file as a whole, such as opening, saving, printing, and setting file properties, as well as settings and information for the application. Since these are features that don’t need to be visible all the time while you’re building a diagram on the Visio drawing canvas, they are located in the Backstage View.
The Backstage View consists of a set of tabs that group related features. In addition to the “New” tab, which is the one that appears when you launch Visio, there are tabs labeled “Info”, “Recent”, “Print”, “Share”, and “Visio”. Each tab can be accessed by clicking on its label in the navigation pane on the left side of the screen. We will have more to say about the other tabs in a future post.
The “New” tab is where you get started on a diagram by picking a template from one of the available template categories. The templates you use appear in a “Recently Used Templates” section at the top of the '”Home” screen for quick access. Navigation in the template categories is similar to that in a Web browser, with back, forward, and Home buttons at the top.
In addition to choosing a template, the “New” tab lets you start a new diagram without a template by clicking on “Blank Drawing” at the bottom of the screen. You can also access the Office Online templates, open the sample diagrams, or start a new diagram from any existing Visio file.
If you would rather get started by opening a file you worked on previously, the “Recent” tab provides access to the list of most recently opened Visio files, each with a thumbnail preview. Files can be pinned to the top of the list for quicker access.
Once you’re working on a diagram on the Visio drawing canvas, the Backstage View can be accessed at anytime by clicking the left-most tab in the Ribbon, which is labeled with the Office logo.
We are interested in your feedback on the new getting started experience in the Visio 2010 Technical Preview, so use the Send a Smile feedback tool or comment on the blog to let us know what you think.
Microsoft Visio 2010 is part of the Office 2010 wave of products. While Visio is sold separately from the applications in the Office suite, we share quite a bit of functionality with these applications. In Visio 2010 you will see the adoption of the Office Fluent User Interface and many other shared capabilities in Office. In the coming posts we will introduce the Visio 2010 features, showing where Visio is similar and where Visio is different from other Office apps.
Every product development team in the Office 2010 wave is blogging about the 2010 release. Additionally there is a central Office 2010 Engineering blog to cover many of the shared features in Office. We’ve added links to these blogs in the side bar, and we will be referencing information that is important to Visio.
One of the initial posts on the Office 2010 Engineering blog discusses our Send-a-Smile feedback tool. The tool is installed automatically with Visio 2010 Technical Preview and provides a fast and simple way to tell us what you think. You can enter a brief message and send along a screenshot of what you are looking at.
The Visio product team reviews all the submissions and categorizes them into comments, bugs and feature requests. Comments help inform our decision-making about what is working well and what needs improvement. Bugs are investigated and fixed if possible. Feature requests are evaluated for possible inclusion in the product or tracked for the future.
Please let us know what you like or dislike by using this convenient tool. As always, you can comment on the blog too.
This week Microsoft announced that Microsoft Office 2010, Microsoft SharePoint Server 2010, Microsoft Project 2010 and Microsoft Visio 2010 have reached the technical preview engineering milestone. A limited number of invited participants can now download Visio 2010 to try it for themselves. This milestone also kicks off our coverage of Visio 2010 on the Visio Insights blog!
Visio 2010 focuses on three major areas of investment:
Ease of Use
Visio 2010 incorporates the Office Fluent User Interface and design philosophy. The improved organization and presentation of Visio’s capabilities helps you complete tasks and create better looking diagrams with greater efficiency. The Shapes Window gets a new look and new capabilities to make organizing shapes and adding them to the drawing even easier. Within the drawing window we added productivity improvements like shape insertion and automatic alignment & spacing to speed up initial diagram creation AND assist with editing and maintaining diagrams over time.
Visio 2010 delivers a great new experience for working with process diagrams. We've redesigned our cross-functional flowcharts to be simple, scalable, and reliable. We've added new diagram types for the Business Process Modeling Notation standard and for designing SharePoint workflows, which can be configured and deployed with SharePoint Designer 2010. Sub-processes and containers break up a diagram into understandable pieces, and the Validation feature can analyze a diagram to ensure it is properly constructed. Visio integrates with SharePoint to provide a process diagram library for centralized storage of process documents.
Visio 2010 can take data-refreshable diagrams and publish them to SharePoint for broad distribution to anyone with a web browser. Visio Services performs data refresh and rendering on the server and delivers up-to-date diagrams in the browser. The diagram author no longer needs to repost the diagram every time the data changes, and diagram viewers no longer need the Visio client to see the diagram.
Visio 2010 application workspace
Over the coming weeks and months we'll introduce Visio 2010 in depth. We will cover the features in Visio 2010 as well as discuss some of the customer input and decision making that went into the release. Whether you are an interested user, a shape designer, an IT professional, or a developer you'll find valuable information about the product.
We also look forward to your feedback on the product and your discussion on the blog. Please tell us what you think and what you want to know more about.
We’re excited to announce that the Visio team is taking nominations to participate in the Visio 2010 Technical Beta program! We will be sending out a limited number of invitations to download and install Visio 2010 Technical Preview in July. The team is excited to get valuable feedback and early testing from our community that will help us make this a great release. Here is your opportunity to nominate yourself to participate in the program (space is limited). If you’re interested, please go here to sign up for Microsoft Connect and apply to be part of the Technical Preview. When asked, select Visio as the application you’re most interested in testing (question 13 on the survey).
We look forward to hearing from you.
P.S. Visio MVPs are already nominated and need not apply.
A few updates…
We recently reported the availability of Service Pack 2 (SP2) for Visio 2007. We received a few questions about how to use the XMI export feature in UML diagrams. The behavior in SP2 is exactly the same as in previous versions. Integrating it into the UML solution and retiring the separate download should make life easier for everyone, including us! The following VBA example demonstrates the interface:
Application.Addons("UML Background Add-on").Run("/CMD=400 /XMIFILE=""C:\path\file.xmi""")
Application.Addons("UML Background Add-on").Run("/CMD=400 /XMIFILE=""C:\path\file.xmi""")
The XMI export acts on the active document, so be sure to set that if your application session has multiple documents open. If you’re not familiar with VBA, the extra quotation marks in the XMIFILE argument are used to escape the quote character – the value passed in must be wrapped in quotes.
Visio Conference 2008 Videos
Last year, we posted links to videos from the Visio Conference 2008, where we shared a few glimpses into the next version of Visio. The links have changed – replace the visioconference2008 part of the URL with visio2008 to get to the video site. Note that some of the videos are quite large and can take a bit to download.
Yesterday, we released Service Pack 2 (SP2) for Visio 2007. You can download and install it from:
Among the issues we've addressed in SP2 are these:
In addition, SP2 provides these new capabilities:
The Visio 2007 Viewer Developer Reference is up on MSDN and can be accessed at: http://msdn.microsoft.com/en-us/library/cc297217.aspx.
The reference includes the full API reference and some short samples on how to embedded the viewer in different environments. The Viewer provides an application programming interface (API) that enables solution developers to perform the following tasks:
Visio 2007 provides data connectivity support for a number of data sources such as Excel, SQL and SharePoint Lists. One interesting scenario is to pull in schedule information from a SharePoint calendar (a special list type in SharePoint) to generate a Visio timeline.
Visio MVP David Parker has posted an article that illustrates how to use Link Data to Shapes and the External Data window to bring in the SharePoint data and drop linked shapes onto a timeline. As David shows, the "secret" is to map the names of the date data fields to the names of the Shape Data properties used by Visio's timeline shapes. That way the timeline shapes don't just carry the SharePoint data around; they use the data to control their position on the timeline.
This mapping technique is useful for more than SharePoint lists and for more than timelines. Use it whenever you want to link data to existing Shape Data properties on a shape. You don't need to go rework the data source to match Visio's property names.
For anyone who wasn't able to attend the Visio Conference 2008 this February or has been itching to show everyone else the cool things coming in Visio "vNext", the wait is over! Videos from all the conference sessions are posted on http://www.visiotoolbox.com. Click on the conference link in the bottom-right corner of the page - or follow the links below.
Each session consists of the PowerPoint slide deck, speaker audio and video of the demos. Use the links below to jump to the sessions for each track:
Keynotes - http://www.visiotoolbox.com/visioconference2008/Keynotes/start.htm
General Sessions - http://www.visiotoolbox.com/visioconference2008/GeneralSessions/start.htm
Solutions Track - http://www.visiotoolbox.com/visioconference2008/BusinessSolutions/start.htm
Developer Track - http://www.visiotoolbox.com/visioconference2008/SolutionDevelopment/start.htm
End User Track - http://www.visiotoolbox.com/visioconference2008/EndUser/start.htm
For those specifically interested in Visio "vNext", here are the four sessions where we demonstrated some of the capabilities coming next release:
Visualizing Information Work Today & Tomorrow - Jeff Raikes keynote
The Visio Business Today and Software Development Process - Richard Wolf keynote
Visio Future Investments - Bill Morein
Visio Futures - API Insights - John Haug and Philippe Arida
You should be able to click on a link and then click on Play. The videos take a varying amount of time to load - a few minutes in some cases. If you find that the UI frame around the slides / video is missing, try refreshing the web page. This will reload the controls but the session will resume playing where you left off.