Creating swimlanes

Swimlanes are a special type of subgraph used to divide a graph into vertical or horizontal stripes. Swimlanes are often used in business process or workflow diagrams to represent organizations or participants in a process.
To create swimlanes:
  • Use the graph.createSwimLane() function.
    The following example shows how to create swimlanes:
    var swimlane1 = graph.createSwimLane();
          swimlane1.setLabel("Swim lane 1");
          swimlane1.move(40, 40);
          swimlane1.setExplicitSize({width:600, height:100});
          
          var node1 = swimlane1.getGraph().createNode();
          node1.setLabel("Node 1");
          node1.move(30, 30);
          
          var node2 = swimlane1.getGraph().createNode();
          node2.setLabel("Node 2");
          node2.move(160, 30);
          
          var link1 = swimlane1.getGraph().createLink();
          link1.setStartNode(node1);
          link1.setEndNode(node2);
    
           var swimlane2 = graph.createSwimLane();
          swimlane2.setLabel("Swim lane 2");
          swimlane2.move(40, 180);
          swimlane2.setExplicitSize({width:600, height:100});
          
          var node3 = swimlane2.getGraph().createNode();
          node3.setLabel("Node 3");
          node3.move(330, 30);
          
          var node4 = swimlane2.getGraph().createNode();
          node4.setLabel("Node 4");
          node4.move(460, 30);
          
          var link2 = swimlane2.getGraph().createLink();
          link2.setStartNode(node3);
          link2.setEndNode(node4);
    
          var link3 = graph.createLink();
          link3.setStartNode(node2);
          link3.setEndNode(node3);
          link3.setShapeType(ibm_ilog.diagram.LinkShapeType.Orthogonal);
The resulting graph looks as follows:
A graph
showing two horizontal swimlanes, Swimlane 1 and Swimlane 2. Swimlane
1 contains two rectangular nodes, Node 1 and Node 2, connected by
a link. Swimlane 2 contains two rectangular nodes, Node 3 and Node
4, connected by a link. A link also connects Node 2 in Swimlane 1
to Node 3 in Swimlane 2.
Swim lanes are similar to subgraphs, with the following differences:
  • Swim lanes can be horizontal or vertical:
    • The title of a horizontal swimlane is displayed vertically, on the left (as in the previous example) or on the right. To display the title on the right, use the following method:
      swimlane.setRightToLeft(true); 
    • The title of a vertical swimlane is always displayed horizontally, at the top. To create a vertical swimlane, use the following method:
      swimlane.setVertical(true); 
  • swimlanes do not adapt their size automatically to their children. Instead, the size of a swimlane must be set explicitly by using the following method:
    swimlane.setExplicitSize({width:w, height:h});
  • Because swimlanes do not adapt to their contents, you cannot interactively move nodes outside of the bounds of their parent swimlane.
  • swimlanes can contain other swimlanes. In this case, nested swimlanes are automatically stacked in the parent lane. Nested lanes are stacked vertically if the parent lane is horizontal, and horizontally if the parent lane is vertical. To disable the automatic stacking, use the following method:
    swimlane.setStackSublanes(false);
  • When swimlanes are contained in a graph attached to a hierarchical graph layout algorithm, IBM® ILOG® Dojo Diagrammer automatically sets up the layout to take swimlanes into account (see Hierarchical Layout (HL)).