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.5k stars 6.3k forks source link

BT order reversed in single subgraph #1678

Open jthomerson opened 3 years ago

jthomerson commented 3 years ago

Describe the bug I'm building an open source tool that helps manage and visualize dependencies between microservices. I'm using a flowchart to represent the dependencies between services, and services are in systems. Each system is a subgraph. There's also a special subgraph called "root" that has root dependencies that must be deployed before any other service.

When I use flowchart BT to get the root dependencies at the top of the graph (all dependencies point "up" to root), everything works great, except the dependencies within the root subgraph go top-to-bottom.

To Reproduce

Use this graph:

flowchart BT
   subgraph root
   root-resources[root-resources]
   envgroup-resources[envgroup-resources]
   end

   subgraph core
   root-resources
   envgroup-resources
   content-storage([content-storage])
   content-storage-backup([content-storage-backup])
   primary-domain-routing([primary-domain-routing])
   config-storage([config-storage])
   versioned-config([versioned-config])
   end

   subgraph cms
   discovery-api([discovery-api])
   downloads-api([downloads-api])
   management-api([management-api])
   end

   subgraph search
   search-cluster([search-cluster])
   search-api([search-api])
   search-doc-storage([search-doc-storage])
   end

   subgraph edge
   alb-vpc([alb-vpc])
   load-balancer([load-balancer])
   cdn([cdn])
   end

   envgroup-resources --> root-resources
   content-storage-backup --> content-storage
   versioned-config --> config-storage
   discovery-api --> content-storage
   downloads-api --> content-storage
   management-api --> content-storage
   search-api --> search-cluster
   load-balancer --> discovery-api
   load-balancer --> downloads-api
   load-balancer --> management-api
   load-balancer --> search-api
   load-balancer --> alb-vpc
   cdn --> load-balancer
   core -..-> root
   cms -..-> root
   search -..-> root
   edge -..-> root

This is how it renders:

mermaid-diagram-20200912033538

Expected behavior I would expect root-resources to be on the top since this is a BT chart. For example, I would expect it to look like this:

flowchart BT
   root-resources[root-resources]
   envgroup-resources[envgroup-resources]
   envgroup-resources --> root-resources

mermaid-diagram-20200912033702

Notably, a tweak to make each subgraph depend on the last dependency in the root subgraph (rather than depending on the root subgraph itself) fixes the problem. Here's the adjusted Mermaid:

flowchart BT
   subgraph root
   core:root-resources[core:root-resources]
   core:envgroup-resources[core:envgroup-resources]
   end

   subgraph core
   core:root-resources
   core:envgroup-resources
   core:content-storage([core:content-storage])
   core:content-storage-backup([core:content-storage-backup])
   core:primary-domain-routing([core:primary-domain-routing])
   core:config-storage([core:config-storage])
   core:versioned-config([core:versioned-config])
   end

   subgraph search
   search:search-doc-storage([search:search-doc-storage])
   search:search-cluster([search:search-cluster])
   search:search-api([search:search-api])
   end

   subgraph cms
   cms:discovery-api([cms:discovery-api])
   cms:downloads-api([cms:downloads-api])
   cms:management-api([cms:management-api])
   end

   subgraph edge
   edge:alb-vpc([edge:alb-vpc])
   edge:load-balancer([edge:load-balancer])
   edge:cdn([edge:cdn])
   end

   core:envgroup-resources --> core:root-resources
   core:content-storage-backup --> core:content-storage
   core:versioned-config --> core:config-storage
   cms:discovery-api --> core:content-storage
   cms:downloads-api --> core:content-storage
   cms:management-api --> core:content-storage
   search:search-api --> search:search-cluster
   edge:load-balancer --> cms:discovery-api
   edge:load-balancer --> cms:downloads-api
   edge:load-balancer --> cms:management-api
   edge:load-balancer --> search:search-api
   edge:load-balancer --> edge:alb-vpc
   edge:cdn --> edge:load-balancer
   core -..-> core:envgroup-resources
   search -..-> core:envgroup-resources
   cms -..-> core:envgroup-resources
   edge -..-> core:envgroup-resources

Those last four lines are the ones that changed. Here's the result. It gets the dependency direction correct, but makes the root subgraph look awful because the box becomes very large. That's why I'd rather just link the subgraphs rather than items in each subgraph.

mermaid-diagram-20200912034215

Thanks for the awesome library! Let me know if more info would be helpful. I used the Mermaid Live Editor to produce these diagrams, at version 8.8.0.

jthomerson commented 3 years ago

This issue might have some similarity to the feature request in #550. I think the bug could be fixed without implementing the feature, but the feature could also give folks more control and eliminate the bug - because I could specify BT in the top "root" graph, and LR or RL or BT etc in each subgraph.

jpl-jengelke commented 2 years ago

Related? https://github.com/mermaid-js/mermaid/issues/815