Scripts used in svg publish extension are on github

Recently published all javascript, html, and css code of scripts used in html publishing to the GitHub for the upcoming version 1.1:

This repository contains the default built-in templates, that are used in the Svg Publish extension

The scripts/style files are bundled and minified at the build time by the extension,
and visible in the template as file “vp-script.min.js” and “vp-style.min.css” respectively.
The default template, installed with the app, is also there.

First, these are for reference. Second, they can be easily used your own solution. There are two ways:

Way 1. Just drop the content of the file into “immediate” script window on the diagram.
Remember to uncheck corresponding option, if you ware overwriting it with custom code.

Way 2. You can use these as samples to create your own custom template.
To do so, create a copy of the vp-template.html file, and check “use custom template” in the settings.

Simple example: tooltip. In fact, it’s almost 100% stock bootstrap tooltip. The core is just this simple:

// run through all exported shapes
$.each(diagram.shapes, function (shapeId, shape) {

        if (!shape.Comment)  // if shape has no comment, skip it

        // get SVG element for the shape by id
        var $shape = $("#" + shapeId);

        // attach bootstrap tooltip to it:
            container: "body",
            title: shape.Comment

Leave a Reply