There is swimlane example in mxgraph but it is not automatic. So I took the graphlayout example as a basis instead and made few changes:

• Always use mxSwimlaneLayout
• Took swimlane cell style from the swimlanes example
• Created two swimlanes
• Used them as parents for the vertexes

Here's how I create swimlanes:

var lane1 = graph.insertVertex(parent, null, 'Lane 1', 0, 0, 1000, 100, 'swimlane');
var lane2 = graph.insertVertex(parent, null, 'Lane 2', 0, 100, 1000, 100, 'swimlane');
// use as parent...
var v1 = graph.insertVertex(lane1, null, 'A', 0, 0, w, h);

and execute the layout:

layout.orientation = mxConstants.DIRECTION_WEST;
layout.resizeParent = true;
layout.execute(parent, [lane1, lane2]);

Here's the test page.

Now, there are two problems here:

• Nodes are not being placed inside lanes; it seems that lanes are not respected at all. How do I make the layout to put nodes inside appropriate lanes? Setting lanes as parents seems to be not enough.
• I thought WEST would build graph to the left but it was the opposite... also NORTH goes down... why?

There is swimlane example in mxgraph but it is not automatic. So I took the graphlayout example as a basis instead and made few changes:

• Always use mxSwimlaneLayout
• Took swimlane cell style from the swimlanes example
• Created two swimlanes
• Used them as parents for the vertexes

Here's how I create swimlanes:

var lane1 = graph.insertVertex(parent, null, 'Lane 1', 0, 0, 1000, 100, 'swimlane');
var lane2 = graph.insertVertex(parent, null, 'Lane 2', 0, 100, 1000, 100, 'swimlane');
// use as parent...
var v1 = graph.insertVertex(lane1, null, 'A', 0, 0, w, h);

and execute the layout:

layout.orientation = mxConstants.DIRECTION_WEST;
layout.resizeParent = true;
layout.execute(parent, [lane1, lane2]);

Here's the test page.

Now, there are two problems here:

• Nodes are not being placed inside lanes; it seems that lanes are not respected at all. How do I make the layout to put nodes inside appropriate lanes? Setting lanes as parents seems to be not enough.
• I thought WEST would build graph to the left but it was the opposite... also NORTH goes down... why?

• javascript
• mxgraph

• I thought WEST would build graph to the left but it was the opposite... also NORTH goes down... why? Seems like it declares the starting point – Sagar V Commented Jun 12, 2017 at 7:27
• That makes sense. But unfortunately that's the least important one... – queen3 Commented Jun 13, 2017 at 11:24
• 1 Were you able to find answer for Q1? – Imran Commented Jul 24, 2019 at 15:35
• 1 Have you found a solution how to fix it? – Mindaugas Jaraminas Commented May 29, 2020 at 11:49
• 1 We used the dagre-d3 instead. – queen3 Commented May 29, 2020 at 15:07

2 Answers 2

Far from perfect, but somehow improvement:

Demo

I've added:

layout.execute(lane1, [v1,v2,v3,v4]);
layout.execute(lane2, [v5,v6,v7,v8]);

and changed resizeParent to false, looks like lanes are respected but still don't look pleasant.

I was also facing the same issue,I was able to solve it. In my code, to auto rearrange the graph I used mxSwimlanelayout:

var layout = new mxSwimlaneLayout(this.editor.graph,mxConstants.DIRECTION_WEST);
layout.execute(this.editor.graph.getDefaultParent(),this.editor.graph.getDefaultParent().children /*swimlanes*/);

Though the nodes (children of swimlanes) were arranging automatically, swimlanes were not being respected.(same as author) So I investigated through the library (mxClient.js). I made following changes:

mxSwimlaneLayout.prototype.resizeParent = true;
mxSwimlaneLayout.prototype.moveParent = true;

inside mxSwimlaneLayout.prototype.execute function: replaced this.graph.updateGroupBounds by this.updateGroupBounds

and inside mxSwimlaneLayout.prototype.updateGroupBounds function, replaced following block:

for (var i = 0; i < edge.edges.length; i++)
{
    cells.push(edge.edges[i]);
}

by:

for (key2 in edge)
{
    cells.push(edge[key2].edges[0]);
}

(inpatibility with data format)

Hope this helps. I don't fully understand how/why these changes work. Library authors might be able to help with that.