Over a million developers have joined DZone.

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

The DevOps zone is brought to you in partnership with Sonatype Nexus. The Nexus suite helps scale your DevOps delivery with continuous component intelligence integrated into development tools, including Eclipse, IntelliJ, Jenkins, Bamboo, SonarQube and more. Schedule a demo today

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.


The DevOps zone is brought to you in partnership with Sonatype Nexus. Use the Nexus Suite to automate your software supply chain and ensure you're using the highest quality open source components at every step of the development lifecycle. Get Nexus today

Topics:
architects ,devops ,javascript

Published at DZone with permission of Jennifer Wright. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}