JS file in any JavaScript editor and copy paste the following contents into it. Create a drawing in Visio and publish it to SharePoint document library as a VDW file.To do so, assuming you have “Contribute”, “Design” or “Full Control” permissions to a page in SharePoint Server 2010, you should: Before you can interact programmatically with a Visio Web drawing you must add a Visio Web Access web part to a web part page, load a VDW file into it and add a Content Editor Web part to the page to contain your JavaScript.

Now that you understand the object and event model of the API, let’s get started coding. Then, when the ondiagramcomplete event fires you’ll want to get a reference to the currently loaded page and set-up handlers for the various mouse events. Note that vwaControl is the only valid object in the object model until ondiagramcomplete fires. Typically, when the onApplicationLoad event fires you’ll want to get a reference to the vwaControl object and set-up handlers for ondiagramcomplete. The diagram below is the state chart of VwaControl events: To program against the Visio Web Access web part, you must catch the events it exposes by writing event handler functions. Like many JavaScript APIs, it’s important to note that the Visio Services JavaScript API is event-based. Notice that related class members are collected into functional groups – each group is discussed in more detail in the API in the appendix of this article. The class diagram below summarizes the available objects in the API.

Combining data from inside and outside a diagram to build dynamic composite mashups.

Exposing diagram data, such as shape name and shape data, to your solution.

Writing custom handlers for mouse events within the drawing.

Creating visual markup on the Visio drawing canvas.

Interacting with web page elements that don’t expose web part connections.

Some key scenarios enabled by the Mashup API are: In a nutshell, the Visio Services JavaScript Mashup API enables developers to access and manipulate the Visio web drawing, its pages and shapes.

Overview of the Visio Services JavaScript Mashup API In this post we’ll review the breadth of possibilities by the Visio Services Mashup API and show you how to get started coding with a few simple examples. If you need more flexibility in creating rich diagram mashups than offered out of the box by web part connections, you can use the Visio Services JavaScript Mashup API. Previously, we took a look at how to create interactive mashups with Visio diagrams without writing any code.

Sample visio file