美人鱼改变节点/选项的位置无论如何修复节点的位置

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 - 手动放置节点