Use swimlanes in flowchart diagram

[marcpre]

I would like to create a flowchart, which has swimlanes.

Find below an example.

After reading the documentation I couldn`t find this functionality. I found this issue #551, which was automatically closed.

Any suggestions how to integrate this feature or add it to mermaid if it does not exist?

I appreciate your replies!

[rstockm]

That would be awesome, given that no framework used by CodiMD/HedeDoc offers swimlanes.

[rognales]

That would mermaidjs as perfect diagram-as-a-code

[jeffdoolittle]

Any traction on this? Seems like a perfect fit for the project.

[eshafoshaf]

Up vote!

[itsthejoker]

This basically the only type of diagram I make and was the first thing I looked for with the github announcement. +1 from me.

[initdotd]

+1 and both vertical and horizontal lanes would be incredible!

[napei]

You can possibly achieve a halfway solution with subgraphs https://mermaid-js.github.io/mermaid/#/flowchart?id=subgraphs
Definitely a feature worth having, +1.

[gicellamare]

+1

[LeDuble]

+1

[iot-crazy]

Searching for this feature brought me straight here, so +1 from me too!

[brightblueray]

+1

[bytesex]

+1

[gledsoneduardo]

+1

[cndoit18]

+1

[ToastShaman]

+1

[tobiasny]

+1

[tamanobi]

+1

[dhtek]

+1

[paulofgccunha]

+1

[shun528]

+1

[naoki914]

+1

[bytesex]

Hello dear,
Would it be somehow possible to have this issue assigned on someone?)

[eddya101]

+1

[kelynch]

+1

[sabrasosimis]

+1

[latetedemelon]

What are the tasks for this one? My intial thoughts were:

1. Extend the grammar: Modify the grammar to support swimlanes by introducing new keywords like swimlane and end, and allowing users to define lanes within swimlanes.

    graph TD  
      swimlane A  
        A1-->A2  
      end  
      swimlane B  
        B1-->B2  
      end  

2. Create a swimlane class: Create a new class to represent swimlanes. This class should handle the rendering of swimlanes, lanes, and their contents. The swimlane class should be able to hold an array of lanes and store any other relevant attributes, such as the width, height, and position of the swimlane.
3. Update the parser: Modify the parser to recognize the new swimlane-related keywords and create swimlane objects accordingly. The parser should populate the swimlane objects with their respective lanes and nodes.
4. Update the layout engine: Modify the layout engine to account for swimlanes when calculating node positions. Swimlanes should have their own boundaries, and nodes within them should be positioned according to the boundaries of their containing lanes. Additionally, swimlanes should be stacked either horizontally or vertically, based on user preference.
5. Update the renderer: Modify the renderer to draw swimlanes and their contents. The renderer should support drawing swimlane boundaries, lane labels, and nodes within the lanes. It should also handle connections between nodes in different lanes or swimlanes.
6. Update the documentation

[AartBluestoke]

the strictly horizontal connections between nodes of the same rank isn't something the current rendered produces - separate from the swimlane render class, there is also a need of a layout hint to allow for connection arrows between objects of the same rank.

[zlatinz]

@latetedemelon Related to #2028 (comment)

This is great, as long as you can make also links across swimlanes, e.g. A2-->B1

[FraserCShell]

It would be fantastic to have swimlane diagramming, particularly as we look to embed Mermaid diagrams into Confluence pages for our documentation purposes. My first attempt yesterday hasn't quite got there, so I'll need to use Visio, or PPT :( , which is ok for the enterprise org I am in, but for smaller startups it would be yet another additional cost.

[koppel]

PlantUML Activity Diagrams have Swimlanes, and there is a Confluence plugin: https://plantuml.com/activity-diagram-beta

[atleta]

Also, while not text based, Draw.io can do swimlanes (and you can add flow cart elements).

[fguisso]

I'm lost with this thread, is subgrap not similar to swimlanes?

@napei commented on Mar 2, 2022

You can possibly achieve a halfway solution with subgraphs https://mermaid-js.github.io/mermaid/#/flowchart?id=subgraphs Definitely a feature worth having, +1.

[Baarsgaard]

I'm lost with this threat, is subgrap not similar to swimlanes?

Similar yes, but not usable as a substitute, to my knowledge.
SubGraphs allow you to define boxes within which you can add nodes.
But it differs from swimlanes as they have explicitly defined lanes. Subgraphs just kinda exist where they fit in depending on the connections made and the order they are defined in.

Swimlanes are always 2 or more parallel columns or rows in which you can have nodes that link between eachother.

[trancongbao]

+1

[ppKrauss]

2 years... Any hope here?

[wcgzgj]

Changing to plantUML now，it supports swimlanes and has plain language structure :(

[vesper8]

Changing to plantUML now，it supports swimlanes and has plain language structure :(

So this is what you're going to be using now? https://github.com/plantuml/plantuml.js/

Seems interesting.. I also need swimlanes.

I see many examples using boundaries here: https://plantuml.github.io/plantuml.js/#example=playground/example-pumls/community/cloudflare_linode_firewall.puml

But would you happen to have an example with swimlanes similar to the ones in this thread?

Thanks

[zlatinz]

plantUML performance on the playground page https://plantuml.github.io/plantuml.js/ is horrendous.
Much better performance on https://www.planttext.com/
As for example for swimlanes, maybe check https://stackoverflow.com/questions/51020100/plantuml-swimlanes-and-overlapping-connectors

[juampe]

+1
I can make swinlane flowchart with excel, ¿Why not with mermaid?

[medliii]

@knsv @ashishjain0512 Hello!

I apologize for the disturbance. Is there still a lot to be done on this feature? Is it possible to complete it? It would significantly enhance the functionality.

I understand it's not much, but I am willing to personally donate $500 for the release of swimlanes.

[sohmuijai]

+1 for this feature please

[mcqueenna]

+1 for this feature please

[latetedemelon]

From a pratical perspective what's the simplest version of done for version one of this requirement? Am I wrong it's thinking it's very straight forward? Essentially a version of the flowchart with the following differences:

1. No items can exist outside of subgraphs
2. Only one layer of subgraphs
3. For TD all subgraphs have to have the same width and have the same coordinates for their edges
4. For LR all subgraphs have to have the same height and have the same coordinates for their edges

Would this work for a simple use case?

[AartBluestoke]

"From a practical perspective what's the simplest version of done for version one of this requirement? " - i think a connection type that forces the two connections to be in the same layer, rather than the child at a lower height of the parent.
-- that would generalize to many different chart types - eg: each horizontal line in the Opportunity chart above would be augmented with this link type - at the moment an attempt to create this chart would create 13 levels, when only 5 will allow the chart to be rendered ...
perhaps even a general solution that checks to see if the child Has to be at a lower level than the parent, and a link only sometimes increases the layer, rather than always ...