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?
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: