4

I am looking for algorithms/libraries, that help me layout process charts in swim lane format.

Example:

The process of making and selling shoes could look like this (strongly simplified):

  • Leather company delivers leather
  • shoemaker creates shoes from the leather
  • Shoe retailer sells shoes

In this case, I want this to be displayed in swimlane format, that is each role (leather company, shoemaker, shoe retailer) has a swim lane. On each swim lane the corresponding process steps will be displayed. This is very similar to the UML activity diagrams.

Are there libraries that are capable of doing this? I've taken a look at d3.js, but I am not sure if automatic layouting is something they are capable of.

Or if there aren't any libraries for this specific purpose, are there state-of-the-art algorithms (there probably are, but I haven't found them yet) that I could use in this case?

Willi Mentzel
  • 27,862
  • 20
  • 113
  • 121
Lukas Hestermeyer
  • 830
  • 1
  • 7
  • 19
  • Welcome to SO. Unfortunately your question is off-topic. SO is not a LMGTFY. Come back when you have an algorithm and ran into problems using it. – qwerty_so Aug 19 '15 at 15:32
  • Look for `Business Process Model and Notation (BPMN)` diagramming libraries as `bpmn` uses swimmlanes heavily – xmojmr Aug 19 '15 at 15:42
  • See also [Stack Overflow: Graph visualization library in JavaScript](http://stackoverflow.com/questions/7034/graph-visualization-library-in-javascript) – xmojmr Aug 19 '15 at 15:45

1 Answers1

3

If you are asking for an algorithm to implement, I suggest taking a look at the Sugiyama algorithm for drawing directed graphs. In order to support a feature like swimlanes, the algorithm needs to be extended in the following way:

If your graphs main flow is in the same direction that the swim lanes are pointing than you need to constrain your nodes during the sequencing phase so that they are ordered in the same manner for each layer according to the same order as the swim lanes. If your swim lanes are orthogonal to the flow you need to influence and constrain the layering phase in the same way. Both concepts can be combined to work together at the same time so 2D grids of swimlane columns and rows can be implemented. You also need to adjust the final node coordinate assignment stage of the algorithm to align the ordered nodes according to the swimlane borders.

This is highly non-trivial and there aren't many good implementations for this available. I am not aware of a free implementation for d3js that can do this.

The company that I work for (which I do not represent here) has a commercial library that provides this capabilities. See this live example:

Screenshot of yFiles for HTML Demo application showing swimlanes

Sebastian
  • 7,729
  • 2
  • 37
  • 69
  • mxGraph can produce swimlane diagram as shown in the picture. I just need to do fine-grained things so the final result will meet my expectation. Its API is quite large that it is only down to developer skills and creativity to leverage its maximum potential for creating various kinds of nice looking diagrams. I am still learning its API, though. – Lex Soft Jul 12 '20 at 02:30