The Visio tile for SquaredUp 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 SquaredUp, 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 SquaredUp 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 SquaredUp
In this walkthrough we will create a dashboard showing the health state of several servers.
The steps required are:
C. Save as SVG
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 SquaredUp
We are going to start by creating a SquaredUp dashboard and choosing the objects that we want to show in our Visio diagram.
- In SquaredUp navigate to where you'd like the dashboard to be created. Hover over the + button and click dashboard.
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.
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.
server2.domain.local), or click group and search for an existing group (e.g.
The items are displayed in the dashboard as normal:
Click the export button and your browser will download an Excel spreadsheet containing the basic details of each object: Display Name, Path and ID.
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
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.
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 SquaredUp
- Select Microsoft Excel Workbook and click Next
- Browse to the Excel spreadsheet you downloaded, and click Finish.
- The SCOM object data appears in a new External Data window docked at the bottom of the screen.
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.
Repeat the previous step for all of the shapes you wish to link.
To hide or the SCOM IDs and names select the shape(s) in Visio then go to the Data menu, click Advanced Data Graphics on the Data ribbon, and choose No Data Graphic:
Or right click on the object Data > Remove Data Graphic
- Save the Visio diagram.
C. Save as SVG
The Visio diagram is now complete. To use it in a SquaredUp 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.
- Click File then Save As
In the Save As Type drop down list select SVG Scalable Vector Graphics (*.svg) then click Save.
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 SquaredUp
We're now ready to use the SVG file in our SquaredUp dashboard. This next bit is the easy part.
- Return to the SquaredUp dashboard you created at the beginning.
In the select tile panel, click on Visio
- Drag (or browse to) the SVG file you saved.
- Now the magic happens. The diagram is uploaded to the SquaredUp web server, rendered in the dashboard, and health icons are overlayed. If this doesn't happen, don't panic, see Troubleshooting the Visio tile.
- 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).
- That's it. Click done on the dashboard designer and your dashboard is ready to publish.
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.
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:
Can I add hyperlinks to Visio Diagrams
You can add hyperlinks in Visio that then work in SquaredUp. Simply right-click on an object in Visio and add a hyperlink, to a SquaredUp dashboard, or any web page.
Can I combine Visio diagrams with other SCOM data
Once you have created your Visio dashboard in SquaredUp, 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.
- To download a SCOM diagram in Visio format, open the diagram and click the following button on the toolbar:
- Save the file as a Visio .VDX file.
- Open the .VDX file in Visio, attach data and save as an .SVG file, as described above.
Drag the .SVG file into the Visio tile in SquaredUp.
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.
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.
Icons are a familiar way of visualising health state and are typically used for application and network topology diagrams.
SquaredUp draws a health state icon for each shape that is linked to a SCOM object in your Visio diagram (using the ScomId data field).
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.
Drag the slider to change the icon size.
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.
SquaredUp 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, SquaredUp will replace all colors, or you can choose a specific color using the color picker. SquaredUp 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.
SquaredUp only requires one field to be added to the shape data:
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:
- The scope export button (but import into your CMDB instead of directly into Visio).
- 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.