🌾 UI/UX Workflow Design
Analyzing the libraries. Notes & Findings
🤞 What is this article for?
While I am in a need to provide a user interface to our customers for a customizable workflow design system through the browser, I started exploring multiple javascript libraries. I found a few of them are best and useful for this use-case. This article helps in identifying such of them, considering the below points.
🤞 Terminology
- Stencil → A component that can be dragged and dropped. A visual Icon/Image.
- Visual Elements: A stencil’s location on the screen. The co-ordinates where it is positioned, how many connectors it has, color representations.
- Data Elements: The custom defined attributes. Example: A stencil should be able to explain what the business functionality of the component.
🤞The 10+ gates and the Requirements
- Ease-of exporting the graph. Visual Elements vs Custom Data Separation.
- Embedding the custom metadata to retrieve and persist the graphs with its custom components.
- Ability in storing the visual positions and to restore the graph along with the associated data.
- Validations: Connection validity. Stencil to Stencil and custom connectors facility from source to target in a multidimensional fashion.
- Ease of Integration. Vue JS, Gatsby JS, React, and WebComponents.
- Printing, Redo & Undo, Keyboard Shortcuts, Zoom In/Out and Graph Cloning & ease of user experience with minimal clicks & basic Drag and Drop support and Adding Custom Icons & Graph promotion across environments.
- Ability in injecting the custom screens or modal dialogs.
- Clean separation from Visual to Business properties of each Stencil/Component.
- Dynamic Injection of Stencils/Components using dynamically generated JSON from backend Systems.
Though it is not an apple to apple comparison, Let’s take a look at several of these.
🍏 BPMN JS / Diagram.js
Having a modeling editor you can design the graph. Follows the BPMN standards. Build on Diagram JS. Well Tested by Camunda.
XML is the one, most developers don’t like that is being produced by this library to save and render the visual elements. Backend systems require to parse XML to process. Same as JSON. But XML? Your requirements are what it will drive. Encourages BPMN standards, which may not always suit your needs. Well integrated with Vue, Angular & React, and Web Components.
Coloring is supported:
It’s not that easy to add custom imaging/Icons. Palette is different than the canvas and requires SVG rendering. The designer needs to be careful to create the custom images that can be converted into SVG.
🍏 J-Flow
Very few examples out there. Requires third-party libraries support to add drag and drop and per the things to consider from above. You will soon realize the pain of integrations and can frustrate you quickly.
🍏 Cytoscape-popper
Per their descriptions: Cytoscape supports many use cases in molecular and systems biology, genomics, and proteomics. Not very well suited for Workflow design.
🍏 Rappid JS:
The confusion starts with Branding. Joint JS & Rappid JS. Very Powerful and really useful for Workflow Systems. I used this in an enterprise-level project and played out very well. Lack of integration with modern technologies with examples. Ended up spending quite a bit time integrating into my Vue JS Application. We do have the full control on connectors and connector validations. Clean separation with Visual and Data elements. JSON based. NPM library is not active.
🍏 JSPlumb:
This is a nice tool. Evolving! Simple examples out there with React, Angular & Vue. Not enough examples though. Application engineers will not just look for its core functionality. They look for additional support like adding new components in between the connections etc, without doing programming and to play around.
🍏 MxGraph :
A production-grade system is readily available: Draw.io. Note that you need to do a lot of work and a huge team to do what you see inside Draw.io.
NPM is active, unlike others. Requires heavy customization for your needs.
🍏 GoJS :
One of the best that has a bunch of examples from one place. These guys did a great job in the documentation and providing the samples. For workflow systems, as the users drag and drop and choosing a component, we need to provide an option to fill the data elements associated with the component chosen. We need to build this by ourselves, whereas RappidJS is proving that out of the box. Otherwise, this should have been a great option too, to consider. Custom connector breaking and Connector validations will be a heavy lift.
🍏 Mermaid.js
It’s totally a different library and might not be suitable for your editor to draw the diagrams. But, it has a unique feature to generate the diagrams from “.md” or “markdown” files. This is really a great feature which we should know about. There will be times being a JS/UI Developer/Architect, you should use this for quick static diagram generations.
🍏 Fabric.js
It provides an interactive object model on top of the canvas element. Not really a great fit from Workflow system design.
🍏 Paper.js
Do you want to play with Curves inside your application diagrams? This open-source library is a great fit for it. Focused on vector graphics scripting framework that runs on top of the HTML5 Canvas. This will not fit for our use case as specified above.
🍏 Dagre:
Dagre had great integration with D3. It renders the diagrams similar like Mermaid JS, code through JS. Used to layout the directed graphs. Not a great fit for our use-cases as mentioned with the gates and its build is in error mode for a while.
Special Thanks to Ramakrishna Vankeswaram for reviewing , comments and Guidelines.
Find other articles on my publication: ThinkSpecial
