How to make the specified nodes horizontally aligned in Mermaid?

Question

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

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

Answer 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 .

Answer 2

According Minimum length of a link ^permalink

Each node in the flowchart is ultimately assigned to a rank in the rendered graph, i.e. to a vertical or horizontal level (depending on the flowchart orientation), based on the nodes to which it is linked. By default, links can span any number of ranks, but you can ask for any link to be longer than the others by adding "extra dashes" in the link definition.

so you don't need to triple dash

change

• C2 ---> |msg| D to C2 --> |msg| D
• E1 --->|msg| F to E1 -->|msg| F

Compare

<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/8.14.0/mermaid.min.js"></script>

<table>
<tr>
  <th>Bad</th>
  <th>Good</th>
</tr>

<tr>
  <td>
    <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>
  </td>
  <td>
    <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>
  </td>  
</tr>
</table>