Can I control the direction of flowcharts in Mermaid?

Question

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)?

Clareta

Answer 1

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

Seamstress

Answer 2

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.

Marino

mermaid.live to see it – Celinecelinka

"to draw such a static graph mermaid doesn't fit your use case." I think I dispute this - the real question here is how to format mermaid diagrams to fit within certain bounds. The meaning doesn't change but legibility does. edgefolding is available in tools that aren't supported directly in github markdown, which is a factor. Being able to mix orientations without subgraphing would be nice, subgraphing loses you the ability to connect the correct node in a class diagram for instance. – Inclusive

Answer 3

You can achieve it using Block Diagrams:

block-beta
   columns 5
   A space B space C
   space space space space space
   F space E space D

   A --> B
   B --> C
   C --> D
   D --> E
   E --> F

And the outcome:

https://mermaid.js.org/syntax/block.html

Ossein