'How to make the specified nodes horizontally aligned in Mermaid?

This is my flowchart:

graph TB
    aaa ---> bbb ---> ddd & ccc
    ddd -.-> fff
    ccc --->|eee| fff
    fff ---> hhh & ggg & kkk
    hhh --->|iii| mmm
    ggg & kkk -.-> mmm

enter image description here

But actually I want the node ccc and node ddd to be aligned horizontally. And the hhh , node ggg and kkk to be aligned horizontally. Is it possible?

Of course, the purpose of this post is to think about how to align these nodes horizontally, but if possible I would also like to make these edges as short as possible to save space while aligning them. For example, I want the node ddd to go up, not the node ccc to come down

flowchartmermaid


Solution 1:[1]

You can achieve this by using longer or shorter arrows, which changes the minimum link length between nodes:

graph TB
    aaa ---> bbb ---> ddd & ccc
    ddd -..-> fff
    %%   ^^ extra .
    ccc --->|eee| fff
    fff ---> hhh & ggg & kkk
    hhh --->|iii| mmm
    ggg & kkk -..-> mmm
    %%         ^^ extra .

Flowchart with nodes aligned as OP wishes

Solution 2:[2]

try this.

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.14.0/mermaid.min.js"></script>
<div class="mermaid">
  graph TB
  A --> B --> C1 & C2
  C1 -.-> D
  C2 --> |msg| D
  D --> E1 & E2 & E3
  E1 -->|msg| F
  E2 & E3 -.-> F
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Chris
Solution 2 Carson

Related Questions