Adding clickable Visio diagram to SharePoint page

%3CLINGO-SUB%20id%3D%22lingo-sub-51523%22%20slang%3D%22en-US%22%3EAdding%20clickable%20Visio%20diagram%20to%20SharePoint%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-51523%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20a%20requirement%20to%20add%20a%20Visio%20diagram%20that%20contains%20links%20to%20SharePoint%20pages%20connected%20to%20the%20shapes%20in%20the%20diagram.%20How%20would%20I%20do%20that%3F%20I%20have%20no%20experience%20with%20Visio%2C%20and%20I%20found%20instructions%20on%20how%20to%20add%20hyperlinks%20to%20shapes%2C%20but%20I'm%20not%20having%20any%20luck%20finding%20out%20how%20to%20embed%20the%20clickable%20diagram%20on%20a%20SharePoint%20page.%20Is%20there%20a%20web%20part%20I%20can%20use%2C%20or%20is%20it%20more%20complicated%20than%20that%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-51523%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-52992%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20clickable%20Visio%20diagram%20to%20SharePoint%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-52992%22%20slang%3D%22en-US%22%3EWe%20also%20embeds%20visio%20files%20and%20in%20Visio%2C%20before%20saving%2C%20we%20navigates%20to%20the%20Design%20tab%2C%20choses%20Size%20and%20Fit%20to%20Drawing%20-%20that%20will%20remove%20all%20white%20space%20around%20the%20drawing%20and%20we%20are%20happy%20with%20the%20result.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-52114%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20clickable%20Visio%20diagram%20to%20SharePoint%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-52114%22%20slang%3D%22en-US%22%3ESorry%2C%20I'm%20not%20sure%20what's%20going%20on.%20Sound%20like%20you%20may%20need%20to%20some%20experimentation.%20PDF%20is%20always%20an%20option%2C%20but%20then%20you%20lose%20some%20of%20the%20visio%20web%20part%20functionality.%3CBR%20%2F%3E%3CBR%20%2F%3EAs%20with%20many%20things%20in%20SP%2C%20the%20best%20solution%2C%20will%20depend%20on%20the%20requirements%20and%20the%20personal%20opinions%20of%20the%20decision%20makers.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-52112%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20clickable%20Visio%20diagram%20to%20SharePoint%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-52112%22%20slang%3D%22en-US%22%3E%3CP%3EThe%20customer%20said%20the%20diagram%20is%20zoomed%20to%2096%25%20in%20Visio%2C%20so%20why%20is%20it%20reduced%20to%2044%25%20in%20the%20web%20part%3F%20Even%20if%20I%20make%20the%20web%20part%20huge%2C%20the%20diagram%20is%20still%20tiny%20(44%25).%20Maybe%20we%20can%20try%20using%20pdf%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-52111%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20clickable%20Visio%20diagram%20to%20SharePoint%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-52111%22%20slang%3D%22en-US%22%3EIts%20not%20%22difficult%22%2C%20but%20it%20can%20be%20tricky%20when%20people%20have%20different%20size%20monitors%20and%20different%20resolutions%20to%20determine%20the%20optimal%20settings%20in%20Visio.%20Its%20up%20to%20the%20diagram%20creator%20to%20anticipate%20the%20various%20ways%20in%20which%20the%20diagram%20will%20be%20viewed%2C%20this%20is%20one%20of%20the%20reasons%20why%20the%20web%20part%20as%20zooming%20capability.%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-52109%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20clickable%20Visio%20diagram%20to%20SharePoint%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-52109%22%20slang%3D%22en-US%22%3E%3CP%3EYes%20I%20know%2C%20but%20I'm%20predicting%20the%20site%20owner%20will%20want%20the%20diagram%20larger%20on%20the%20page.%20It%20shouldn't%20be%20that%20difficult%2C%20right%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-51977%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20clickable%20Visio%20diagram%20to%20SharePoint%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-51977%22%20slang%3D%22en-US%22%3EYou%20should%20be%20able%20to%20zoom%20in%2Fout%20directly%20in%20the%20diagram%20without%20having%20to%20go%20back%20to%20Visio%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-51972%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20clickable%20Visio%20diagram%20to%20SharePoint%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-51972%22%20slang%3D%22en-US%22%3E%3CP%3EI%20actually%20saw%20that%2C%20but%20I%20found%20no%20setting%20to%20override%20that.%20I've%20asked%20the%20document%20author%20to%20save%20it%20at%20a%20higher%20zoom%20level%2C%20hopefully%20that%20will%20work%2C%20but%20I%20wanted%20to%20have%20another%20option%20in%20case%20that%20doesn't%20work.%20That%20statement%20on%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-51965%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20clickable%20Visio%20diagram%20to%20SharePoint%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-51965%22%20slang%3D%22en-US%22%3E%3CP%3EHere%20are%20some%20instructions%20from%20SP%202010%2C%20I'm%20not%20sure%20if%20they%20still%20apply%20to%20SPonline%2C%20but%20they%20may%3C%2FP%3E%3CP%3E%3CSTRONG%3EOverride%20the%20Web%20Drawing%E2%80%99s%20default%20initial%20view%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3EBy%20default%2C%20when%20a%20Web%20drawing%20opens%20it%20displays%20the%20page%20that%20was%20open%20when%20the%20diagram%20was%20last%20saved%2C%20and%20at%20the%20same%20zoom%20level%20and%20pan%20position.%20You%20can%20override%20this%20to%20display%20the%20view%20as%20it%20is%20set%20when%20you%20select%20this%20option%20and%20click%20%3CSTRONG%3EApply%3C%2FSTRONG%3E%20or%20%3CSTRONG%3EOK%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESee%20%3CA%20href%3D%22https%3A%2F%2Fsupport.office.com%2Fen-us%2Farticle%2FCustomize-your-Visio-Web-Access-Web-part-093C7A6B-4EC4-49FA-8417-91966E0E9547%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsupport.office.com%2Fen-us%2Farticle%2FCustomize-your-Visio-Web-Access-Web-part-093C7A6B-4EC4-49FA-8417-91966E0E9547%3C%2FA%3E%20for%20the%20details%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-51958%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20clickable%20Visio%20diagram%20to%20SharePoint%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-51958%22%20slang%3D%22en-US%22%3E%3CP%3EOK...%20this%20works%20great%2C%20but%20I%20have%20one%20additional%20question.%20The%20diagram%20is%20VERY%20small%2C%20and%20the%20zoom%20is%20set%20at%2044%25.%20I%20can't%20find%20a%20way%20to%20make%20it%20bigger%20in%20SharePoint%2C%20does%20that%20need%20to%20be%20done%20in%20Visio%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-51675%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20clickable%20Visio%20diagram%20to%20SharePoint%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-51675%22%20slang%3D%22en-US%22%3EJust%20save%20the%20Visio%20file%20as%20a%20.vdsx%20file%20in%20a%20document%20librarie%20in%20the%20site%20and%20you%20are%20ready%20to%20go%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-51628%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20clickable%20Visio%20diagram%20to%20SharePoint%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-51628%22%20slang%3D%22en-US%22%3E%3CP%3EPretty%20sure%20he%20has%20Visio%202016%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-51547%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20clickable%20Visio%20diagram%20to%20SharePoint%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-51547%22%20slang%3D%22en-US%22%3E%3CP%3EIf%20they%20have%20Visio%202013%2C%20they%20won't%20need%20to%20do%20anything%20special%2C%20that%20was%20actually%20something%20to%20be%20concerned%20with%20in%20older%20versions%20of%20Visio%20and%20SP.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20may%20find%20this%20recent%20announcement%20of%20interest%2C%20%3CA%20href%3D%22https%3A%2F%2Fblogs.office.com%2F2017%2F02%2F23%2Fvisualize-work-in-powerful-new-ways%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fblogs.office.com%2F2017%2F02%2F23%2Fvisualize-work-in-powerful-new-ways%2F%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-51530%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20clickable%20Visio%20diagram%20to%20SharePoint%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-51530%22%20slang%3D%22en-US%22%3E%3CP%3EThank%20you!%20I%20personally%20don't%20have%20Visio%2C%20so%20the%20user%20will%20need%20to%20add%20the%20links...%20the%20links%20will%20be%20pointing%20to%20other%20SharePoint%20pages%20in%20the%20site.%20So%20there%20is%20a%20Viso%20web%20part%3F%20What%20format%20does%20the%20file%20need%20to%20be%20saved%20as%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-51526%22%20slang%3D%22en-US%22%3ERe%3A%20Adding%20clickable%20Visio%20diagram%20to%20SharePoint%20page%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-51526%22%20slang%3D%22en-US%22%3EIn%20general%20it%20would%20depend%20on%20what%20the%20link%20is%20going%20to%20point%20to%2C%20but%20typically%20you%20would%20want%20to%20do%20that%20within%20Visio%20itself%20before%20the%20diagram%20is%20published.%20You%20can%20then%20add%20the%20Visio%20web%20part%20to%20one%20or%20more%20SharePoint%20pages.%20Make%20sure%20you%20choose%20the%20correct%20file%20extension%20when%20you%20save%20the%20Visio%20file%20so%20that%20it%20will%20work%20with%20the%20Visio%20Web%20Part.%3CBR%20%2F%3E%3CBR%20%2F%3EKeep%20in%20mind%20that%20the%20Visio%20web%20part%20is%20highly%20interactive%20and%20provides%20a%20lot%20functionality.%3CBR%20%2F%3E%3CBR%20%2F%3EThis%20should%20help%20you%20get%20started%2C%20%3CA%20href%3D%22https%3A%2F%2Fsupport.office.com%2Fen-us%2Farticle%2FUse-the-Visio-Web-Access-Web-Part-to-add-diagrams-to-SharePoint-pages-958F7AC6-7F66-49B2-9770-47206763BB11%3Fui%3Den-US%26amp%3Brs%3Den-US%26amp%3Bad%3DUS%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsupport.office.com%2Fen-us%2Farticle%2FUse-the-Visio-Web-Access-Web-Part-to-add-diagrams-to-SharePoint-pages-958F7AC6-7F66-49B2-9770-47206763BB11%3Fui%3Den-US%26amp%3Brs%3Den-US%26amp%3Bad%3DUS%3C%2FA%3E%3CBR%20%2F%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

I have a requirement to add a Visio diagram that contains links to SharePoint pages connected to the shapes in the diagram. How would I do that? I have no experience with Visio, and I found instructions on how to add hyperlinks to shapes, but I'm not having any luck finding out how to embed the clickable diagram on a SharePoint page. Is there a web part I can use, or is it more complicated than that?

14 Replies
Highlighted
In general it would depend on what the link is going to point to, but typically you would want to do that within Visio itself before the diagram is published. You can then add the Visio web part to one or more SharePoint pages. Make sure you choose the correct file extension when you save the Visio file so that it will work with the Visio Web Part.

Keep in mind that the Visio web part is highly interactive and provides a lot functionality.

This should help you get started, https://support.office.com/en-us/article/Use-the-Visio-Web-Access-Web-Part-to-add-diagrams-to-ShareP...
Highlighted

Thank you! I personally don't have Visio, so the user will need to add the links... the links will be pointing to other SharePoint pages in the site. So there is a Viso web part? What format does the file need to be saved as?

Highlighted

If they have Visio 2013, they won't need to do anything special, that was actually something to be concerned with in older versions of Visio and SP.

 

You may find this recent announcement of interest, https://blogs.office.com/2017/02/23/visualize-work-in-powerful-new-ways/

 

Highlighted

Pretty sure he has Visio 2016

Highlighted
Just save the Visio file as a .vdsx file in a document librarie in the site and you are ready to go
Highlighted

OK... this works great, but I have one additional question. The diagram is VERY small, and the zoom is set at 44%. I can't find a way to make it bigger in SharePoint, does that need to be done in Visio?

Highlighted

Here are some instructions from SP 2010, I'm not sure if they still apply to SPonline, but they may

Override the Web Drawing’s default initial view

By default, when a Web drawing opens it displays the page that was open when the diagram was last saved, and at the same zoom level and pan position. You can override this to display the view as it is set when you select this option and click Apply or OK

 

See https://support.office.com/en-us/article/Customize-your-Visio-Web-Access-Web-part-093C7A6B-4EC4-49FA... for the details

 

 

Highlighted

I actually saw that, but I found no setting to override that. I've asked the document author to save it at a higher zoom level, hopefully that will work, but I wanted to have another option in case that doesn't work. That statement on

Highlighted
You should be able to zoom in/out directly in the diagram without having to go back to Visio
Highlighted

Yes I know, but I'm predicting the site owner will want the diagram larger on the page. It shouldn't be that difficult, right?

Highlighted
Its not "difficult", but it can be tricky when people have different size monitors and different resolutions to determine the optimal settings in Visio. Its up to the diagram creator to anticipate the various ways in which the diagram will be viewed, this is one of the reasons why the web part as zooming capability.
Highlighted

The customer said the diagram is zoomed to 96% in Visio, so why is it reduced to 44% in the web part? Even if I make the web part huge, the diagram is still tiny (44%). Maybe we can try using pdf?

Highlighted
Sorry, I'm not sure what's going on. Sound like you may need to some experimentation. PDF is always an option, but then you lose some of the visio web part functionality.

As with many things in SP, the best solution, will depend on the requirements and the personal opinions of the decision makers.
Highlighted
We also embeds visio files and in Visio, before saving, we navigates to the Design tab, choses Size and Fit to Drawing - that will remove all white space around the drawing and we are happy with the result.