SvgPublish use case: Principalities in Medieval Russia

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)


https://nbelyh.github.io/svgpublishdemo/demo/principalities.html

This diagram is now added to the list of examples here. You can find also the source Visio file there:
https://unmanagedvisio.com/products/svg-publish/html-export-demo/

Continue reading“SvgPublish use case: Principalities in Medieval Russia”

SvgPublish Extension 1.3.1 released

Download the latest version:
https://unmanagedvisio.com/download/svgpublish/SvgExport-1.3.1.msi

The extension’s page
https://unmanagedvisio.com/products/svg-publish

What is new in this release

  • [bugfix] cursor "pointer" for no reason on the shapes #47
  • [enhancement] Feature to automatically pick up URLs in properties #45
  • [enhancement] css classes are not set for background shapes #40
  • [enhancement] simple bounding-box selection and hover as option instead of "heavy" svg filters #17
  • [enhancement] simple checkboxes option instead of toggles #49

Continue reading“SvgPublish Extension 1.3.1 released”

Embed Visio diagram in modern SharePoint pages

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 app has been validated by Microsoft SPFx validation team and now available in the app catalog:
https://appsource.microsoft.com/en/product/office/WA200002491

The WebPart details:
https://unmanagedvisio.com/products/diagram-frame-sharepoint-visio-web-part/

Diagram Frame WebPart

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:

https://unmanagedvisio.com/products/diagram-frame-sharepoint-visio-web-part/

Installation

You can install it directly from the App Store, or you can download a package from GitHub and install it manually:
https://appsource.microsoft.com/en/product/office/WA200002491

How to add an app from SharePoint Store:
https://docs.microsoft.com/en-us/sharepoint/administration/add-apps-for-sharepoint-to-a-sharepoint-site

Download this release:
https://github.com/nbelyh/VisioOnlineSpfxWebPart/releases/tag/1.0

Support

Full source code:
https://github.com/nbelyh/VisioOnlineSpfxWebPart

If you have any ideas or found a bug, feel free to file an issue on GitHub
https://github.com/nbelyh/VisioOnlineSpfxWebPart/issues

Sharing Visio diagrams in social media

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.

Continue reading“Sharing Visio diagrams in social media”

SvgPublish 1.3 released

SvgPublish Extension 1.3 released

The extension’s page
https://unmanagedvisio.com/products/svg-publish/

Download the latest version:
https://unmanagedvisio.com/download/svgpublish/SvgExport-1.3.0.msi

Improvements in this release

  • New template editor with live preview
  • Support both global and per-shape templates
  • Cards (OG) support metadata for social sharing
  • GitHub authentication fixed upload changed to put all files in single commit
  • Follow cursor option for the tooltip/popover
  • Visio Zoom and target hyperlink settings shoudl be respected now
  • Layers can be sorted alphabetically in the sidebar

Please note that this is major release, make sure you backed up your diagrams files before upgrading!

Continue reading“SvgPublish 1.3 released”

Editing SVG code online

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.

file

Continue reading“Editing SVG code online”

Azure DevOps to build office (Visio) VSTO Add-ins

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.

Continue reading“Azure DevOps to build office (Visio) VSTO Add-ins”