How to remove dots on connection lines that cause them to be bent?

I would like to remove the points (line breakers) the let users have non straight lines as illustrated below.

I would like only straight lines for connecting models. I have read @philippfromme 's answer to extend BpmnLayouter. through this I know it’s possible to reform the lines . But what I am trying to do is remove points that let user to create a diagonal line in the first place.

Also disabling bendpoint feature doesn’t solve the issue because it takes away the users ability to change the line altogether.
is there a way to achieve this?

So you want to allow creating straight lines only?

@philippfromme Yes, That’s what I am going for

Can you link to the answer you mentioned?

These are the links of the two answers I have mentioned in my question. I appreciate your assistance.

Right, so you need to do 2 things:

  1. Change the layout to always render straight lines
  2. Disable the bend points feature

Hi, I also need help in same scenario, I am trying to figure out for 4 days

I researched this problem a lot also. but wasn’t able to solve it. in the end our team decided to stop using bpmn-js and create our own solution. If you somehow find the solution please post it here. it may be useful for someone else.

I created an example that renders connections as straight lines: bpmn-js Simple Layout Example - CodeSandbox


Here’s what I did:

1. Change layout

That one was easy. I simply replaced the layout module with a simpler one that is part of diagram-js.

layouter: ["type", BaseLayouter]

2. Disable Segment Move

Disabling only parts of the bendpoints feature was tricky. We still want to be able to reconnect the start or end of a connection but not move segments or add bendpoints.

First I removed the UI:

.djs-segment-dragger {
  display: none !important;

Then I realized that the segment move feature cannot be disabled simply by overriding it with an empty module since other modules will try and use this module. So I replaced it with a module that does nothing:

connectionSegmentMove: ["value", { start() {} }],

3. Disable Bendpoint Move

This one was the hardest. The bendpoint move feature is currently implemented in a way that makes it hard to override methods. So I had to use a factory function that creates an instance of this module first and then overrides a method.

function createBendPointMove(
) {
  const bendpointMove = new BendpointMove(

  const start = bendpointMove.start.bind(bendpointMove);

  bendpointMove.start = (event, connection, bendpointIndex, insert) => {
    if (insert) {

    start(event, connection, bendpointIndex, insert);

  return bendpointMove;


bendpointMove: [

This way you can still reconnect the start or end of a connection but not add bendpoints.


All of your requirements can be implemented due to the flexibility of bpmn-js but sometimes it’s not as straight forward as it should be.

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.