Making task boxes wider and adjusting horizontal spacing

Hi, I use bpmn-js to display diagrams. For readability purposes, I would like to make the displayed task boxes wider before showing the diagram. I used a custom renderer to achieve that. The problem is, that after resizing the boxes I have to resize the connections and increase spacing between the diagram objects as well. This needs to be done to avoid overlapping edges and rectangles. Is there any way to do that, without resorting to rerunning position and size calculations for each diagram element? I’m attaching “before” and “after scaling” screenshots to illustrate the problem. Any help would be appreciated :slight_smile:
The original diagram:
original
After scaling, needs readjusting and rearranging:
scaled

Hi valuedings,

I’m not sure I understand this bit : Is there any way to do that, without resorting to rerunning position and size calculations for each diagram element?
How else would you be able to rearrange the sequence flows after resizing the activities?

In any case, I think you might find this helpful, if I understood your problem correctly : Create or Align Waypoints Automatically - #2 by philippfromme

Hi azeghers,
Thank you for the reply. I’ve been thinking about some kind of “stretch” or “autoarrange” functionality I found in other diagramming tools. Thank you for the provided link. I have tried it out, but it solves only one part of the problem. The other one would be increasing horizontal spacing between the elements. Do you have any suggestions about the best way to approach it?