This article only applies to Squared Up Version 2.0. If you're looking for help with Squared Up Version 3.0, please visit our new knowledge base

Overview

The Visio plugin for Squared Up enables you to transform Visio diagrams into live HTML5 dashboards showing real time SCOM health state. The Visio plugin is installed with Squared Up 2.1 onwards. The Visio plugin is only licensed with the Enterprise Starter Pack and above. The plugin supports one Visio diagram per dashboard.


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

How the Visio Plugin works

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

1. 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 extension *.svg and if you open one in a text editor you will see that it  is just XML.

One of the best introductions we’ve found for SVG – without wading through a W3C spec - is this sample chapter  for O’Reilly SVG Essentials: http://cdn.oreillystatic.com/oreilly/booksamplers/9781449374358_sampler.pdf

2. Visio Shape Data

Visio Professional enables you to attach custom data to any shape. Data can be imported from an Excel spreadsheet, a database connection, or data can be entered manually within Visio. 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 v2.1 we have made it very simple with a new “export scope” feature.

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

Walkthrough: Creating a new Visio diagram

This video shows how simple it is to create a visio dashboard, and how it need take you no more than literally just a few minutes.  In particular is covers creating a dashboard to show the health of all your Distributed Applications (DAs) or Groups but the method is the same for showing the health of any objects:


In this walkthrough we will create an application topology dashboard showing the health state of the servers.

We will be creating a new Visio diagram to use in the dashboard. If you already have an existing Visio diagram, we recommend you still follow this walkthrough first, then look at the next section on using existing diagrams.

The steps required are:

1. Define the scope

2. Export the items

3. Create a new Visio diagram

4. Export the Visio as SVG

5. Import the SVG into the Squared Up dashboard


The Visio Plugin only supports ONE Visio diagram per dashboard.


Here are those steps in detail:

1. Define the scope

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

a. Click the + button to add a new dashboard

b. In the Type panel, select Status. You will see the Visio plugin listed, but we’re not going to use that until later.


c. Choose the items you want to show. For example, select list and search for the servers you want to add (e.g.server1.mydomain.local, server2.mydomain.local), or select group and search for an existing group (e.g. CRM Servers).  For more information see How to set the Scope using the Dashboard Designer

d. The items are displayed in the dashboard as normal.

2. Export the items

Next, we use a new feature in 2.1 to export the items we added in step 1 into an Excel spreadsheet.

a. In the Scope panel of the dashboard designer, click the Export link at the top right.

b. Your browser will download an Excel spreadsheet containing the basic details of each object: Display Name, Path and ID.

c. Open the Excel to view the contents. Note that for non-hosted objects like servers the Path will be blank, but Path will be important for hosted objects like disks and databases.

3. Create a new Visio diagram

Now we’re going to use the exported data to create a new Visio diagram.

a. Open Visio and create a new diagram. Choose Basic Network Diagram to automatically add server and network icons into your stencils.

Alternatively you can choose Blank Diagram and add custom stencils. We like to use the latest Microsoft Office stencils, which are available to download here: http://www.microsoft.com/en-us/download/details.aspx?id=35772

b. In the toolbar, choose Data > Link Data to Shapes. In Visio 2016 you should choose Data > Custom Import (using 'Quick Import' does not use the column headers as the data label, and the SCOM IDs are incorrectly labelled 'F3' rather than 'scomId' and will not show the health status in Squared Up).

If your version of Visio does not have the Data toolbar you can copy the ScomIds manually from the Excel formula/edit bar (don't copy the entire cell as this introduces extra formatting characters which stop the health status icon showing).

c. Select Microsoft Excel Workbook and click Next.

d. Browse to the Excel spreadsheet exported from Squared Up in step 2, keep the default options (in Visio 2016 click 'Select custom range' and select the data and column headings), complete the wizard and click Finish.

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

f. In the toolbar, choose Data > Data Graphics and uncheck Apply after Linking Data to Shapes.

This prevents Visio showing the SCOM name and ID next to the shape. You can customise this behaviour by choosing Data > Data Graphics > Edit Data Graphics.

g. In the Shapes window select a server icon. This icon will be used when we add items to the diagram in the next step.

h. In the External Data window, select a row and drag it onto the page. A new server icon appears. This icon has all the SCOM data attached to it.

i. Repeat the previous step for all of the servers in your application.

You can view the data attached to the shape by clicking Data > Shape Data Window in the toolbar.

j. You can optionally add other shapes and links to your diagram in order to complete the application topology view.

k. Save the Visio diagram.

4. Export the Visio as SVG

Our Visio diagram is now complete. To use it in a Squared Up dashboard we must first export it as a web-ready SVG file.

a. Important: 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.

b. In the Visio toolbar, select File > Export.

c. Select Change File Type, then select SVG Scalable Vector Graphics (*.svg) then click Save As.

d. Save the *.svg file.

e. 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'.

5. Import the SVG into the Squared Up dashboard

We’re now ready to use the Visio diagram (exported as SVG) in our Squared Up dashboard. This next bit is the easy part.

a. Return to the Squared Up dashboard you created in step 1.

b. In the dashboard designer, select the Type panel and click on the Visio plugin icon.

c. You are prompted to select an SVG file. Drag (or browse to) the file you saved in the last step.

d. Now the magic happens. The diagram is uploaded to the Squared Up web server, rendered in the dashboard, and health icons are added to your server icons. If this doesn’t happen, don’t panic. We have a troubleshooting section below.

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

f. That’s it. Click 'done' on the dashboard designer and your dashboard is ready to publish. Note: the Visio plugin supports one Visio diagram per dashboard.

Walkthrough: Using an existing Visio diagram

If you already have Visio diagrams for your applications, you can easily use these in your Squared Up dashboards.

The steps are much the same as those in the walkthrough for Creating a new Visio diagram:

1. Define the scope

2. Export the items

3. Attach data to an existing Visio diagram

4. Export the Visio as SVG

5. Import the SVG into the Squared Up dashboard

As highlighted in step 3, we are going to attach the SCOM data to an existing Visio diagram instead of creating a new diagram:

3. Attach data to an existing Visio diagram

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


a. Open your existing Visio diagram.

b. In the toolbar, choose Data > Link Data to Shapes. In Visio 2016 you should choose Data > Custom Import (using 'Quick Import' does not use the column headers as the data label, and the SCOM IDs are incorrectly labelled 'F3' rather than 'scomId' and will not show the health status in Squared Up).

c. Select Microsoft Excel Workbook and click Next.

d. Browse to the Excel spreadsheet exported from Squared Up in step 2, keep the default options (in Visio 2016 click 'Select custom range' and select the data and column headings), complete the wizard and click Finish.

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

f. In the External Data window, select a row and drag it onto an existing icon on the page. The SCOM data will be attached to the icon.

g. Repeat the previous step for all of the servers in your application.

h. Save the Visio diagram.

The SCOM data attached to the icons will be merged with any existing data, so if you have already added data to your Visio diagram this will be preserved.

Alternatives for adding 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 to 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 OpsMgr

http://blog.tyang.org/2015/03/11/various-ways-to-find-the-id-of-a-monitoring-object-in-opsmgr/

 

We would add a couple of ways of exporting SCOM IDs:

1. The new export scope feature in Squared Up v2.1 (but import into your CMDB instead of using directly in 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.

Health Visualization

There are two options for visualising health state on your Visio dashboards: icons or colour replace.

Icons

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.


Colour Replace

Colour 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 colours 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 colours, or you can choose a specific colour using the colour picker. Squared Up will replace the chosen colour with red, amber, green or grey, depending on the health state of the SCOM object.

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


Changing the Squared Up page that opens when you drilldown

You can set your own dashboard to be the 'drilldown' for a particular object whenever that object is browsed to in Squared Up. For example, you can edit 'Dashboard1' to be the drilldown for 'TestGroup'. Whenever you navigate through Squared Up to 'TestGroup', for example from the health status icon in your Visio section, you will see 'Dashboard1' rather than the standard group dashboard showing information about TestGroup.

See How to set up dashboard drilldowns

Adding hyperlinks to Visio Diagrams

You can also 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:

Combining 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 plugins. For example, you can add performance data from the SCOM Data Warehouse alongside your Visio diagram.

The Visio Plugin does not support multiple Visio diagrams in a single dashboard.


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 load into Squared Up.


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

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. Upload the .SVG file to Squared Up.


See also:

How to resize Visio Diagrams in Squared Up

Troubleshooting Visio diagrams in Squared Up

The Dashboard Designer - The Quick Start Guide