css - 美人鱼改变节点/选项的位置无论如何都要固定节点的位置

Question

我正在尝试用 html 绘制流程图。

流程必须配置如下。

我已经像这样在美人鱼中尝试过

<div class="mermaid">
   graph LR

  A-->B
  B-->C
  C-->B

  C-->D
  D-->C

  D-->E
  E-->D


  E-->F
  F-->E

  F-->G

  G-->E
  C-->E

  H

  A-->H
  H-->E;


 </div>

结果如下图所示。

请我想固定从 A 到 G 水平度的位置

我尝试使用 CSS 位置，但从未成功。还尝试通过jquery对其进行动画处理，但从未奏效。

请让我知道修复这些节点的任何方法或其他很棒的库。

谢谢。

Answer 1

我明白你的意思，但是在查看了文档之后，我无法得到你的结果，只能通过linkStyle default interpolate basis在图表的开头添加来提高可读性。
不幸的是不能将节点放在单独的 div 中，这可以通过一些对齐来解决问题。您不是唯一一个在美人鱼的存储库中要求类似行为的人。美人鱼流程图
的API 文档没有提供任何设置来实现您的目标。 尽管困难似乎来自于 mermaid-js 基于d3-shape来建立节点之间的链接，如此处所述。 我最好的建议是更改库，因为您使用 javascript 进行编码，

如您在此处所见， vis.js可以为您提供您期望的网络结果。
我没有进一步挖掘，但似乎您可能必须手动定义节点的坐标，如此 stackoverflow 帖子中所述：vis.js - 手动放置节点