美人鱼中如何让指定节点水平对齐？

Question

这是我的流程图：

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

但实际上我希望节点ccc和节点ddd水平对齐。并且 hhh ，节点 ggg 和 kkk 水平对齐。可能吗？

当然，这个post的目的是想着如何让这些节点水平对齐，但是如果可能我也想把这些边尽可能的短，这样可以节省space在对齐它们的同时。例如，我希望节点 ddd 上升，而不是节点 ccc 下降

Answer 1

您可以通过 using longer or shorter arrows 实现此目的，这会更改节点之间的最小 link 长度：

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

试试这个。

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

美人鱼中如何让指定节点水平对齐？

How to make the specified nodes horizontally aligned in Mermaid?

flowchart

mermaid