Snap the arrow to the edge of node elements


I uploaded an existing bpmn file to the modeler. The arrows are shown behind the task node.

Screenshot-2018-3-5 opta ai

After moving the task node, the arrows snap to the edge of the task node like below.

Screenshot-2018-3-5-newopta ai

I hope someone can provide me some guidelines on how to make change to automatically snap the arrow to the edge of node elements.


HI @lhwong,

Could you reformulate your question? It’s not very clear what you want to achieve. Maybe sharing the file would help more illustrate your issue.



  1. Open the attached bpmn file at
    get-started.bpmn (10.0 KB)

You can see that the arrows point to the center of the task node and are behind of the of node element.

  1. Drag the task node and release it. You can see the arrows snap to the edge of the node.

I am wondering if I can programmatically trigger certain action/event so that all of the arrows automatically snap to the edge upon the modeler shows the diagram

Nick Wong


Hi @lhwong,

It’s possible possible to do so upon importing the diagram.

To illustrate how to achieve it, let’s take the following example:

Upon importing diagram, you can simply adjust the connections waypoints and fire the event ‘elements.changed’:

        bpmnModeler.importXML(bpmnXML, function(err) {
          var eventBus = bpmnModeler.get('eventBus');
          var connectionDocking = bpmnModeler.get('connectionDocking'); 
          var elementRegistry = bpmnModeler.get('elementRegistry');
          var connections = elementRegistry.filter(function(e) {
              return e.waypoints;
          connections.forEach(function(connection) {
            connection.waypoints = connectionDocking.getCroppedWaypoints(connection);

'elements.changed', { elements: connections });  
.         ...



Hi @siffogh,

Cool. It works. Thank you very much.

Nick Wong