September, 2010

Visio Insights
The official blog of the Microsoft Visio product team

September, 2010

  • Visio Insights

    New Structured Diagrams Whitepaper for Visio 2010

    • 47 Comments

    Microsoft has published a new technical article on MSDN about the Structured Diagram capabilities of Visio 2010.  Structured Diagrams help you organize the contents of your diagrams using intuitive, logical relationships between shapes.  These capabilities are exposed as the Containers, Lists, and Callouts features in Visio 2010.

    Structured-diagram shape relationships

    The article covers these topics:

    • Overview of the Containers, Lists, and Callouts features from an end-user perspective
    • Details for creating or customizing your own Structured Diagram shapes
    • Overview of the Structured Diagram API with code examples

    Readers of the Visio Insights blog will be familiar with much of the article, since it is based on a number of previous posts.  However, some of the details on Lists are new.  For reference, here are the related Visio Insights posts:

    Please let us know if you have any feedback on Visio 2010, Visio Services, or suggestions for blog posts you would like to see.

  • Visio Insights

    How to create a strategy map using containers

    • 3 Comments

    The new Containers feature in Visio 2010 is great for adding structure and organization to Visio diagrams. In this post, we’ll walk through the creation of one diagram, the strategy map, which is easy to make using containers.

    The strategy map

    A strategy map is a way for companies to document their primary strategic objectives. It visually shows the goals being pursued by an organization and the relationships between these goals. Commonly, a strategy map is part of the documentation associated with the Balanced Scorecard, a framework used to help design and implement strategic performance management tools.

    A strategy map typically consists of three components:

    1. Objectives, representing the goals that the organization is pursuing,
    2. Perspectives, representing broad categories for classifying the objectives, and
    3. Arrows, representing causal relationships between objectives.

    It’s easy to build a great-looking strategy map in Visio 2010. Here’s a walkthrough of how we built the strategy map below.

    image

    Getting started

    Since the shapes in a strategy map are simple geometric shapes, we started with the Basic Diagram template located under the General template category on the New tab of the Microsoft Office Backstage View.

    Once we had a blank diagram, we did some simple steps to get the page ready for the strategy map:

    1. On the Design tab, we changed the Orientation to Landscape.
    2. On the View tab, we unchecked the Grid checkbox.

    This gave us a blank page with the correct orientation and grid lines turned off.

    Adding perspectives

    In a strategy map, objectives are organized into different perspectives. Traditionally, these perspectives focus on the areas of finance, marketing, process and organizational development. Using this convention, we started by creating "Financial", "Customer", "Internal Business Processes", "Learning & Growth” perspectives. These are best represented in Visio using containers.

    To get our first container on the page and formatted, we performed the following steps:

    1. On the Insert tab, we picked a container from the Container drop down menu. 
      image
    2. We selected the newly inserted container and resized it to the desired dimensions.
    3. On the Container Tools contextual tab, visible only when a container is selected, we used the Automatic Resize drop down menu to select No Automatic Resize.

      Tip: Turing off Automatic Resize is good for situations where you have many containers on the page that must be the same size. This prevents the containers from expanding to fit new shapes.

    4. We copied the container three more times, then positioned and labeled the containers.

    The foundation for the strategy map was now complete.

    image

    Adding objectives

    Objectives are the goals that the company identifies as areas of focus. Typically, each objective is represented by text appearing within a shape.

    For our diagram, we picked a different shape to represent the objectives in each perspective. We picked the Ellipse shape for financial objectives, the Star 5 shape for customer objectives, the Rounded rectangle shape for internal business processes objectives, and the Rectangle for learning and growth objectives.

    As we added shapes to the diagram, the dynamic grid made it easy to ensure that shapes were dropped on the page evenly space and centered.

    image

    Tip: You can also use the Position functionality on the Home tab to ensure that shapes are perfectly aligned.

    image

    At the top of the first perspective, we wanted to add some overarching goals for the company. We thought that these objectives would look best as upside-down triangles. We added a Triangle shape to the page, resized it and used the knob at the point of the triangle to rotate the shape.

    image

    Then, we added text.

    image

    Notice that the text was still upside down. On the Home tab, there is a Text Block tool for rotating text. With the tool turned on, a knob appears for rotating text. We used this tool to rotate the text. Once the text is rotated, remember to go back to Pointer Tool mode by selecting the Pointer Tool in the same ribbon chunk.

    image

    When we had one upside-down triangle, we used copy and paste to create two additional triangles.

    image

    Adding a background, theme and title

    Using the Text Box tool on the Insert tab, we added a title and subtitle for the diagram.

    Then, we wanted to add some color and formatting to the diagram. The first two things that came to mind were a background and a theme. We added these using the following steps.

    1. On the Design tab, we selected the Backgrounds drop down and picked the Horizontal Gradient background.
    2. Also on the Design tab, we selected a theme for the diagram.

    image

    The diagram above shows themes being live previewed. As the cursor moves over each thumbnail in the gallery, the theme’s formatting is previewed on the diagram. This lets you quickly experiment with various looks without forcing you to commit to the change.

    Adding graphics

    The Department, Work Flow Objects, Work Flow Steps, and Landmark Shapes stencils have a number of useful people, building and work-related shapes that will help add character to a diagram. You can open the Department stencil by clicking on More Shapes fly out in the area above where the shapes are displayed, then clicking Flowchart, and then clicking the Department stencil. The Work Flow Objects and Work Flow Steps stencils are also under the same Flowchart menu.

    image

    We used a number of different shapes from the Department stencil, including the International division, Headquarters, Finance, and Operations shapes. We also used the Customer shape from the Work Flow Objects stencil and the Research shape from the Work Flow Steps stencil.

    To find different building types, we opened the Landmark Shapes stencil by clicking on More Shapes fly out, then clicking Maps and Floor Plans, then Map, and then the Landmark Shapes stencil. We used the Warehouse shape from this stencil.

    image

    More shape customizations

    At this point, the diagram was mostly built, but the diagram still needed a bit more personality.

    We wanted to show that there are two main types of the objectives inside the internal business processes perspective. The first three objectives are related to “Standardized Execution”, while the last two objectives are related to “Manage for Innovation”. This was another occasion suited for containers.

    We selected the shapes to go in the container and inserted a container using the Container drop down on the Insert tab. The container was inserted around the selected shapes. Even though the shapes were already on the page, it was no trouble to get them grouped in a container.

    image

    We were quickly able to add a second container and then label them both. On the Home tab, we used the Align Left button in the Paragraph chunk to move the title text to the left of the container. Notice that the shape changed slightly to adapt to the new text position.

    image

    Tip: After a container is inserted on the page, it is still easy to change its look. On the Container Tools contextual tab, visible only when a container is selected, you can select a new style for the selected containers.

    To add some additional polish, we updated the fill, line and shadow properties on the shapes. We also changed the font, and added bold to some of the text in objectives. All these options can be accessed in the Home tab. Finally, we repositioned some the shapes so that the graphics did not overlap with the objectives.

    Tip: If you have formatted one shape and want other shapes to have the same formatting, you can use the Format Painter. Select the shape with the desired format, click the Format Painter button on the Home tab, and then click the shape that needs formatting. Voila! Both shapes have the same formatting.

    image

    Adding connectors

    The last step was adding connectors to the diagram to show causal relationships between objectives. We used the Connector tool on the Home tab to add the connectors. In some cases, we took advantage of the connection points on the containers, instead of connecting directly to objectives.

    To make the connectors look stylized, we went to the Design tab, clicked on the Connectors drop down, and then clicked Curved Lines.

    image

    Since no shapes were selected, this action updated all the connectors in the diagram to curved connectors. Note that we could have also decided to apply the style to a specific set of connectors by selecting these connectors before applying the style.

    image

    We then increased the line weight, added a shadow to the line, and changed the color slightly to make the connectors slightly easier to see. We could have made them even bolder and brighter, but decided not to make them the main focus of the diagram.

    image

    To reduce the number of connectors in the diagram, we also added two Triangle shapes to the bottom perspective to show that multiple objectives in this area had the same causal relationships.

    The final diagram

    Before long, we had the strategy map shown below.

    image

    This strategy map shows business objectives, their associated perspectives and the causal relationships between them. It was easy to create in Visio 2010 using basic geometry shapes, graphical shapes for emphasis, containers and connectors. If you want to download this strategy map, it is available here.

    If you have any questions or feedback about this post, feel free to comment on the blog and let us know.

  • Visio Insights

    Roundup of Visio Services Documentation

    • 1 Comments

    Over the past few weeks Microsoft has released a ton of resources to help administrators and end-users get started with Visio Services. This article summarizes all the online resources for Visio Services in one place.

    Visio Services is a new feature in SharePoint 2010 that allows you to view and share dynamic, data driven diagrams. For a quick refresher on Visio Services, see this blog post.

    Administrator Videos

    To help administrators setup and configure Visio Services, we’ve put up a set of instructional videos that will guide you through various setup and configuration tasks. The videos cover basic setup, as well as how to configure Visio Services to connect to external data sources.

    The second and third videos below also show you how to create a data connected diagram in Visio 2010.

    Note: these videos are .WMV files, so you can click them to stream them, or right click and choose to save them locally.

    1

    2

    3 

    Visio 2010 Add-In For SCOM

    In a previous blog post we talked about the Visio 2010 add-in for System Center Operations Manager 2007 R2 . For step by step instructions on how to set this up, check out this new article on TechNet:

    Monitoring SharePoint Server by using Visio Services and System Center Operations Manager

    Other Documentation

    There is tons of documentation available to help you with anything related to Visio Services. Here’s a roundup of it all:

    Visio Services Setup, Configuration, and Planning:

    Visio Services Development

    Using External Data with Visio Services

    Visio Insights Blog posts

    As always, let us know if you have any feedback on Visio 2010, Visio Services, or suggestions for blog posts you would like to see.

Page 1 of 1 (3 items)