I’m not trying to be rude. I want to get the developers point of view on why bpmn-js doesn’t implement any auto layouting feature (as far as I know) and why bpmn-auto-layout library is not maintained anymore. It feels like it should be a core feature to be able to implement a button that reorders your diagram.
Below I have attached a result of using bpmn-auto-layout library which unfortunately needs altering of one line in the source file to get it working.
You have a fair point regarding why we don’t fix a single line of code to get bpmn-auto-layout working. Did you consider filing a PR + updating the library to work with the latest version of bpmn-js? We’ll very likely merge that one and you + some others will be very happy.
Generally speaking automatic layout won’t be part of the core (bpmn-js) for may different reasons, specially though because we do not believe in auto-layout as a generally applicable solution to build readable diagrams.
It has its place in an extension though; I dig that.
To understand your need for auto-layout: How do you end up with diagrams like the first one you’ve shown? Automatic generation? Export from non-bpmn-compliant tool? That context helps us to better understand how we could help.
2 Likes
Yes, but I never did something like this. I might read about contributing on github and actually do it.
We have data structure representing a tree. It has info about nodes and connections. No info about relative positions. We want to render those trees using bpmn-js. We want to be able to modify them so we use modeler and not viewer. For now we consider two options:
- Generating xml string based on the structure of exported example bpmn diagram. In this approach we would not generate
<bpmndi:BPMNDiagram id="BPMNDiagram_1">tag which contains shape positions. Haven’t tried that yet. As far as I know the bpmn-auto-layout would generate this tag along with shapes positions for us. - Using bpmn-js modeling API to create this diagram for example:
modeling.createShape(startEvent, { x: 400, y: 100 }, process);. In this approach we create all shapes at exact same position(400, 100).
Both approaches need reordering after creating the tree.
Is the data structure related to BPMN?
1 Like
No. We only need 4 shapes shown on the image: Start Event, End Event, Task and Exclusive gateway.
In that case, I’d argue that using bpmn-js for something that isn’t BPMN isn’t a good idea. You could use diagram-js instead which is the toolkit bpmn-js is built on top of. diagram-js is a generic diagram toolkit that you could use to implement your domain-specific diagram viewer/modeler.
1 Like
Thanks, that helps me to better understand your use-case.
If you believe BPMN is the right choice for you and bpmn-auto-layouter helps you, please consider contributing to improve the tool. We are happy to help in the process.
1 Like