Mermaid: How do I force subgraphs to be top-down

[mingfang]

If I have this graph

graph TD
subgraph Backend
B
C
D
end

subgraph Front
A
end

If I link A-->B then it looks right.
http://knsv.github.io/mermaid/live_editor/#/view/Z3JhcGggVEQKc3ViZ3JhcGggQmFja2VuZApCCkMKRAplbmQKCnN1YmdyYXBoIEZyb250CkEKZW5kCgpBLS0-Qg

However if I also link C-->D then subgraphs are no longer top down.
http://knsv.github.io/mermaid/live_editor/#/view/Z3JhcGggVEQKc3ViZ3JhcGggQmFja2VuZApCCkMKRAplbmQKCnN1YmdyYXBoIEZyb250CkEKZW5kCgpBLS0-QgpDLS0-RA

If there any way to keep the subgraph top down?

[knsv]

I am afraid that Mermaid is not very expressive this way. You can play with different direction for instance RL but then the graphs in the subgraphs will also change direction.

[mingfang]

Thanks for reviewing this issue.
I've read about people hacking this in different ways
http://stackoverflow.com/questions/7777722/top-down-subragpraphs-left-right-inside-subgraphs
e.g. create invisible nodes and links to force the top down layout.

Perhaps a less "hacky" way would be to add links to subgraphs.
So in my example I can add
Frontend-->Backend

And this link would cause layout to follow the graph direction, e.g. TD.

[papoola]

+1

[vikram-rawat]

Can we anyhow build two different mermaid plots and merge them as one.

Like one mermaid diagram connecting to another and so on... That could solve the problem temporarily. And also it will open up a new dimension entirely.

This will solve the problem of subgraphs temporarily. But this is a must have feature because without it Big and complex graphs can not be explained.

[tylerlong]

I believe the diagram layout is powered by dagre-d3 and dagre. We might be able to find the answer in the upstream projects.

[lukewis]

@mingfang to clarify, linking subgraphs is not currently supported, correct? You are suggesting this as an enhancement?

[mingfang]

I'm don't want to link subgraphs.
If you look at my example above, it's about linking nodes across subgraphs.
I think this is a bug and not an enhancement is my first example works and the second doesn't.

[lukewis]

@mingfang Sorry, I should have been more clear. I was trying to interpret https://github.com/knsv/mermaid/issues/287#issuecomment-178153360 where you said

Perhaps a less "hacky" way would be to add links to subgraphs.
So in my example I can add
Frontend-->Backend

I wasn't sure if this was a solution that worked for you, or a possible "enhancement/workaround" that you were suggesting should be supported. When I tried linking subgraphs, the chart wouldn't render at all, so I wasn't sure if that was a currently supported scenario.

I also don't want to link subgraphs, but I haven't yet found an acceptable workaround. I also agree that this is a bug. If the graph is considered to be top-down, the subgraphs should be as well (or should be configurable separately).

[stale[bot]]

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.

[IOrlandoni]

Given how long ago this issue's activity died out, I'm closing it.
This allows us to maintain a fresh list of issues the community is interested in.

[lazarillo]

So if I write another comment, can I help to keep it alive to show that the community is interested?

My issue is more broad... I would like to be able to set particular subgraphs or links in an order. My flow is fairly large, so I would like for it to, for instance, go left-right, then top-bottom, similar to how we read text from a book (but ideally snaking back and forth).

[michucz]

I would also like to keep this issue alive.
If have a couple of nodes that simply follow one another, I would like to be able to change direction, so I can start LR, than change to TB for one node, and then to RL.

[jucor]

@michucz @lazarillo That might be followed in issue #1265.