Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Swim Lane Diagrams in JavaScript

DZone's Guide to

Swim Lane Diagrams in JavaScript

Learn about swim-lane diagrams to connect business processes and departments and apply the concept to the object-oriented world of javascript.

· DevOps Zone ·
Free Resource

Do you need to strengthen the security of the mobile apps you build? Discover more than 50 secure mobile development coding practices to make your apps more secure.

Written by Jegan Ravichandran for Syncfusion.

Swim-lane diagrams are typically used to visualize a relationship between a business process and the department responsible for it by focusing on the logical relationships between activities. Swim lanes may be arranged either horizontally or vertically. In this blog, we’ll review how to create a swim-lane diagram by using the Syncfusion Diagram control for JavaScript

Creating a Swim Lane
Creating a swim lane is as simple as adding a node with some nested properties. Just add an object in the node’s collection with the type as swimlane and specify its name, orientation, size, and position. The swim lane cannot be blank; therefore, lanes and phases have to be added.

var swimlane = {
      // Type is used to identify which kind of node is added in the model.
      // Name is used as a unique identifier of the object.
      type: "swimlane",
      name: "swimlaneNode",
      // Orientation is used to set the orientation.
      orientation: "horizontal",
      // These specify the swim lane’s dimensions.
      offsetX: 400,
      offsetY: 200,
      height: 100,
      width: 700,
}

Adding Lanes
Any number of lanes can be added by using the lanes collection, as shown in the following code. To visualize the lanes, each lane’s size and color have to be specified.  

var swimlane = {
      type: "swimlane",
      //...

      // Adds lanes by using the lanes collection.
      lanes: [
      {
            name: "lane1",
            fillColor: "#f5f5f5",
            height: 120
      }
      ]
}

Adding Phases
Any number of phases can be added by using the phases collection, as shown in the following code. Offset is used to define the phase’s distance from the left side of the lane or from the previous phase.

var swimlane = {
      type: "swimlane",
      //...

      // Adds phases by using the phases collection.
      phases: [
      {
            name: "phase1",
            offset: 300,
      }
      ]
}

Specifying headers
By using the header property, headers can be added to lanes and phases of the swim lane.

var swimlane = {
      type: "swimlane",
      name: "swimlaneNode",
      orientation: "horizontal",
      offsetX: 400,
      offsetY: 200,
      height: 100,
      width: 700,

      //Initializes swim-lane header.
      header: {
            text: "Swimlane",
            height: 50,
            fillColor: "#C7D4DF",
            fontSize: 11
      },

      lanes: [
             {
                  name: "lane1",
                  fillColor: "#f5f5f5",  
                  height: 120,

                  //Initializes lane header.

                  header: {
                        text: "Lane",
                        width: 50,
                        fillColor: "#C7D4DF",
                        fontSize: 11
                  }
            }
      ],
      phases: [
              {
                  name: "Phase1",
                  offset: 300,
                  //Initializes labels for phases.
                  label: { text: "Phase1" }
            }
            {
                  name: "Phase2",
                  label: { text: "Phase2" }
            }
      ]
}

The following screenshot is the swim lane generated from the example code.


clip_image001


Generated Swim Lane

Adding Nodes into the Lane
Now that the overall swim-lane skeleton is ready, add a node into the lane programmatically.

var swimlane = {
   type: "swimlane",
      //...
      lanes: [
             {
                  //... 
                  // Adds a node into a lane.
                  children: [
                        {
                              name: "node1",
                              labels: [{ text: "Node", fontSize: 11 }],
                              marginLeft: 70,
                              marginTop: 1,
                        },
                  ],
            }
   ]
}

After adding a node into a lane, the swim lane will display as follows.


clip_image002


Swim Lane with a Node

Nodes can also be added into the lanes interactively by dropping nodes onto the palette. Connectors can be added to the connector’s property of the model.


Check out tips for blazing the way from agile to DevSecOps with security built into your mobile app toolchain.

Topics:
architects ,devops ,javascript

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}