Prettier BPMN Diagram?

Developers
1

Hello, people !
I’m trying to include the BpmnJS in my Angular application. I generate the xml file by using flowable java library and autolayout. Now the BPMN diagram is this:

Screenshot 2022-11-09 at 15.12.25
Screenshot 2022-11-09 at 15.12.252168×842 111 KB

Is there any way to make the diagram prettier without touch the xml ? For example the text above the sequential flow to not stayed on the other text…
Thank you.

2

What kind of layout algorithm is this? Not very helpful. The topic of creating layouts automatically isn’t a trivial one. I’m not aware if any out-of-the-box solution currently.

1 Like
3

In java I built org.flowable.bpmn.model.BpmnModel and after that I used org.flowable.bpmn.converter.BpmnXMLConverter#convertToXML method. Finally I do this:

BpmnAutoLayout autoLayout = new BpmnAutoLayout(bpmnModel);
autoLayout.execute();

BpmnAutoLayout from import org.flowable.bpmn.BpmnAutoLayout;

1 Like
4

Looking at the results, this auto-layout feature doesn’t seem to be very useful.

1 Like
5

Will i be able to fix it with overlays from the library ?

6

Will i be able to fix it with overlays from the library ?

Automatic layouting is not possible, but you can use a manual approach and bpmn-js layouting tools to make your life easier:

Recording 2022-11-11 at 09.24.33

2 Likes
7

Thank you, I think that this will help me, but can I make this into the code - is there any plugin or provider that will do this automatically ?

8

There is an old project created by a former colleague: GitHub - bpmn-io/bpmn-auto-layout: Layout BPMN diagrams, generating missing DI information. Unfortunately this project isn’t maintained and quite limited in its functionality.

1 Like