October, 2009

Visio Insights
The official blog of the Microsoft Visio product team

October, 2009

  • Visio Insights

    Automatic Page Sizing in Visio 2010

    • 31 Comments

    When you start a new diagram, you typically begin with a single drawing page that is the size of a standard piece of printer paper.  Many diagrams grow beyond the size of a single printed sheet.  Visio 2010 adds a dynamic page sizing capability that responds as you draw, so you no longer have to manually adjust your page size to your diagram.

    As you draw beyond the edge of the current page, Visio expands the page in that direction by one additional tile, or printer paper sheet.

    image

    image

    If you live preview adding a shape with AutoConnect, Visio also previews the tiles that will be added.  As you drag shapes outside the current page or drag shapes from the Shapes window, Visio shows a translucent preview of the new tiles that will be added if the shape is dropped in its current location.

    image 

    All sorts of things can affect the size of your diagram when printed, including adding shapes, deleting shapes, moving shapes, adding or removing text and changing text properties.  Any of these will alert Visio to update the page larger or smaller to keep the drawing within full tiles.

    Start with this: image
    Add more text: image
    Delete the shape: image

    You may also notice that the depiction of page breaks and margins is different than in Visio 2007.  We simplified the look of page breaks and many people will find them similar to Excel’s.  Margins are now a clear white area around the entire page.  We think you will find this much more clear than the grey bars in past versions of Visio.  We also enable showing page breaks and margins by default in new drawings, to help make it clear how Visio is adjusting your page.

    This auto sizing behavior is controlled using the Auto Size toggle button on the Design tab.  If you click the dialog launcher and open the Page Setup dialog, you’ll see we replaced the now-defunct “Same as printer paper size” option with “Let Visio expand the page as needed”.  The sharp-eyed Visio expert will notice that the “Size to fit drawing contents” option is also gone from the dialog.  Since that item was more of a one-time action than a persistent state of tightly fitting the page to the diagram, we moved it to the Page Size dropdown and renamed it “Fit to Drawing”.

    image image

    Since we’re talking about page sizing, it’s also worth taking a quick look at manual page adjustments.  The Orientation and Size dropdown buttons on the Design tab surface the most commonly-used items from the Page Setup dialog.

    image image

    When Auto Size is enabled, these reflect the orientation and size of the printer paper (the tiles in the drawing page), because Auto Size controls the size of the page based on the printer paper settings.  Changing them changes the orientation and size of the printer paper settings.  If you change these, the number of tiles required to contain the diagram may also change, so your drawing page may change size.

    Size = Letter (8.5” x 11”)
    Orientation = Landscape
    image
    Size = Letter (8.5” x 11”)
    Orientation = Portrait
    image

    When Auto Size is disabled, these reflect the orientation and size of the drawing page, because you are controlling it, not Visio.  Changing them sets both the drawing page and the printer paper settings, to keep them in sync.

    Size = Letter (8.5” x 11”)
    Orientation = Landscape
    image
    Size = Letter (8.5” x 11”)
    Orientation = Portrait
    image

    Essentially, we made Orientation and Size work as expected depending on context – whether Auto Size is on or off.  That is, whether you have Visio taking care of the page size or if you are doing it.

    We hope these additions will help you to more easily, and more fluidly, build and edit your diagrams.  As usual, send us any feedback you have using Send a Smile or through a comment on the blog.

  • Visio Insights

    Introducing Visio Services

    • 3 Comments

    Last week at the SharePoint Conference, the Visio team unveiled Visio Services – a new feature of SharePoint 2010 that extends the reach of diagrams considerably. In a nutshell, Visio Services lets you:

    • View diagrams in the browser without needing Visio on your machine
    • Refresh data-driven diagrams in the browser
    • Integrate diagrams into SharePoint applications

    Let’s take a look in more detail at the features behind each of these scenarios.

    Viewing diagrams in the browser

    A Visio diagram, saved to a SharePoint document library as a Visio Web Drawing (a *.VDW file) using Visio Professional 2010 or Visio Premium 2010, can be viewed in any web browser by simply clicking on its file entry in the document library.

    image

    The diagram renders in full fidelity in the browser if the person viewing the diagram has Silverlight installed on their machine or as a PNG if not; Visio Services renders seamlessly anything you can draw in Visio. Take a look below to get a feel for the experience:

    image

    Visio Services enables you to navigate diagrams using easy to use and familiar metaphors for panning, zooming, switching pages, following hyperlinks and discovering shape data. You can also open any Visio Web Drawing in Visio using the “Open in Visio” button. Note that the person viewing the diagram can do so:

    • …in any browser (Internet Explorer, Firefox, Safari etc…)
    • …on any platform
    • …without leaving the browser
    • …without installing Visio, the Viewer or the Drawing Control
    • …without needing to accept multiple dialogs or browser warnings

    Also note that because the diagrams are stored in SharePoint document libraries, diagram creators get a variety of useful document management features from SharePoint such as diagram access control using permissions, diagram change tracking using versioning and the ability to attach diagrams to SharePoint workflows.

    Refreshing data-driven diagrams

    Visio Services has ported Visio’s data connectivity features to the browser! In case you’re not familiar with those features please take a look at “Show it like it is: connect data to your Visio diagram” for a quick summary. Note this demonstration is in done in Visio 2007, but these features are also available in Visio 2010.

    In a nutshell, before Visio Services renders a data-driven diagram it fetches the diagram's linked data from an external data source and updates diagram visuals accordingly. Note that once posted to SharePoint, your diagram is a living document that will always represent the current state of your data visually. You never need to update manually again!

    Visio Services supports refreshing diagrams connected to one or more of the following data sources:

    • SQL (using either Kerberos, Single Sign On & Unattended Authentication)
    • SharePoint Lists
    • Excel Workbooks hosted in SharePoint
    • Any OLEDB/ODBC data sources that have recent drivers

    If the data source you plan to connect your diagrams to isn’t in the list above, don’t worry: Visio Services supports “Custom Data Providers” which enable you, with a few lines of code, to wrap your existing data source into one that Visio Services can consume. We’ll talk about writing your own “Custom Data Provider” in subsequent blog posts.

    Finally, note that Visio Services supports refresh on open, user-triggered refresh as well as automatic periodic refresh.

    Integrating Visio diagrams into SharePoint Applications

    Visio Services also enables you to embed Visio Web Drawings, regardless of whether they are static or dynamic, into SharePoint applications. Depending on your skill level with web technologies there are three ways of doing so:

    Integration method

    Scenario enabled

    Skill set required

    The Visio Web Access web part

    You can now embed Visio diagrams into SharePoint pages.

    You should know how to create a web part page in SharePoint.

    Web Part Connections

    You can enable limited interactivity between the Visio Web Access web part and another on the page, without code. A typical example of this type of interactivity is to trigger one web part to show extra relevant information about a particular shape when it’s clicked in the Visio web part.

    You should know how to create a web part page in SharePoint as well as how to set-up Web Part Connections.

    The Visio Services Mash-up API

    You can enable rich interactivity on your web part page by manipulating the different Visio web diagram objects programmatically. A typical example of this type of interactivity is to show custom visual overlays when the person viewing the diagram hovers over a particular shape.

    You should know how to code JavaScript and/or ASPX pages.

    The main take-away is that with very little effort you can add visualization to your dashboards and with a bit more page authoring or some coding you can add rich interactivity between Visio Services and other components on the page. For those of you hungry for details, we’ll be delving into the details of all of these integration features in future blog posts.

    How it all works

    For the curious among you, here’s a recap of the architecture of Visio Services:

    architecture 

    Availability and Requirements

    Visio Services is scheduled to ship as part of the SharePoint Services 2010 ECAL and will be available in the up-and-coming Beta and RTM releases of SharePoint in both hosted and non-hosted flavors.

    In Conclusion

    The complete breadth of Visio diagrams can now be shared and refreshed in SharePoint, regardless of whether the person viewing them has Visio installed on their machine. What’s more you can now integrate rich data visualizations into SharePoint dashboards and applications with little effort.

    There is much, much more to tell you about this brave new world of browser-based data visualization called Visio Services… but for now, we’ll let you digest this high level overview and start thinking about how browser-based data visualization using Visio Services can be useful to your organization. Stay tuned to the blog, we should have instructions on how to set-up Visio Services and how to create Visio Web Drawings in the next few weeks.

    As you try out Visio Services, please let us know what you think, either by commenting on the blog or via Send a Smile.

  • Visio Insights

    Using a Visio Process Repository

    • 2 Comments

    We frequently speak with Visio users whose organizations need to manage collections of process diagrams. Many of these users are employing basic methods such as storing these documents on network file shares. However, these methods leave much to be desired. For instance, end users frequently ask us questions like:

    • How can I make sure I’m always editing the most recent version of a process diagram?
    • How can I find out about updates made to the process diagrams that interest me?

    Additionally, the administrators and managers who supervise these document repositories often ask us questions like:

    • How can I monitor whether my organization’s diagrams comply with our internal standards?
    • How can I easily find all processes that involve a particular department?

    To address the above pain points, we have created the Visio Process Repository, a new SharePoint site template that is available out of the box with SharePoint 2010. It leverages SharePoint’s collaboration features -- including check-in and check-out, versioning, and workflow -- and integrates with several of Visio’s new process management features. The result is that in just a few clicks, a SharePoint administrator can create a Visio Process Repository that is pre-configured for easy storage and management of Visio process diagrams.

    Here is the home page of an example Process Repository:

    Process Repository homepage

    As shown in the sidebar above, a Repository site contains a library for documentation, a task list, and a discussion board. But most important is the “Process Diagrams” document library, which is designed to store processes. This document library comes pre-populated with several templates that can be used to create new process diagrams. (However, you can store other diagram types in a Repository; these particular templates are available simply for convenience.)

    New Document Menu

    Let’s say you use the Cross-Functional Flowchart template to create the following diagram in Visio:

    Finished CFF

    Once you’re finished and (optionally) have checked your diagram for errors using the Validation feature, you can save your document back to the Repository through the “Save to SharePoint” billboard in the Backstage:

    Save to SharePoint

    Then, when you navigate back to your Repository, your process diagram will be listed in the Process Diagrams document library as shown in the image below. Note the two special columns marked by the red rectangles:

    • The Keywords column displays the swimlane headings of each cross-functional flowchart in the document library. The diagram above had swimlanes titled “Engineering” and “Management”; these swimlanes are reflected in the document library below, providing useful at-a-glance information on who is involved in the process.
    • The Category column displays the validation status of each document. This makes it easier for administrators and managers to monitor whether the processes in their Repository conform to their organization’s standards.

    Doc lib columns 

    Since the Process Repository is built on top of SharePoint 2010, you can also take advantage of other SharePoint features. For instance, you can configure workflows, set up automatic email notifications for when documents change, and view revision history for a given document. Also, with Visio Services users can view the processes in their browser in a single click, even if they do not have Visio installed on their computers. For instance, this is what the above cross-functional flowchart looks like when viewed in a browser:

    CFF in Visio Services

    We hope this quick tour of the Visio Process Repository feature gives you ideas for how you can use a Process Repository (as well as related Visio 2010 features like Validation and Visio Services) in your organization. Please let us know what you think, either by commenting on the blog or via Send a Smile.

  • Visio Insights

    Data Graphics in Visio 2010

    • 12 Comments

    In Visio 2007, we introduced the data graphics feature to make it possible to display data on shapes using text callouts, data bars, or icons, or by coloring the shapes based on the data. As the data changes, the data graphics update accordingly.

    With data graphics, Visio diagrams can be used to visualize dynamic data in powerful and succinct ways. For example, data graphics are used on these network server shapes to show their network name, operating system, and IP address as text callouts that appear next to them. Data bars show CPU speed and memory, and an icon is used to indicate each server’s current status. The data associated with each shape can be conveyed at a glance.

    image

    In Visio 2010, we’ve given the data graphics feature a makeover to integrate it into the ribbon and to address feedback we heard from users. We also added a legend feature, but we’ll talk about that in an upcoming post.

    As in Visio 2007, before you can display data using a data graphic, you first need to have some data in your shapes. You can add the data manually in the Shape Data Window for each shape, or you can import the data into the diagram from an external data source like an Excel worksheet or a SQL database, using the Link Data to Shapes button on the Data tab. The data will appear in the External Data Window.

    image

    Once you drag a row of data from the External Data Window onto a shape to establish the link to the shape, a set of data graphics is created in the Data Graphics gallery, which replaces the task pane used in Visio 2007. The first data graphic in the gallery is automatically applied to the data-linked shape.

    image

    You can also create a new data graphic or edit one of the data graphics that Visio built for you in the gallery.

    In addition to integrating the user interface into the ribbon, we made some improvements to the dialog boxes based on user feedback. First, if you want to change the way a data field is displayed in the data graphic, you no longer have to delete the data field item and add a new one. For example, if you want to make an item display as an icon instead of a text callout, you can simply edit the item…

    image

    …and switch its display type from Text…

    image

    …to Icon Set.

    image

    When you edit a data graphic, we now give you a choice between applying the changes to all shapes with that data graphic applied (the only option in Visio 2007) or only to the selected shapes, using radio buttons at the bottom of the Edit Data Graphic dialog box. The latter choice makes a copy of the data graphic and applies it to the selected shapes.

    image

    Visio 2007 users asked us for more control over the formatting of text and other elements in data graphics. In Visio 2010, you can choose the font size used for the value and label in a text callout or data bar, and you can specify the width of the callout.

    image

    Please check out the new Data Graphics user interface and let us know what you think, either by commenting on the blog or (if you’re using the Visio 2010 Technical Preview) via Send a Smile.
  • Visio Insights

    Data Graphics Legends in Visio 2010

    • 2 Comments

    Many of you are familiar with the work we did in Visio 2007 to make it easier to surface data that exists in your diagram in a visual form. Data graphics allow you to add refreshable data visualizations to the shapes in your diagram. See our previous posts Microsoft Office Visio 2007 Released and Customizing Data Graphics for more information.

     No data  Data graphics!
    image image

    One thing users have asked us for is a way to describe the data graphics used in the diagram – a legend. Visio 2010 adds the ability to insert a legend that documents the data bars, icon sets and color by values in data graphics applied to shapes on the page. You can do this using the Insert Legend button on the Data tab.

    image

    Visio creates the legend at the upper right corner of the page. The legend contains a separate section for each data field referenced in the data graphics’ definitions. The descriptions for each legend item are obtained from the data graphics.

    image

    The legend is customizable, so you can add, remove and rename sections and shapes to make the legend look just right for your particular diagram. Legends also pick up the theme applied to the page, or they can be manually formatted.

    image

    The legend is made up of a number of shapes and uses containers to keep the different parts of the legend organized. The top-most shape is a list, a special type of container that arranges its members in a regular, linear pattern. The members of that list are containers, each of which represents a data field from the data graphics. Inside each container is another list, this one invisible, which keeps the individual legend items neatly arranged.

    image

    You can select a legend item and use the arrow keys on your keyboard to reorder them, or you can drag them around the list. You can also drag them out, delete them or drag your own shapes in. The same can be done with the containers that correspond to each data field. If you click the blue insert arrow on the outer list, Visio adds an empty container for your own use. While this will not have the inner list, you are free to add any shapes you wish.

    image

    To preserve the customizations you might make to the legend, Visio does not update it as you edit your data graphics or change which data graphics are applied to shapes on the page. Simply insert a new legend once you are done making changes. Delete the existing one or move it out of the way if you need to bring anything over.

    Finally, for the developers out there, you can drop a legend using Page.DropLegend in the Visio API and specify custom outer list and field container masters.

    We’re happy to be able to close this gap in data visualization and are interested in your feedback via Send a Smile or a comment here on the blog.

  • Visio Insights

    Announcing SharePoint 2010 and Visio Services

    • 1 Comments

    Yesterday Microsoft released details about SharePoint 2010 at the SharePoint Conference in Las Vegas.  SharePoint 2010 is a major release, covering a tremendous array of collaboration capabilities.  You can read the overview on the SharePoint team blog.  A notable feature in SharePoint 2010 is Visio Services.  Here is the summary of Visio Services from our original description of the Visio 2010 release:

    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.

    image

    Beyond simply viewing the latest version of a diagram in the browser, Visio Services enables interactive dashboards or mash-ups.  You can show a Visio diagram in a web part and define interactions between the diagram and other web parts on a page.  For example, in the image above, selecting a computer shape in the diagram will display detailed information about that computer on the right side.  Additionally, choosing one of the radio buttons on the right side will select the shapes in the diagram that match that criteria.

    The Visio team is showing Visio Services in depth at the SharePoint Conference this week.  Initial feedback from the conference attendees has been quite positive.  We’ll have a lot more Visio Services information to share on the blog next week, but there are other ways that Visio integrates with SharePoint 2010.  Coming up this week we look at one example.

  • Visio Insights

    Annotating Diagrams with Callouts in Visio 2010

    • 8 Comments

    One of the guiding principles for the Visio 2010 user interface is that commonly used shapes should be easily accessible.  We showed how the Quick Shapes view in the Shapes Window aggregates the shapes from multiple stencils together.  There are also common shapes that are useful in many different kinds of diagrams.  These are exposed directly in the Ribbon through shape galleries.  We looked at Containers and Backgrounds and Borders previously.  In this post we examine Callouts.

    image

    A callout is an annotation on a diagram that provides more information about a shape.  Callouts are Visio shapes themselves, which differentiates them from other forms of annotation such as comments.  Callouts are part of the visible drawing and can be edited and formatted like any other shape.  A callout points at or references another shape, which we call the “target” of the callout.  It is placed in proximity its target and may have a line connecting to it.  The connecting line is called a “leader”.

    To add a callout shape in Visio 2010, select the target shape on the page and then click on the Callout dropdown in the Insert tab.  You will see the Callout gallery with many different styles of callouts.  Hover over a style to see it applied as a Live Preview and then click the style to add the callout.  The callout appears slightly above and right of the target shape.  (Note in the Technical Preview build the callout is placed a little too close by default and overlaps the target.  This will be corrected in the next beta release.)

    image

    Callout shapes are not new to Visio 2010, but Visio 2010 gives callout shapes special behaviors.  When a target shape is moved, copied or deleted, any callouts attached to the shape will be moved, copied or deleted too.  Thus callouts stay with their target shapes, though you can reposition the callout to any offset from its target.  Callout shapes are also designed to be displayed in front of other shapes.  Even if you add new shapes to a page and overlap them with callouts, the callouts will appear in front.

    There are additional options for the visual style of callout shapes, which you can access by right-clicking on a callout.  The Callout Style flyout menu allows you to switch to a different geometric style and has the same choices as the Insert Callout gallery in the ribbon.  The Orientation flyout menu lets you control which side the callout’s leader attaches to.  Callout Line controls the visibility and placement of the leader line.  Finally you can choose whether the callout shape resizes to fit the amount of text in the shape.

    image

    We hope you find the improved callout behaviors and convenient access from the ribbon a welcome addition to Visio 2010.  Feel free to tell us what you think through the Send a Smile feedback tool or by commenting on this post.

  • Visio Insights

    Live Rendering Shapes in Visio 2010

    • 3 Comments

    For several releases Visio has enhanced the appearance of shapes in diagrams by adding isometric projections or themes with gradients and shadows.  All the while, their appearance in the Shapes Window has been unchanged.  The 32x32 pixel icons have been limited to 16 colors (reminiscent of the EGA color palette  from 1984).  Thus the Shapes Window icons have not kept pace with the visual updates on the drawing surface.

    Visio 2010 remedies that with a feature called Live Rendering.  We briefly mentioned this feature in the Shapes Window article, but we’ll go a little deeper here. Live Rendering replaces a shape’s icon with an image of what the shape actually will look like on the page.  You can see the full color spectrum used in the gradient fills.  You can see the anti-aliasing applied to the geometry and text.  If there is currently a theme applied to the page, Visio will even show the shape with the theme applied.  What you see is what you get.

    image 

     

    Supporting Live Rendering in Your Custom Shapes

    Live Rendering is also available for any of your own custom shapes.  Visio 2010 takes the existing setting for automatically generating icons for shapes and repurposes it as a setting for Live Rendering.  If you right-click on one of your own shapes in the Shapes Window and choose Edit Master > Master Properties, you can see the revised property.

    image

    Of course, Live Rendering may not be the best option for every shape.  Perhaps you prefer the icon to be more of an abstraction than a realistic portrayal of the shape.  Sometimes the shape has so much detail that it is not understandable in 32x32 pixels.  Maybe the shape is oblong and does not scale down to a 1:1 aspect ratio well.  In these cases it is best to stick with the shape icon, which is still limited to 16 colors in order to maintain file compatibility with previous releases.

    Custom Crop Regions

    However, there is a common situation that we felt was important to support with Live Rendering.  Sometimes only a portion of a shape is visually distinct from other shapes in the same stencil.  After all, shapes that are found in the same stencil are probably related, so they may share some common visual attributes.  In these cases the distinction may be too small to be useful when displaying the shapes as icons.  To alleviate this problem, Live Rendering supports custom crop regions.  Instead of rendering the full extents of a shape and shrinking that to icon size, Visio can render a specific region of a shape and use that for the icon.

    Let’s see an example from the shapes in Visio 2010’s SharePoint Workflow content.  There are dozens of workflow shapes that correspond to activities you can perform with SharePoint.  Each shape consists of a rectangle with a text label and a thumbnail image.

    image

    You can see that the thumbnails are the most visually distinctive part of the shapes.  What happens when you put these in the Shapes Window and turn on Live Rendering?  Unfortunately the details are lost.  In prior releases your only option would be to manually draw an icon using the 16 color palette and live with a very poor representation of the shape.  With a custom crop region, Visio only displays the relevant portion of the shape.

    image

    A custom crop region is specified by adding a User-defined cell to the Pagesheet of the master shape in the Master Edit Window.  Add a cell named User.msvPreviewIconCropToPage and set the value to 1.  Then modify the size of the page and the position of the shape on the page such that only the portion of the shape you want rendered overlaps the page.  You can look at the masters for the SharePoint Workflow shapes or the Callouts for more examples.

     

    Live Rendering shapes in the Shapes Window is an important part of the overall user interface update in Visio 2010.  For shape designers, Live Rendering and custom crop regions provide new opportunities for showcasing your rich, graphical content.  Please let us know what you think by using the Send a Smile feedback tool or commenting on the blog.

  • Visio Insights

    Visio 2010 Beta coming soon…

    • 0 Comments

    It’s been several months since the Technical Preview was released and we started talking about Visio 2010 on this blog.  The product team has been hard at work responding to your feedback, fixing bugs and polishing the application.  Next month we are scheduled to release the Visio 2010 Beta, which will be open to the public.  If you haven’t had the opportunity to try Visio 2010 for yourself, this is your chance.

    Sometimes it’s hard to wait patiently for new software releases, so to put your mind at ease we’ve created a special alert system that will notify you when you can download the Beta.  Head over to http://visiotoolbox.com/2010/ and click on the big green button.  You’ll also find a handy diagram explaining the software delivery process (approximately) and several other pages highlighting some of the new capabilities of Visio 2010 and Visio Services.

    image

Page 1 of 1 (9 items)