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