1

I'm looking to create a flowchart with swimlanes. Based on everything I'm seeing, this doesn't seem like D3 is a good option for creating something like the image below: Swimlanes + Force Diagram

Others have had similar issues, Can I create a flow chart (no tree chart) using D3.js

I was wondering if it would be possible to LAYER 2 D3 charts on top of one another, and basically through some trickery make rows and nodes appear/disappear. I know that there's a way to make the force layout static. Or, if this seems too complicated for D3 to handle alone, of there was an open source library that would get me closer.

Other libraries (that you have to pay for) accomplish what I would like: https://www.yworks.com/ https://gojs.net/latest/index.html

But I would like use an open-source library, if possible.

KateJean
  • 428
  • 5
  • 17
  • Well, using a combination of Dagre(https://github.com/dagrejs/dagre), Dagre-D3, and Cytoscape, I think I can probably accomplish this. At least I can easily fix the single child for multiple parent issue: https://jsfiddle.net/KateJean/xweudjvm/ – KateJean Aug 29 '18 at 22:10
  • I don't think you can use dagre to achieve this kind of edge routing (with the forks and single join points) - you might be able to achieve the given swimlanes - since in your case these are horizontal lanes that directly translate to "ranks" in dagre. Vertical lanes would not be supported by dagre, as far as I know. I am not aware of any open-source implementation for JavaScript that can do all of this. – Sebastian Aug 30 '18 at 07:59
  • Probably KlayJS is as good as it gets: http://openkieler.github.io/klayjs-d3/examples/miserables/ - still a lot left to do... – Sebastian Aug 30 '18 at 08:02

2 Answers2

1

U could use https://github.com/bpmn-io/diagram-js/blob/master/README.md

There are a built on top of d3.js

Diaskhan
  • 11
  • 2
1

Try mxGraph, it's free. It can produce swimlane diagram as shown in your picture. 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. One example is provided here : swimlane example

Lex Soft
  • 2,308
  • 2
  • 13
  • 13
  • This is a good library to use if you already have coordinates for your vertices and edges. However if you are reading nodes from a database, and trying to dynamically layout, The mxSwimlaneLayout still does not properly arrange items. Unlike Cytoscape there is no way to apply a layout to a subset of vertices within a swimlane. – Vishnoo Rath Jul 24 '20 at 19:24
  • @Vishnoo Actually I am still evaluating the library, trying from its examples, looking through features it provides that potentially meet my requirements. Sure, the lanes and nodes will be populated from database, but I don't get to that stage yet, due to other tasks. Cytoscape drew my attention too, but as far as I have seen, it doesn't have built in swimlane diagram that I need. However, it can be an option for other types of diagram. – Lex Soft Jul 25 '20 at 08:52
  • What I meant was that Cytoscape gives the ability to apply a specific layout to a group of nodes. mxGraph applies a single layout to all the nodes. many folks have issues with the mxSwimlaneLayout when trying to arrange the nodes by applying a layout – Vishnoo Rath Jul 26 '20 at 09:21
  • I was referring to this https://stackoverflow.com/questions/44330233/automatic-swimlane-layout-in-mxgraph @Lex – Vishnoo Rath Jul 26 '20 at 09:25
  • @Vishnoo Yesterday, I got started with Cytoscape, reading its documentation and trying a simple diagram. It seems that it gives flexibility for us to do what we want. However, it is eventually down to developer skills and creativity when they need to create specific types of diagram, including swimlane. As for me, it will take time to create a swimlane diagram similar to what I did with mxGraph. I am going to dig deeper on Cytoscape. – Lex Soft Jul 27 '20 at 01:51
  • @Vishnoo Thanks for the SO link on mxGraph swimlane issue. Btw, have you got an example on how you create a swimlane using Cytoscape ? I can draw nodes and edges on respective rows representing lanes, but in what I imagine, it will need some tweak to draw shapes on the left side of the diagram. It seems that I need a mix of html elements, CSS to achieve my goal ? – Lex Soft Jul 27 '20 at 02:02
  • I am currently doing the same. Drawing custom shapes ... will post in a day or two. Caught up with release issues for the time being – Vishnoo Rath Jul 27 '20 at 08:02
  • @Vishnoo I conceived the same idea, i.e using custom shapes, although I didn't execute it yet. So, you don't have to give an example I asked previously. Let me figure it out myself. :) When I am successful with it, I will probably share my gist some day. Thanks for sharing opinion here. – Lex Soft Jul 28 '20 at 02:42
  • @LexSoft @Vishnoo - were you able to manage to move forward with `Cytoscape`? – Varun Jul 20 '23 at 05:44