How to create direct lines of sequenceFlow by default when connecting elements? BPMN diagram

Hello,

I have requirements that for connected elements in a BPMN diagram, sequenceFlow lines should be diagonal, instead of bent at 90 degrees.

Instead of this:

image

to be like this

image

Right now you can obtain this by dragging on the bendpoints, but I’d like to be a default, when connecting shapes.

I’ve read the answers from here Disable Connection Layouting / Direct Lines
but I don’t exactly understand how to do it.
I don’t know where exactly to import these modules from:

 bendpoints: [ 'value', {} ],
    bendpointMove: [ 'value', {} ],
    connectionSegmentMove: [ 'value', {} ],
    bendpointSnapping: [ 'value', {} ]

Is there an example on how to achieve this?

Thanks!

Hi,

The purpose of this fragment of code is to disable the bendpoints feature, i.e. to make it impossible to change connection’s shape. It does not transform the connections into straight lines.

@philippfromme pointed out in Disable Connection Layouting / Direct Lines - #2 by philippfromme that you need to override the BpmnLayouter’s code in order to have straight lines only.

In order to create a bpmn-js extension, you can have a look at the custom controls example.

For further assistance, please share a CodeSandbox which shows what you have achieved so far and where you are possibly stuck.

Thank you for the answer, it’s more clear now.

1 Like

why can’t I work, is that const bpmnModeler = new BpmnModeler({ container: containerEl, additionalModules: [ { bendpoints: ["value", {}], bendpointMove: ["value", {}], connectionSegmentMove: ["value", {}], bendpointSnapping: ["value", {}], }, ], });

Please do not necrobump old topics. Instead link to this thread from new topic.