Automatic BPMN diagram drawer

BPMN & Modeling Discussion & Questions
1

Thanks to java camunda-bpmn-model library it is convenient to build bpmn models on a fly.
But generated BPMN models are without diagram data and cannot be displayed as diagram, it would be very nice to have bpmn diagram as well.
Is there any library already which does the magic?

Thanks!
Erki

1 Like
2

Hi @Erki_Kriks,

right now there are no projects that allow generation of DI for a diagram. We had multiple prototypes, but they never made it to production. You can always create feature request in our JIRA or vote for existing feature, like this one CAM-1472.

If you really want this done fast, you could also provide implementation in form of pull request or community extension.

Cheers,
Askar

1 Like
3

Hello,

Iā€™m new to camunda bpmn and the forum and this post seems the closest (maybe identical?) to what I would like to ask.

People at my company start using camunda modeler to create diagrams (but usage of the engine would be a long way to go stillā€¦). For documentation purposes Iā€™d like to convert the *.bpmn files of the modeler to *.svg automatically, ideally using some command line tool. The tool chain would look something like camunda modeler -> commit via git -> trigger svg generation via cli -> upload to wiki. If thereā€™s some cli, I could use, that would be great. Otherwise a pointer to the right place in the source would be appreciated.

Thanks in advance!
Malte

4

Hi @malte,

In the camunda modeler you can easily export a svg of your bpmn model? Does this not work for you?

BTW, I think, your question is not really related to origin post. The next time you should create a new forum post.

Cheers,
Roman

5

Hi Roman,
thanks for the answer! Next time, Iā€™ll create a new post :slight_smile:

For the time being: The svg-export in the modeler works just fine, but what I would like to do is take a .bpmn file as saved by the modeler and generate an svg file using some kind of shell script. Maybe I donā€™t know enough yet to do a smart search for what I need ā€“ I googled for cli options of the modeler or something similar.
Something like

$> camunda-modeler --svgexport --input some.bpmn --output some.svg

I guess, itā€™s not that easy, but worst case: itā€™s somewhere in the codeā€¦
So my emphasis would be on ā€˜automaticallyā€™ convert to svg. If that would be possible, I could setup a repo just for the bpmn files and all the boring conversion stuff and wiki update would happen somewhere else. The user wouldnā€™t need to create a new svg everytime they change the model (which still happens a lotā€¦).

Cheers,
Malte

1 Like
6

Iā€™m very interested by the subject, any solution ?

7

I think the only thing you can do right now is grab the BPMN.IO library and build yourself a custom solution. Youā€™d have find where it reads in the BPMN XML files and hook that into some sort of interface or command line tool. Iā€™d speculate that thereā€™s probably a rendering component in there that might do this.

8

Itā€™s very strange that there are not any solution to :
1 - AutoLayout automaticaly a BPMN file (rebuild the DI part)
2 - Convert a BPMN to a picture

I donā€™t want to give up ā€¦

9

I know that in the deprecated Camunda Eclipse plugin it automatically produces a png file. BPMN.IO must automatically render the BPMN, so this functionality is definitely buried in there somewhere.

As for automatic layout, Iā€™m not exactly sure what you mean. If you examine the XML associated with the process, you will see a section like the following:

  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
        <dc:Bounds x="173" y="102" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="IntermediateThrowEvent_0vbg2qs_di" bpmnElement="IntermediateThrowEvent_0vbg2qs">
        <dc:Bounds x="392" y="254" width="36" height="36" />
        <bpmndi:BPMNLabel>
          <dc:Bounds x="410" y="290" width="0" height="0" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>

Without this code, how would the display component know where to put each element. What is the ā€œrightā€ way to do that? Itā€™s rather arbitrary, though there are layout and routing algorithms out there, their efficacy is pretty subjective. What looks good to me may not look good to someone else. Moreover layout and routing is a fairly complex thing to do as there are an arbitrary number of elements in a process and thus you canā€™t predict the performance of your algorithm.

If youā€™re using Camunda Modeler, you can output the file in 3 different graphic formats. Because modeler uses BPMN.IO, the ability to do this dynamically is in there somewhere.

10

Is there any progress on the ā€œExport to ā€¦ā€ on command line?
Is there any issue in JIRA already to vote for?

If not: Can someone post any hints where this is done ā€œin the codeā€ allowing users to work on this feature?

11

I also an trying to generate a SVG file from a BPMN without having to use the modeler.

Iā€™m writing a NODE CLI application to extend documentation methods to a BPMN, it working pretty well except for the automatic SVG generation.

Iā€™ve posted a new request about this and think the answer may be embedded in the BPMN.JS library and the use of a headless browser. If i figure this out then writing a CLI command to do BPMN to SVG would be somewhat simple.

Have you gotten any other feedback on this request?

Thanks

12

Please do not create multiple posts for the same issue. Letā€™s keep the SVG discussion in a dedicated topic: Generate an SVG file from BPMN file

13

It is finally created by Beagler: