How to use the Visio tile

Overview

The Visio tile for Squared Up enables you to transform Microsoft Visio diagrams into live HTML5 dashboards showing real time SCOM health state.

How the Visio tile works

Before we get started with the new Visio tile, let’s introduce two key concepts that are important in understanding how the Visio tile works:

Visio Shape Data

Microsoft Visio Professional enables you to attach custom data to any shape. Data can be imported from a Microsoft Excel spreadsheet, a database connection, or data can be entered manually within Visio itself. You may already use this feature to attach server details (for example, name and IP address) to your application topology views.

To make a Visio diagram ready to use in Squared Up, you simply have to add a ScomId field, and set the value of this field to the ID of a SCOM object. There are a number of different ways to find the IDs of SCOM objects, but in Squared Up we have made it very simple with the scope export button.

Microsoft Visio Professional allows you to add data to diagrams whereas Microsoft Visio Standard does not

Walkthrough: Adding a Visio diagram to Squared Up

In this walkthrough we will create a dashboard showing the health state of several servers.

The steps required are:

A. Select and export the scope in Squared Up

B. Attach data to shapes in Visio

C. Save as SVG

D. Drag the SVG into Squared Up

The Visio tile only supports ONE Visio diagram per dashboard. To display more than one Visio diagram on the same page, see How can I display more than one Visio diagram on a dashboard? below.

Here are those steps in detail:

A. Select and export the scope in Squared Up

We are going to start by creating a Squared Up dashboard and choosing the objects that we want to show in our Visio diagram.

  1. Click the + button to add a new dashboard

  2. In the select tile panel, click on Status. You will see the Visio tile listed, but we’re not going to use that until later.

    Status Tile<>

  3. Configure the scope to show the objects whose health you want to show in your Visio diagram later. For example, click list and search for the servers you want to add (e.g. server1.domain.local, server2.domain.local), or click group and search for an existing group (e.g. CRM Servers).

    The items are displayed in the dashboard as normal:

    Status Group<>

  4. Click the export button and your browser will download an Excel spreadsheet containing the basic details of each object: Display Name, Path and ID.

    Status Scope Export

  5. Open the spreadsheet to verify the contents, ensuring the correct data has been exported.

    For non-hosted objects like servers the Path will be blank, but Path will be important for hosted objects like disks and databases.

B. Attach data to shapes in Visio

  1. Open an existing Visio diagram, or if you need to create a diagram for this walkthrough go to File, New, Detailed Network Diagram and drag a few server shapes onto the page.

    Visio Data Linking Animated Gif

  2. In the Visio toolbar click Data then Custom Import. In older versions of Visio you may need to choose Data then Link Data to Shapes.

    Using ‘Quick Import’ does not use the column headers as the data label, the SCOM IDs are incorrectly labelled ‘F3’ rather than ‘scomId’ and will not show the health status in Squared Up
  3. Select Microsoft Excel Workbook and click Next

  4. Browse to the Excel spreadsheet you downloaded, and click Finish.

  5. The SCOM object data appears in a new External Data window docked at the bottom of the screen.

  6. From the External Data window, select a row and drag it onto one of the Visio shapes on the page. The SCOM data will be attached to the shape and merged with any existing data, so if you already have data attached to your Visio diagram this will be preserved.

    When using an existing Visio diagram take care that shapes are not grouped together. This can cause confusion as data can get linked to several shapes at once.
  7. Repeat the previous step for all of the shapes you wish to link.

    To show object SCOM IDs and names select the shapes in Visio then click Advanced Data Graphics on the Data ribbon, make a selection from Available Data Graphics and Edit Data Graphic if required.
  8. Save the Visio diagram.

C. Save as SVG

The Visio diagram is now complete. To use it in a Squared Up dashboard we save it as a web-ready SVG file.

Before continuing, make sure that no shapes in your diagram are selected. If you follow these steps with a shape selected, the complete diagram will not be exported.
  1. Click File then Save As

  2. In the Save As Type drop down list select SVG Scalable Vector Graphics (*.svg) then click Save.

    Save As SVG

By default, the SVG is previewed in your browser. This can be a useful way of checking that you have successfully exported the whole diagram as an SVG file. However, you can easily turn this option off when you export by unchecking Automatically view file after saving in the save dialog.

D. Drag the SVG into Squared Up

We’re now ready to use the SVG file in our Squared Up dashboard. This next bit is the easy part.

  1. Return to the Squared Up dashboard you created at the beginning.

  2. In the select tile panel, click on Visio

    Visio Tile<>

  3. Drag (or browse to) the SVG file you saved.

  4. Now the magic happens. The diagram is uploaded to the Squared Up web server, rendered in the dashboard, and health icons are overlayed. If this doesn’t happen, don’t panic, see Troubleshooting the Visio tile.

  5. The next panel allows you to choose between icons or color replace. For now we’ll leave it as icons (but if you can’t resist then try color replace to see what happens).

  6. That’s it. Click done on the dashboard designer and your dashboard is ready to publish.

Visio Dashboard

Frequently Asked Questions

How can I display more than one Visio diagram on a dashboard

The Visio tile only supports ONE Visio diagram per dashboard, because of the way the SVG files are created by Visio. To display more than one Visio diagram on the same dashboard you can create two separate dashboards each containing one Visio diagram, then use the Web Content tile to embed the second dashboard in the first dashboard. You can append ?display=embed to the end of the website URL to hide the navigation bar and page title on the embedded dashboard.

See How to display a Squared Up dashboard using the Web Content tile

Second Visio Diagram in IFrame

Where can I find SVG maps

SVG maps for non-commercial use can be found here: http://www.amcharts.com/svg-maps/

Take care to ungroup the shapes in Visio before linking the SCOM IDs:

How to ungroup in Visio

You can add hyperlinks in Visio that then work in Squared Up. Simply right-click on an object in Visio and add a hyperlink, to a Squared Up dashboard, or any web page.

Adding Hyperlinks

Can I combine Visio diagrams with other SCOM data

Once you have created your Visio dashboard in Squared Up, don’t forget that you can add further sections using any other tiles. For example, you can add performance data from the SCOM Data Warehouse alongside your Visio diagram.

The Visio tile only supports ONE Visio diagram per dashboard. To display more than one Visio diagram on the same page, see How can I display more than one Visio diagram on a dashboard?

How can I download diagrams from SCOM? (Export page to Visio .VDX)

You can download a diagram view of your objects from SCOM in Visio format (.VDX), to which you can attach data (as described above), save as an .SVG file and drag into the Visio tile.

  1. To download a SCOM diagram in Visio format, open the diagram and click the following button on the toolbar: Visio Button in SCOM

  2. Save the file as a Visio .VDX file.

  3. Open the .VDX file in Visio, attach data and save as an .SVG file, as described above.

  4. Drag the .SVG file into the Visio tile in Squared Up.

    SCOM Visio Diagram In Squared Up

What are Scalable Vector Graphics (SVG)

SVG is the web standard for drawing vector graphics. It is part of the HTML5 specification and supported on all modern browsers. Visio files can be exported as SVG to create web-ready versions of your diagrams. Like Visio files, SVG files define the drawing as lines and shapes (instead of pixels), so the drawing can scaled to any size without any loss of quality. SVG files have the *.svg extension and when opened in a text editor you will see that it is just XML.

Reference Information

Behaviour

The default behaviour is to use health status icons on the Visio diagram, but you can change this to color if you wish to use replace colors on the shape with the health state color.

Icon

Visio Health Status Icon

Icons are a familiar way of visualising health state and are typically used for application and network topology diagrams.

Squared Up draws a health state icon for each shape that is linked to a SCOM object in your Visio diagram (using the ScomId data field).

Icon Position

By default the icon is drawn in the centre of the shape, the position options allow you to change it to top, middle or bottom and left, center or right.

Icon Size

Drag the slider to change the icon size.

Color

Visio color

Color replace is a great way to create high impact dashboards with clearly visible health state. This is perfect for NOC-style dashboards shown on a large screen, but can also be used for standard topology diagrams.

Squared Up detects which colors are used in the shapes that are linked to a SCOM object in your Visio diagram (using the ScomId data field). By default, Squared Up will replace all colors, or you can choose a specific color using the color picker. Squared Up will replace the chosen color with red, amber, green or grey, depending on the health state of the SCOM object.

The Visio tile makes it easy to experiment with color replace to find the settings that give the best results. You can choose to replace single or multiple colors, and click on one or more of the colors displayed to give the required effect.

Alternative ways to add SCOM IDs to your Visio diagrams

Importing data via an Excel spreadsheet is just one method for adding SCOM data to your diagrams. If you already have a CMDB or some other data source for your Visio diagrams, you may want to add your SCOM data from this data source instead.

This is an advanced topic and we would advise that you only choose this method if you are already familiar with importing Shape Data into Visio.

Squared Up only requires one field to be added to the shape data:

ScomId = ID of object in SCOM

The IDs of SCOM objects can be found in a number of different ways. Tao Yang recently blogged about this, so his blog is a great starting point (thanks Tao!): Various Ways to Find the ID of a Monitoring Object in SCOM

We would add a few more ways of exporting SCOM IDs:

  1. The scope export button (but import into your CMDB instead of directly into Visio).

  2. Query the SCOM Data Warehouse directly. The object details are available in the vManagedEntity view, so a simple query like the following will extract all the server IDs (we’re using FullName to filter to all Microsoft.Windows.Computer instances):

SELECT
     [ManagedEntityGuid] as ScomId
    ,[Path] as ScomPath
    ,[DisplayName] as ScomName
FROM [OperationsManagerDW].[dbo].[vManagedEntity]
WHERE [FullName] LIKE 'Microsoft.Windows.Computer:%'

Once the SCOM data is added to your existing data source, all you will need to do is open your existing Visio diagrams and refresh the data connection.

Troubleshooting the Visio tile

How to use the Web Content tile

How can I display more than one Visio diagram on a dashboard?

Various Ways to Find the ID of a Monitoring Object in SCOM label: How to use the Visio tile keywords: visio SVG tilecolor centre center health visualisation visualization color vsdx .vsdx .svg center plugin ScomId maps map vsd