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

【问题标题】：How to make the specified nodes horizontally aligned in Mermaid?如何让美人鱼中的指定节点水平对齐？
【发布时间】：2022-05-01 22:53:21
【问题描述】：

这是我的流程图：

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 水平对齐。有可能吗？

当然，这篇文章的目的是考虑如何水平对齐这些节点，但如果可能的话，我也想让这些边缘尽可能短，以便在对齐它们时节省空间。例如，我希望节点ddd 上升，而不是节点ccc 下降

【问题讨论】：

标签： flowchart mermaid

【解决方案1】：

您可以通过using longer or shorter arrows 来实现这一点，这会改变节点之间的最小链接长度：

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

【讨论】：

【解决方案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>

【讨论】：