How to embed a clickable Visio diagram in a SharePoint site

By special request, here is a quick instruction on how to embed a clickable diagram on a SharePoint site. It’s applicable to SPS 2003, WSS and MOSS 2007.

For the tutorial, we will create a simple flow diagram with 3 phases. Phase 2 consists of three processes. We want to be able to zoom in on these processes.

Step 1. Create a diagram in Visio.

  1. Start a new drawing (File > New).
  2. Create a the flow diagram as shown below.
    Create a simple flowchart
  3. Insert a new page (Insert > New Page).
  4. On this new page, create a second flow diagram and a text object labeled ‘Return’, as shown below.
    Create a sub flow on page 2

Step 2. Define hyperlinks in the diagram

  1. On page 1, select the box ‘Phase 2’.
  2. In the menu Insert, choose Hyperlinks.
  3. On the line Sub Address, click Browse.
  4. Select Page-2 and confirm with OK.
    Insert hyperlink
  5. Then again confirm with OK.
  6. To present ‘Phase 2’ as a hyperlink, change its text color to blue.

In the same way, create a hyperlink back for the text ‘Return’ on page 2.

Step 3. Export the diagram to HTML

  1. In the File menu, choose ‘Save as Web Page’.
    Choose a name and a location, and save the file.
    If all went well, you now have a clickable Visio diagram as a web page. The web page consists of an html-file and a folder of the same name.
  2. Test the webpage: click on ‘Phase 2’, and when page 2 opens, click on ‘Return’.

Step 4. Upload the diagram to SharePoint

We will upload our new web page to a document library. But since the web page includes a folder with dozens of files, it’s best to upload it in the Explorer view.

  1. On your SharePoint site (or area), open its default Document Library.
  2. Open the Explorer View.
  3. Drag the HTML file and folder (from step 3) to the document library.
    Drag the web page to the document library
  4. Return to the default view and open the just uploaded HTML file to test.
  5. Copy the web page’s URL to the clipboard.

5. Embed the diagram to your site or area

For SharePoint 2003:

  1. Return to the SharePoint site (or area) where you uploaded the web page, and click ‘Edit Page’ in the Actions menu.
  2. Click ‘Modify Shared Page’ in the upper right corner.
  3. Then choose ‘Add Web Parts’ > ‘Browse’.

For MOSS 2007:

  1. Return to the SharePoint site (or area) where you uploaded the web page, and click ‘Site Actions’ the upper right corner.
  2. Choose ‘Edit Page’.
  3. Then choose ‘Add a Web Part’.
  4. In the Web Part List, find the ‘Page Viewer Web Part’ and drag it to one of the page zones.
  5. On the Page Viewer Web Part, click on ‘open the tool pane’.
    Paste the URL in the tool pane
  6. Paste the URL from the clipboard to the Link box in the tool pane. Confirm with ‘OK’.
  7. Return to ‘View Page’ mode and test the web part.
    The completed web part

Voila!

4 gedachten over “How to embed a clickable Visio diagram in a SharePoint site”

  1. how do you get to a specific page in a multipage visio document.
    I want to show different points of a large org chart based on which dept site I am in.
    thanks

  2. Sean, when you have created a web page out of your Visio document, find the web page and corresponding folder. If you look into the folder, you’ll see that every page from your Visio document has a corresponding web page in this folder. The only difference is: they’re numbered.
    So, if you upload your entire webpage with folder to a document library, the only thing you’d have to do for each page is create a page viewer webpart and link to the correct html page in your ‘web page’ folder. Let me know if it works.

  3. This is great. I do have a question, if I wanted to make changes to the visio diagram, how would I be able to show a change in the Visio diagram in the webpart after I make a change in the actual Visio diagram that I have uploaded into a shared document?

  4. This is fantastic. Simple question – when the visio diagram loads up within the SharePoint page, does anyone know how to stop the left-hand menu appearing by default?

Reacties zijn gesloten.