Layered layout for swimlanes

[khoshrou]

Hi
Is it possible to use ELKJS to layout a swimlane diagram?
lanes are not moving or resizing, but have a clear rectangular boundaries
and have normal nodes as children and edges that can start from a node in a lane and finish at a node in another lane
like a simple BPMN lanes.
If yes please let me know how to create a graph for it

[uruuru]

Not easily, I feel. It may work but will require considerable tweaking.

The main problem is to keep nodes within the area of their lane:

• You could model the lanes as hierarchical nodes but will probably have trouble to achieve visually pleasing cross-lane edges.
• Not including the lanes in the layout graph solves the problem with the edges but will (as one would expect) likely mix nodes of different lanes.

[khoshrou]

You could model the lanes as hierarchical nodes but will probably have trouble to achieve visually pleasing cross-lane edges.

that could do the job for now I think. How can I tell ELK that "these are lanes and don't touch them"?
is there any graph sample you can give?

[khoshrou]

Hi
I used partions to seperate swimlanes. the only problem I have is to do another direction (DOWN) for swimlane itself.
Is it possible to use different directions for hierarchy nodes? I use RIGHT direction for the root graph and I need DOWN for swimlanes.
lane 4 here should have a DOWN direction ,I set it in the layout options but it does not work

[caravinden]

@khoshrou @uruuru Example for vertical and horizontal swimlanes would be really helpful

[khoshrou]

I have done this with partitions, as you can see, its kind of mimicking a swim lane, its not. and you cant change direction for each partition,
I actually drawing lanes after getting elk partition data

[caravinden]

@khoshrou I am working to create bpmn diagram using elkjs and d3. I can able to cover up say 70% of the diagram. Few area still i couldn't able to explore fully.

1. Creating Vertical and Horizontal arrangement of swimlanes.
2. Tried with position option in order to accomplish horizontal ordering (no luck yet).

How can i arrange node in row * column metrics?
Below are my sample configuration:-

`{
id: "root",
layoutOptions: {
'elk.algorithm': 'layered',
'elk.layered.feedbackEdges': true,
'elk.hierarchyHandling': 'SEPARATE_CHILDREN',
'elk.alignment': 'RIGHT',
"elk.direction": "RIGHT",
'elk.aspectRatio': 50 ,
'elk.edgeRouting': 'ORTHOGONAL',
"elk.layered.nodePlacement.bk.fixedAlignment":"BALANCED",
'elk.spacing.edgeNode':60,
'elk.spacing.nodeNode': 50,
'partitioning.activate': true,
'nodeFlexibility':'NODE_SIZE',
'elk.graphviz.overlapMode':'SCALE',
//'elk.layered.crossingMinimization.semiInteractive': true,
'layering.strategy': 'INTERACTIVE', //INTERACTIVE, COFFMAN_GRAHAM
'coffmanGraham.layerBound':1,
//'crossingMinimization.strategy':'INTERACTIVE'
},
children: [
{ id: "n1", r: 10, type: "start", layoutOptions: {'partitioning.partition': 0, "position":"(50.0, 50.0)"} },
{ id: "n2", width: 80, height: 50, type: "activity", label:"Order Request", layoutOptions: {'partitioning.partition': 1, "position":"(70, 50.0)"} },
{ id: "n3", width: 30, height: 30, type: "gateway", label:"G1", "ports": [
{"id": "P1", width: 5, height: 5, "properties": {
"port.side": "NORTH",
"port.index": "1",
'allowNonFlowPortsToSwitchSides': true
},
},
{"id": "P2", width: 5, height: 5,"properties": {
"port.side": "EAST",
"port.index": "2",
'allowNonFlowPortsToSwitchSides': true
},
},
{"id": "P3", width: 5, height: 5,"properties": {
"port.side": "SOUTH",
"port.index": "3",
'allowNonFlowPortsToSwitchSides': true
}, },
{"id": "P4", width: 5, height: 5 ,"properties": {
"port.side": "WEST",
"port.index": "4",
'allowNonFlowPortsToSwitchSides': true
},}
],
"properties": {
"portConstraints": "FIXED_ORDER",
"portAlignment": "CENTER"
},
},
{ id: "n4", width: 100, height: 50, type: "activity", label:"Order Confirmation", layoutOptions: {'partitioning.partition': 3, "position":"(100.0, 50.0)"} },
{ id: "n5", width: 80, height: 50, type: "activity", label:"Order Rejection" , "ports": [
{"id": "P13", width: 5, height: 5, "properties": {
"port.side": "NORTH",
"port.index": "1",
},
},
{"id": "P14", width: 5, height: 5,"properties": {
"port.side": "SOUTH",
"port.index": "1",
},
},
{"id": "P15", width: 5, height: 5,"properties": {
"port.side": "EAST",
"port.index": "1",
}, },
{"id": "P16", width: 1, height: 1 ,"properties": {
"port.side": "WEST",
"port.index": "3",
},}
],
"properties": {
"portConstraints": "FIXED_ORDER",
"portAlignment": "CENTER"
}},
{ id: "n6", width: 80, height: 50, type: "activity", label:"Procure Parts", layoutOptions: {'partitioning.partition': 4, "position":"(260.0, 50.0)" } },
{ id: "n7", width: 80, height: 50, type: "activity", label:"Delivar Order ",layoutOptions: {'partitioning.partition': 4, "position":"(130.0, 50.0)" } },
{ id: "n8", width: 30, height: 30, type: "gateway", label:"G2", "ports": [
{"id": "P5", width: 4, height: 4, "properties": {
"port.side": "NORTH",
"port.index": "1",
},
},
{"id": "P6", width: 4, height: 4,"properties": {
"port.side": "SOUTH",
"port.index": "2",
},
},
{"id": "P7", width: 4, height: 4,"properties": {
"port.side": "EAST",
"port.index": "3",
}, },
{"id": "P8", width: 4, height: 4 ,"properties": {
"port.side": "WEST",
"port.index": "4",
},}
],
"properties": {
"portConstraints": "FIXED_ORDER",
"portAlignment": "CENTER"
}, },
{ id: "n9", width: 80, height: 50, type: "activity", label:"Part Auction", layoutOptions: {'partitioning.partition': 5} },
{ id: "n11", width: 10, height: 10, type: "activity",layoutOptions: {'partitioning.partition': 4} },
{ id: "n12", width: 30, height: 30, type: "gateway", label:"G3", "ports": [
{"id": "P9", width: 5, height: 5, "properties": {
"port.side": "NORTH",
"port.index": "1",
},
},
{"id": "P10", width: 5, height: 5,"properties": {
"port.side": "SOUTH",
"port.index": "2",
},
},
{"id": "P11", width: 5, height: 5,"properties": {
"port.side": "EAST",
"port.index": "3",
}, },
{"id": "P12", width: 5, height: 5 ,"properties": {
"port.side": "WEST",
"port.index": "4",
},}
],
"properties": {
"portConstraints": "FIXED_SIDE",
"portAlignment": "CENTER"
},},
{ id: "n13", width: 10, height: 10, type: "activity", layoutOptions: {'partitioning.partition': 5}, },
{ id: "n10", r: 10, type: "end", layoutOptions: {'partitioning.partition': 6} }
],
edges: [
{ id: "e1", sources: [ "n1" ], targets: [ "n2" ] },
{ id: "e2", sources: [ "n2" ], targets: [ "P4" ] },

  //{ id: "e3", sources: [ "n3" ], targets: [ "P1" ] },
  { id: "e15", sources: [ "P1" ], targets: [ "n4" ] },
  //{ id: "e4", sources: [ "n3" ], targets: [ "P2" ] },
  { id: "e16", sources: [ "P2" ], targets: [ "P16" ] },
  //{ id: "e5", sources: [ "n3" ], targets: [ "P3" ] },
  { id: "e17", sources: [ "P3" ], targets: [ "n6" ] },

  { id: "e6", sources: [ "n4" ], targets: [ "n7" ] },
  { id: "e7", sources: [ "n7" ], targets: [ "n10" ] },
  { id: "e8", sources: [ "n5" ], targets: [ "n10" ] },

  { id: "e9", sources: [ "n6" ], targets: [ "P8" ] },
  { id: "e10", sources: [ "P5" ], targets: [ "n9" ] },
  { id: "e11", sources: [ "P6" ], targets: [ "n11" ] },
  // { id: "e10", sources: [ "n8" ], targets: [ "n9" ] },
  // { id: "e11", sources: [ "n8" ], targets: [ "n11" ] },

  { id: "e12", sources: [ "n9" ], targets: [ "P9" ] },
  { id: "e13", sources: [ "P10" ], targets: [ "P16" ] },
  { id: "e14", sources: [ "P11" ], targets: [ "n13" ] },
  { id: "e15", sources: [ "n6" ], targets: [ "n7" ] }

]

}`

[khoshrou]

These features are not supported in elkjs, as I said, I somehow mimic lanes with the concept of PARTITIONS which are elkjs feature.
in fact I am grouping lane activities in partitions and then draw lane lines on partion borders
at the end you cant change DIRECTION for lane activities (best I know) which is essential to have vertical lanes (Look at image I uploaded up)
Look at elkjs samples for partion, and remeber upgrade to latest version coz 6.x not working correctly

[khoshrou]

@uruuru This feature is the most needed on in business as I see its need every where. BPMS diagrams, Workflows, Activity Diagrams. All are needed in every aspect of an organization. If you give us these two features we can go for millions of use cases:

1. Swimlanes
2. Edge routing (without positioning nodes)

[uruuru]

There's an open feature request for standalone edge routing eclipse/elk/issues/315. The feature is being worked on but I cannot give an ETA or guarantees.

Feel free to raise another feature request regarding swimlanes. However, as I stated above I don't see an obvious way to incorporate this into the current internal structure of elk layered and neither see anyone from the core team to work on this topic in the future. Contributions from the community are always welcome, though.