DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

Last call! Secure your stack and shape the future! Help dev teams across the globe navigate their software supply chain security challenges.

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Releasing software shouldn't be stressful or risky. Learn how to leverage progressive delivery techniques to ensure safer deployments.

Avoid machine learning mistakes and boost model performance! Discover key ML patterns, anti-patterns, data strategies, and more.

Related

  • Top 5 JavaScript Libraries to Create an Organizational Chart
  • Must-Know Pros and Cons of JavaScript Diagram Editors
  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • How to Build Scalable Mobile Apps With React Native: A Step-by-Step Guide

Trending

  • Unlocking Data with Language: Real-World Applications of Text-to-SQL Interfaces
  • Comprehensive Guide to Property-Based Testing in Go: Principles and Implementation
  • Blue Skies Ahead: An AI Case Study on LLM Use for a Graph Theory Related Application
  • Medallion Architecture: Why You Need It and How To Implement It With ClickHouse
  1. DZone
  2. Data Engineering
  3. Data
  4. Swim Lane Diagrams in JavaScript

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.

By 
Daniel Jebaraj user avatar
Daniel Jebaraj
·
May. 17, 15 · Interview
Likes (0)
Comment
Save
Tweet
Share
6.8K Views

Join the DZone community and get the full member experience.

Join For Free

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.


Diagram JavaScript

Published at DZone with permission of Daniel Jebaraj. See the original article here.

Opinions expressed by DZone contributors are their own.

Related

  • Top 5 JavaScript Libraries to Create an Organizational Chart
  • Must-Know Pros and Cons of JavaScript Diagram Editors
  • The Cypress Edge: Next-Level Testing Strategies for React Developers
  • How to Build Scalable Mobile Apps With React Native: A Step-by-Step Guide

Partner Resources

×

Comments

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends: