Can I control the direction of flowcharts in Mermaid?

user_12065308 0
Viewed 6609
graph LR
A-->B-->C-->D-->E-->F;

graph TD
A-->B-->C-->D-->E-->F;

I like to draw simple diagram using Mermaid. But it seems that flowcharts can only be top-to-bottom or left-to-right. Can I have more subtle control over the direction so the flowchart looks more compact (such as the below)?

Example flowchart

mermaid flowchart
2 Answers

Mermaid's Graph charts only know about vertical or horizontal layouts. If you don't want to draw the compact layout that you want, you might try another text->diagram tool, such as http://blockdiag.com/en/blockdiag/examples.html#edge-folding

If you don't want to do any setup, https://kroki.io/ supports most text->diagram tools, including BlockDiag. Here's BlockDiag's "folded" example as a Kroki-generated diagram:

https://kroki.io/blockdiag/svg/eNotjEEKwkAMRfdzir_UhfQAA4JaT1FcTE2mDAYiNK0U6d1NwM17iwdvFH2-qJUJ3wRccDrjGrgF-sA9Jy9dh6pCYJoYxbybej_0-DQRjAwpmy7GFNX0DeGVJbuqYW7ER7_8r0OsmB457T_JhySR

user_40237640

The closest you could get is by using subgraphs

flowchart TD

subgraph Z[" "]
direction LR
  A --> B
  B --> C
end

subgraph ZA[" "]
direction RL
    D-->E
    E-->F
end

Z --> ZA

This is a hack and as you see C doesn't connect to D directly.

The point of mermaid is that the diagrams are auto-generated. C to D is flow and it shouldn't matter if the arrow connecting C to D is horizontal or vertical; the meaning doesn't change.

To connect Cto D, one would need to specify absolute pixel coordinates which defeats the purpose of auto-generating diagrams.

So as it is now, to draw such a static graph mermaid doesn't fit your use case.

user_44512880
Related