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

Download “The DevOps Journey - From Waterfall to Continuous Delivery” to learn learn about the importance of integrating automated testing into the DevOps workflow, brought to you in partnership with Sauce Labs.

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.


Discover how to optimize your DevOps workflows with our cloud-based automated testing infrastructure, brought to you in partnership with Sauce Labs

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 }}