Mermaid流程图如何合并节点同方向连线的重叠公共折线段

Mermaid目前的curve配置项仅支持内置的折线、曲线类型枚举，没有开放自定义曲线函数的传入入口，因此通过自定义curve配置实现连线合并的思路暂时无法落地。

此前虚拟节点方案失效的核心原因是虚拟节点和主节点之间预留了间距，只要将虚拟节点设置为紧贴主节点端口的零尺寸透明锚点，所有同方向进出节点的连线先连接到对应方位的公共锚点，再通过锚点连接主节点，就能让公共线段完全叠加重合，水平、垂直方向的连线都可以用该方法处理。

可直接运行的实现代码 #

<script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
<div class="mermaid">
%%{init: {'flowchart' : {'curve' : 'stepBefore', 'nodeSpacing': 50, 'rankSpacing': 60}}}%%
flowchart TD
  %% 定义核心节点
  A((A))
  %% A节点下方公共锚点：无填充无描边、宽高为0，渲染后完全不可见
  A_anchor( )
  style A_anchor fill:none,stroke:none,width:0px,height:0px
  %% 锚点紧贴A节点，二者连线长度为0
  A --- A_anchor
  %% 所有A节点向下引出的连线统一从锚点出发
  A_anchor --- B
  A_anchor --- C
  A_anchor --- D
  A_anchor --- E

  %% B节点下方公共锚点，配置规则同上
  B_anchor( )
  style B_anchor fill:none,stroke:none,width:0px,height:0px
  B --- B_anchor
  B_anchor --- B1
  B_anchor --- B2
</div>

效果说明 #

• 公共锚点和主节点到锚点的连线渲染后完全不可见，视觉上呈现为从节点端口引出单根公共线段，到达分支位置后再拆分连接到不同目标节点，和主流流程图工具的折线连线效果一致
• 处理水平方向连线时，只需将对应锚点放置在节点左侧/右侧的同层级位置，使用相同的零尺寸透明节点配置即可实现水平方向的连线合并。

内容的提问来源于stack exchange，提问作者flywire