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

[jonathh21]

+1

[ChickenHarry]

+1

[chungminhtu]

+1

[asidelnik]

+1

[MichaelCombs28]

+1

[blakenan-bellese]

+1

[MatejMarecek]

+1

[tirsomartinezreyes]

+1

[sindunuragarp]

+1

[awetomate]

+1

[atkawa7]

Checkout actdiag for example no how this could be acchieved http://blockdiag.com/en/actdiag/demo.html

[r0b5t4]

Git graphs can achieve a limited swimlane-esque appearance now.

[kevinjanada]

+1

[totorofly]

+1

[AquiGorka]

This would be awesome, I am actually not using mermaid because of the lack of it :(

[kayewrobleski]

+1

[carlseverson]

+1 from me as well. Would love to have this.

[anilsehgal-onscale]

+1

[czeumer]

+1

[smoreau-tj]

+1

[Rob-Holland]

+1, I find this relevant to my interests 🙃

[vincentbuit]

+1

[cdcharlebois]

+1

[gwax]

Please do not leave comments merely to show your approval (e.g. "+1") because it sends a notification to everyone subscribed to the Issue, which crowds out meaningful discussion.

If you are interested in following the discussion, click the "Subscribe" button in the notifications section at the right.

If you would like to show your interest / approval for the Issue, Click the "👍" reaction emoji on the initial Issue comment.

[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