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.
- Start a new drawing (File > New).
- Create a the flow diagram as shown below.
- Insert a new page (Insert > New Page).
- On this new page, create a second flow diagram and a text object labeled ‘Return’, as shown below.
Step 2. Define hyperlinks in the diagram
- On page 1, select the box ‘Phase 2’.
- In the menu Insert, choose Hyperlinks.
- On the line Sub Address, click Browse.
- Select Page-2 and confirm with OK.
- Then again confirm with OK.
- 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
- 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.
- 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.
- On your SharePoint site (or area), open its default Document Library.
- Open the Explorer View.
- Drag the HTML file and folder (from step 3) to the document library.
- Return to the default view and open the just uploaded HTML file to test.
- Copy the web page’s URL to the clipboard.
5. Embed the diagram to your site or area
For SharePoint 2003:
- Return to the SharePoint site (or area) where you uploaded the web page, and click ‘Edit Page’ in the Actions menu.
- Click ‘Modify Shared Page’ in the upper right corner.
- Then choose ‘Add Web Parts’ > ‘Browse’.
For MOSS 2007:
- Return to the SharePoint site (or area) where you uploaded the web page, and click ‘Site Actions’ the upper right corner.
- Choose ‘Edit Page’.
- Then choose ‘Add a Web Part’.
- In the Web Part List, find the ‘Page Viewer Web Part’ and drag it to one of the page zones.
- On the Page Viewer Web Part, click on ‘open the tool pane’.
- Paste the URL from the clipboard to the Link box in the tool pane. Confirm with ‘OK’.
- Return to ‘View Page’ mode and test the web part.