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

[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 ...

[raaannzzz]

Any hope here?

[bytesex]

Several years hoping this to be done. Hundreds of devs/analysts wanting this. But, it seems the powerful IT guys are busy working on trends like an AI. :) Earning millions of bucks, having no clue how to implement freaking swimlanes for themselves. The only reason I dont put my hands on it - i dont like graphs etc. But its really strange that guys who passion about this stuff don't help here. 12 июня 2024 г., в 19:29, Ranz ***@***.***> написал(а): Any hope here? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>

[andremoraes]

await 5 more years and perhaps AI will be able to do it. I doubt that powerful IT guys know how to code anymore

…

On Wed, Jun 12, 2024 at 12:30 PM bytesex ***@***.***> wrote: Several years hoping this to be done. Hundreds of devs/analysts wanting this. But, it seems the powerful IT guys are busy working on trends like an AI. :) Earning millions of bucks, having no clue how to implement freaking swimlanes for themselves. The only reason I dont put my hands on it - i dont like graphs etc. But its really strange that guys who passion about this stuff don't help here. 12 июня 2024 г., в 19:29, Ranz ***@***.***> написал(а): Any hope here? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***> — Reply to this email directly, view it on GitHub <#2028 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAB7KXLQ7T55CAGLGXA2MB3ZHCARZAVCNFSM434LUII2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMJWGM2TMNZQGM3A> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[shouguouo]

Any hope here?

[pai-sy]

Any hope here?

[BenjaminKrueger-TUD]

+1

[bytesex]

No way, guys, lets take some beer :)13 авг. 2024 г., в 17:01, 최선열 ***@***.***> написал(а): Any hope here? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>

[RobberFox]

+1 Those guys are AI-pilled. The important things don't matter anymore.

[AartBluestoke]

AI won't be able to layout diagrams appropriately unless the options are there for it to use ...

[boshiuchen]

Novice Javascript programming enthusiast here. Would be willing to put in the hours to get this done. Any suggestions on where to get things started? I mostly work with Python and have drawn with graphviz before, but the swimlane feature is what I will need at work and currently can't achieve that with graphviz.

[AartBluestoke]

@boshiuchen

Novice Javascript programming enthusiast here. Would be willing to put in the hours to get this done. Any suggestions on where to get things started? I mostly work with Python and have drawn with graphviz before, but the swimlane feature is what I will need at work and currently can't achieve that with graphviz.

There are 2 parts to this:

1. new syntax to indicate that a user wants 2 nodes to be at the same level
   • the syntax can be changed later, so a prototype can propose something sensible of your choice -
2. the conceptual layout engine for a flowchart which calculates the row. It currently works recursivly with each recursion at a deeper "row" level - some of the code is at https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js#L295
   • an example layout engine update is referenced up-thread at ddc006e

[bytesex]

Let me put some [useless] thoughts on this. What if we struggling to use the wrong tool for the task?It seems swim-lanes are not “graphs” or something graphwiz or mermaid were build for. Consider to implement the system, consisting of several “containers” (aka swimlanes), each container incapsulates the rendering of mermaid or staruml or something else. And as an additional task - how to connect all the nodes around with different type of connectors. 8 окт. 2024 г., в 02:50, Andrew Hill ***@***.***> написал(а): Novice Javascript programming enthusiast here. Would be willing to put in the hours to get this done. Any suggestions on where to get things started? I mostly work with Python and have drawn with graphviz before, but the swimlane feature is what I will need at work and currently can't achieve that with graphviz. There are 2 parts to this: new syntax to indicate that a user wants 2 nodes to be at the same level the syntax can be changed later, so a prototype can propose something sensible of your choice - the conceptual layout engine for a flowchart which calculates the row. It currently works recursivly with each recursion at a deeper "row" level - some of the code is at https://github.com/mermaid-js/mermaid/blob/develop/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js#L295 an example layout engine update is referenced up-thread at ddc006e —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>

[andremoraes]

The new blocks diagram can help with this now?

[boshiuchen]

Came across this python package that seems to be able to generate swim lane graphs by code. Will take a peak under the hood for how it's done.
Package name: ProcessPiper
https://github.com/csgoh/processpiper?tab=readme-ov-file

[hardchor]

Came here looking for swimlanes (I love swimlanes.io), saw this thread, was about to give up, but then literally the 2nd entry in the official docs is this: https://mermaid.js.org/syntax/sequenceDiagram.html

[atleta]

Came here looking for swimlanes (I love swimlanes.io), saw this thread, was about to give up, but then literally the 2nd entry in the official docs is this: https://mermaid.js.org/syntax/sequenceDiagram.html

But a sequence diagram is not a swimlane diagram. (Even if swimlanes.io makes you think so.) A swimlanes diagram is a flowchart (type of diagram) organized into horizontal or vertical columns (swimlanes): https://en.wikipedia.org/wiki/Swimlane

[Capricornsong]

Almost 4 years, any updates on this :(

[bytesex]

No way except asking Trump or Musk for help. Or lets wait for next AI-powered skynet to solve this13 февр. 2025 г., в 06:23, Capricornsong ***@***.***> написал(а): Almost 4 years, any updates on this :( —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>