Read BPMN file and generate SVG/PNG for a single element


#1

I’m looking for some programmatic method (JavaScript) to read the BPMN file and for any single element recreate the image that is displayed or generated.

Here is a small segment of my BPMN file.


   <bpmn:userTask id="Task_1xlznse" name="Enter parts into BIP">
      <bpmn:documentation>Using AliExpress web site, copy and past information for each part into BIP entry form.  Try to match partsin other bins. up with similar parts </bpmn:documentation>
      <bpmn:extensionElements>
        <camunda:properties>
          <camunda:property name="order" value="32" />
          <camunda:property name="title" value="Enter each parts, deswcription link, prices, store bin location" />
          <camunda:property name="image" value="download.png" />
        </camunda:properties>
        <camunda:executionListener class="" event="start" />
      </bpmn:extensionElements>
      <bpmn:incoming>SequenceFlow_0hbuk6m</bpmn:incoming>
      <bpmn:incoming>SequenceFlow_0gd9q9x</bpmn:incoming>
      <bpmn:incoming>SequenceFlow_0fdm043</bpmn:incoming>
      <bpmn:outgoing>SequenceFlow_1e86so0</bpmn:outgoing>
      <bpmn:multiInstanceLoopCharacteristics isSequential="true" />
    </bpmn:userTask>

What I’m looking to get is the image in any format SVG/PNG that would be generated from that one element.

example:

2018-02-22_15-15-26

I think part of the solution is in BPMN-JS and one of the drawing libraries but my research has not been very productive.


#2

Does my post in Enhanced BPMN automated Documentation ASCIIDoctor answer your question?