flowchartmermaid

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


Solution

  • 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