This post is a customer use case: using SvgPublish Visio extension to modernize website (Principalities of Medieval Russia). The Runivers team uses the SvgPublish to update the site, and recently shared a nice example. This use can also demonstrates some new features in the SvgPublish added recently, like custom selection settings and sidebar options. The interactive diagram basically looks like this (click to navigate to it)
My wrapper SPFx web part for embedding Visio diagram in modern SharePoint page has been just published in the Microsoft store (it’s free and open source).
The WebPart embeds Visio diagram in a modern SharePoint page with richer display options (default zoom, page, etc) thant the default "File Viewer". It is somewhat similar to the "Visio Web Access" web part in the "classic" SharePoint. In addition to the stock "File Viewer" web part which you could use to display Visio diagram, this one features the following:
File Browser
File browser, specific to Visio diagrams
Start Page
You can specify which page to show first. You can specify either page name (like “My Second Page”), This only works if the diagram has more than one page. In case the page you selected does not exist, it will default to the first page.
Select default zoom level
You can set the default zoom level for the diagram.
Full width and application page mode support
You can add the web part as an application page.
Support for custom width/height setting
You can specify the width and height of the diagram. Can be in percents (also percent of the screen) or actual measurement units (like the classic “Visio diagram view”).
Support disabling menu items
You can optionally hide diagram toolbar, diagram boundary, border
Support disabling some interactivity
You can optionally disable hyperlinks, zoom, pan, and the navigator
For more information, please check the web part site:
When you share any link on LinkedIn, Teams, Facebook, or other social platform, it extracts a "preview" picture, like image, title and description.
Any site can provide this information by incorporation "open graph" tags into the HTML head. Many social networks, such as Facebook and twitter, even have a rules for the image size and text length. Read more about the open graph links on the open graph site
Check out what it looks like with Facebook:
The SvgPublish now also supports these media tags. Means, you can publish a diagram and then just paste a link to it in Teams or LinkedIn, and the link will show a preview, with a link to the published version.
When you build a site or a web application, periodically there can be a need to slightly modify a code of an SVG fragment used in that site, like add an arrow to a button or something. Not visually, but directly in the SVG code. For visual editing, there are quite a number of tools, like Inkscape. The thing is it produces not that "developer-friendly" svg code.
So sitting at home at corona-virus times I have not found a good online tool for that at first, and thought that monaco-editor could be an almost ready-to-go solution, with autocomplete and tooltips. After a couple of days built a simple web-site that provides basic auto-complete, and integrates that editor. It also uses free firebase plan to store user data and host the website, so that you can save your changes. The code is inspired by this article on implementing custom monaco editor intellisense. All code is in an open GitHub repository.
Custom templates allow you to extend or modify tooltips/popover/sidebar produced by the SvgPublish Visio extension to tailor your needs. This article explains how to create such custom templates.
These notes basically summarize setting up automated build for Office extensions (such as VSTO) in the cloud (i.e. Azure DevOps). Note that Azure DevOps supports private repositories for free. For open source repositories, it does not even impose any limitations (for private repositories, max build time per month is limited, so you cannot occupy 100% of the server for your builds). Basically I’m fine with "free" layer for now.
