Export the svg of web-based bpmn model to convert to pdf/jpg

Flowable Application
1

Hi all

We are looking into the requirements to add the functionality to export the svg from the web-based modeler. With the end game on converting the svg to various formats (PDF / jpg / …) one of the main challenges is the collapsed subprocesses.

Below is my first analyze on how I think to integrate the functionality but some feedback is most appriciated

Export bpmn-model to PDF / image

Goals

  • We want to export the BPMN model to an image / pdf.
  • We want the export to be as close to the design time
  • All (nested / collapsed) processes in the BPMN model must be shown in the pdf / images.

Currently available components

Image Generators (CMM / BPMN / DMN?)

  • Flowable provides an image generation library who converts the json structure to an jpeg / svg
Advantage Disadvantage
Can reuse the json as saved in the database The user receives a diffrent image compared to the flow at designtime
used for tumbnail generation There is a converter for each json structure. If the ui (stensilset) changes the corresponding generator must be updated.

SVG from the Javascript / ORYX / Angular based modeler

Flowable has a webbased modeler who allows the user to draw processes. This is by (assumptionbase) the most common way to design a process / CMM / *. This also provides functionality to save a model to svg representation. The svg however does have the following kinks:

  • The namespace is wrong
  • The oryx namespace has no use in the context of generating a svg (as image) to export to pdf / jpeg …
  • Collapsed subprocesses result in a new svg - resulting in multiple images per model.
Advantage Disadvantage
One export location to rule all generators The image can’t be generated from the backend.
The user receives an image excactly to the flow at designtime There are (minor) issues with the svg format in context of pdf/image generation

Proposal

  • Add a button to the bpmn modeler export to …
  • Implement functionality to extract all svg’s -> One svg per collapsed subprocess.
  • Send svg’s to the backend and write them to an pdf?

Notes

  • Not yet 100% sure on the implementation but the proposal describe the flow in large, optimistic way.
1 Like