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

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 中，这可以通过一些对齐来解决问题。您不是唯一一个在美人鱼存储库中要求 similar behaviour 的人。
API doc of the mermaid flowcharts 不提供任何设置来实现您的目标。
虽然困难似乎来自于 mermaid-js 基于 d3-shape 来建立节点之间的链接，如 here 所述。
我最好的建议是改变库，因为你是用 javascript 编码的，vis.js 可以让你得到你期望的网络结果，就像你看到的 here。
我没有进一步挖掘，但似乎您可能必须手动定义节点的坐标，如此 stackoverflow 帖子中所述：vis.js - Place node manually