search

mermaid-js / mermaid

Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
https://mermaid.js.org
MIT License
70.98k stars 6.38k forks source link

Possible to ensure two items are on the same level/add a sibling connector? #637

Closed absolutejam closed 5 years ago

absolutejam commented 6 years ago

Hey guys,

Awesome project you got going here. Just a quick query - Is it possible to ensure two nodes appear on the same level, even if they don't share the same parents? (Eg. two separate graphs that converge) And also, can we add connectors between siblings?

Cheers!

tylerlong commented 6 years ago

Are you talking about flowchart, sequence diagram or gantt diagram? What are "connectors between siblings"?

absolutejam commented 6 years ago

Sorry, forgot to mention I'm talking about flow diagrams.

In terms of siblings, take the following example:

A --> B
A --> C

Then B and C could be siblings.

tylerlong commented 6 years ago

OK, I've got what are siblings. Then what are connectors between siblings ?

Update

I think I've got your point. You want to make two nodes having the same weight so that they are on the same level. I believe somebody else had created an issue for this.

kaleguy commented 6 years ago

This would be a very cool feature because I think Mermaid would then be able to support Evaporating Cloud diagrams.

Traditionally the sibling same level connect is a jagged line, but it could just as well be a red line.

Apachez- commented 6 years ago

Yes, this is one of the things missing in mermaid before I can use mermaid to create network maps.

Take a look at the example made in graphviz over at https://www.reddit.com/r/networking/comments/8dbucs/tools_to_create_maintainable_network_diagrams/dxr8azc/ more specific https://imgur.com/a/TgqYNjo

If we look at CORE-SW1 and CORE-SW2 from the above example I want to have them levelled (at the same height/level within the map). Other than that I dont really care for other parameters which is the beauty of using a textbased diagrammer such as mermaid's flowchart capability. That is I just define the nodes and the links between them and mermaid does the rest.

But doing so in mermaid CORE-SW1 ends up one level and CORE-SW2 at another one:

https://mermaidjs.github.io/mermaid-live-editor/#/view/eyJjb2RlIjoiZ3JhcGggVEJcbk5FVDEgLS0tIE4xLVIxXG5ORVQxIC0tLSBOMS1SMlxuTjEtUjEgLS0tIENPUkUtU1cxXG5OMS1SMSAtLS0gQ09SRS1TVzJcbk4xLVIyIC0tLSBDT1JFLVNXMVxuTjEtUjIgLS0tIENPUkUtU1cyXG5ORVQyIC0tLSBOMi1SMVxuTkVUMiAtLS0gTjItUjJcbk4yLVIxIC0tLSBDT1JFLVNXMVxuTjItUjEgLS0tIENPUkUtU1cyXG5OMi1SMiAtLS0gQ09SRS1TVzFcbk4yLVIyIC0tLSBDT1JFLVNXMlxuSU5URVJORVQgLS0tIEktUjFcbklOVEVSTkVUIC0tLSBJLVIyXG5JLVIxIC0tLSBDT1JFLVNXMVxuSS1SMSAtLS0gQ09SRS1TVzJcbkktUjIgLS0tIENPUkUtU1cxXG5JLVIyIC0tLSBDT1JFLVNXMlxuTkVUMyAtLS0gTjMtUjFcbk5FVDMgLS0tIE4zLVIyXG5OMy1SMSAtLS0gQ09SRS1TVzFcbk4zLVIxIC0tLSBDT1JFLVNXMlxuTjMtUjIgLS0tIENPUkUtU1cxXG5OMy1SMiAtLS0gQ09SRS1TVzJcbk5FVDQgLS0tIE40LVIxXG5ORVQ0IC0tLSBONC1SMlxuTjQtUjEgLS0tIENPUkUtU1cxXG5ONC1SMSAtLS0gQ09SRS1TVzJcbk40LVIyIC0tLSBDT1JFLVNXMVxuTjQtUjIgLS0tIENPUkUtU1cyXG5DT1JFLVNXMSAtLS0gQ09SRS1TVzJcbmxpbmtTdHlsZSAzMCBzdHJva2U6I2ZmMDBmZixzdHJva2Utd2lkdGg6MTBweDtcbiIsIm1lcm1haWQiOnsidGhlbWUiOiJuZXV0cmFsIn19

bryandamon commented 5 years ago

Another use for using "sibling nodes" would be generating pretty organizational charts: https://cdn.vertex42.com/ExcelTemplates/Images/orgcharts/functional-business-organizational-chart.gif

Great project, I'm enjoying using it!

bryandamon commented 5 years ago

As pointed out by a colleague, you can force two nodes to be on the same level (siblings) by creating fake intermediary nodes and collapsing them with styling (width:0px). Here's an example: https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbkFbQTxicj5MZXZlbCMxXSBcbiAgIEEgLS0-QltCPGJyPkxldmVsIzJdXG4gICAgICBCIC0tPkIxW0ItMTxicj5MZXZlbCMzXVxuICAgICAgQiAtLT5CMltCLTI8YnI-TGV2ZWwjM11cbiAgICAgICAgIEIyIC0tPkIyMVtCLTItMTxicj5MZXZlbCM0XVxuICAgQSAtLT5DW0M8YnI-TGV2ZWwjMl1cbiAgIEEgLS0-RFtEPGJyPkxldmVsIzJdXG4gICAgICBEIC0tPkQxW0QtMTxicj5MZXZlbCMzXVxuICAgICAgICAgRDEgLS0-RDExW0QtMS0xPGJyPkxldmVsIzRdXG4gICAgICBEIC0tPkQyW0QtMjxicj5MZXZlbCMzXVxuICAgWDEoXCIgXCIpXG4gICAgICBBLS0tWDFcbiAgICAgIFgxIC0tPkVbRTxicj5MZXZlbCMzXVxuICAgICAgc3R5bGUgRSBmaWxsOnllbGxvdyxzdHJva2U6cmVkLHN0cm9rZS13aWR0aDozcHhcbiAgIFgyLTEoXCIgXCIpXG4gICBYMi0yKFwiIFwiKVxuICAgICAgQS0tLVgyLTFcbiAgICAgIFgyLTEtLS1YMi0yXG4gICAgICBYMi0yIC0tPkZbRjxicj5MZXZlbCM0XVxuICAgICAgc3R5bGUgRiBmaWxsOmxpZ2h0Z3JlZW4sc3Ryb2tlOmJsdWUsc3Ryb2tlLXdpZHRoOjNweFxuY2xhc3NEZWYgU2tpcExldmVsIHdpZHRoOjBweDtcbmNsYXNzIFgxLFgyLTEsWDItMiBTa2lwTGV2ZWwiLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ

bryandamon commented 5 years ago

@Apachez- Some rough hacks at your diagram. I was trying to do the same thing so I tinkered with your example. None of these would make sense for me to use (I want my graphs autogenerated):

  1. Invisible edges/nodes off existing node
  2. Invisible edges/nodes off existing node with subgraph
  3. Invisible edges/nodes with only subgraph

Ideally Mermaid will be updated to allow "linked siblings" and styling of subgroups.

stale[bot] commented 5 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.