Skip to main content

Release 6.6.0

· 3 min read
Simon Porritt
Simon Porritt
JsPlumb core team

Export to SVG, PNG and JPG​

This is an exciting new capability that JsPlumb offers. When using a Shape library to render the nodes in your UI, you can now export the Surface canvas to either SVG, PNG or JPG.

We've added support for this to our Flowchart builder starter app:

SVG, PNG and JPG export - JsPlumb - JavaScript and Typescript diagramming library that fuels exceptional UIs

When you click one of these you'll see a preview window, from which you can download the export:

SVG, PNG and JPG export - JsPlumb, flowcharts, chatbots, bar charts, decision trees, mindmaps, org charts, gantt charts and more

JsPlumb offers a lightweight UI to assist with the export, as shown above, which is easily customised via CSS, and also a lower-level programmatic API if you want to do something more bespoke.

Read more about SVG, PNG and JPG export in the JsPlumb documentation.

Also checkout the the Angular integration documentation for a discussion of some useful methods related to this that we added to JsPlumb's angular service.

Miscellaneous updates​

  • The Angular service was augmented with new methods to support exporting to SVG/PNG/JPG - see the Angular integration documentation for details.

  • The ShapeLibrary component now supports rendering labels to shapes as part of their SVG element. Previously a user was required to separately manage labels, but the shape library can now handle that for you. For documentation on this, see https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/shape-libraries

  • A new flag useHTMLElement is supported on Label overlays. Setting to false will result in JsPlumb using an SVG text element for the label overlay, rather than an HTML element.

  • A new flag useHTMLLabel was added to edge definitions, which you can use to override the new default behaviour of using an SVG text element for the default label.

Breaking changes​

  • The ShapeLibraryPalette no longer registers a jtk-shape tag on the associated Surface. Instead, the shape library needs to be passed in the render options to the Surface. See the shape libraries documentation for details.

  • When you specify a label in an edge type, JsPlumb now creates an SVG text element for it, rather than an HTML element.

  • By default, hover events are now switched off in the UI layer. We expect this change to affect almost nobody at all. For a full discussion of the reasoning behind this, see the documentation on rendering at https://docs.jsplumbtoolkit.com/toolkit/7.x/lib/rendering.

Bugfixes​

  • Fixed an issue with the lasso plugin that would cause it to fail on devices with touch + pointer input methods.
  • Fixed an issue whereby a cssClass defined on an edge mapping would not be applied to a newly created edge.

Get in touch!​

If you'd like to discuss any of the ideas/concepts in this article we'd love to hear from you - drop us a line at hello@jsplumbtoolkit.com.

Not a user of the jsPlumb Toolkit but thinking of checking it out? Head over to https://jsplumbtoolkit.com/trial. It's a good time to get started with jsPlumb.