BB code in posts seems to be working again!
I haven't turned on every single tag, so please let me know if there are any that are used/needed but not activated.

Main Menu

Visio Online - new technology!

Started by Nikolay, June 04, 2017, 09:42:27 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.


Recently took some time to look at the "underlying" technology of Visio Online (hit F12 and dig into the sources). WOW! :)

First point: they finally stopped fooling around with "bitmaps" (PNG images really) and region markups (used in SP Visio Services before), and switched to SVG rendering, with all it's pluses and minuses. What it means - it should provide crisp rendering and limitless possibilities for visuals and scripting, but performance and bandwidth may suffer for very complex drawings.

Second point: rendering does not seem to be that tightly bound to SharePoint anymore! It's built into the new Office Online server, which can be used even without SharePoint. What this means - you can embed visio diagrams rendered with office online on your website or web application, and these diagrams can be even stored on your website. Tried to build a simple page on the site: (the viewing works, but that diagram now comes in the end from an Office 365 site. What I did not check is if it can come from some unrelated site, i.e. with WOPI server implementation). The diagram should come from a "trusted partner" site (or microsoft site). If you have on-premise install of Office Online Server, then you are in control of that.

Third point: VSD (yes, good old VSD) is supported.

From the first view- Bravo to Visio team!:)

From developer's point of view, it would be nice to see Visio support for Office Javascript Add-ins (in the store) and the support for the Script Lab :)


In the latest release of my SvgPublish extension (1.2+),
a new script editor is added that allows to play with scripting for the new Visio Online with comfort :)

Here is a video how the things work. First 1-2 minutes turned out to be boring, but then it's becoming more interesting (I hope):

To play with the thing, you need: SharePoint (SP Online is fine), and latest version of the extension (1.2.3.x)

Here is the "online" version (in-browser editing):


The experience is somewhat similar to the ScriptLab, a project to support other Office applications, when you can write some code and then run it both online and offline.

This feature supports also "native" mode (when you export plain HTML/SVG file, without any relation to Visio online - you'll also get autocomplete), i.e. if you have used any scripts before with SVG Publish extension, now you'll be able to work with them with easier, and directly manipulate the shapes on the screen. For the case of SharePoint the extension can also generate a "wrappper" web part page (including embeddable the web viewer part). Note that the editor panel is optional of course, so after building your script you can just turn the editor off and just allow he script to be executed on load.

Here is the "offline" version (editing in Visio and sending online):


The editor is based on brilliant monaco editor (used also in no less brilliant VS Code), and supports autocomplete, parameter info, search, "smart" rename, and a lot of other things, both offline and online. Note that I've taken my time to create typescript API definition file (for the monaco editor) that describes the Visio Online API (and SvgPublish API) for that autocomplete (kudos for me, - that wasn't that easy, yep :)

Browser ID: smf (possibly_robot)
Templates: 4: index (default), Display (default), GenericControls (default), GenericControls (default).
Sub templates: 6: init, html_above, body_above, main, body_below, html_below.
Language files: 4: index+Modifications.english (default), Post.english (default), Editor.english (default), Drafts.english (default).
Style sheets: 4: index.css, attachments.css, jquery.sceditor.css, responsive.css.
Hooks called: 207 (show)
Files included: 32 - 1207KB. (show)
Memory used: 1018KB.
Tokens: post-login.
Cache hits: 14: 0.00179s for 26,766 bytes (show)
Cache misses: 3: (show)
Queries used: 15.

[Show Queries]