Creat diagram dynamically and assign possitions

Developers
1

Hello, I’m trying to create a BPMN Diagram using JSON data that I convert to XML but I’ve run into a problem and that is the position of the elements. I want the layout of the BPMN to be readable from the get-go and not modify the diagram myself.

When using BPMNShape two of the main parameters for are “x” and “y” which I haven’t defined in the JSON as I won’t pass always the same diagram. I would like to ask if there is some way to solve this within the library or any way this has been done before.

Thank you very much.

2

Hi,

you can try out GitHub - bpmn-io/bpmn-auto-layout: Layout BPMN diagrams, generating missing DI information. . It is a project that tries to automatically align your elements on the canvas.

You might need to do some manual layout later and won’t work for very complex examples, but it still might be useful

3

Thank you for your answer, yeah I found that exact extension not long after posting the first message but I run into a problem as I don’t know how to exactly install it.

I don’t know which .JS I have to import as the installation guide is not correctly explained

<script src="Script/Layouter.js"></script>

I tried doing a simple this but I think I’m not doing what is needed, could you give me a proper explanation on how to do it?

Sorry if this is a bit confusing

4

The library exports a ESM module, which you can either use directly in NodeJS or bundle in your Frontend application with a bundler, such as parcel.

As your use-case is quite complex, I would recommend to get accustomed to the JS ecosystem and how to build applications with npm modules so you can use libraries properly.

Cheers

1 Like