Mermaid流程图能否实现精细化流向控制以优化布局紧凑度

完全可以实现这类紧凑的精细化流向控制，做图时不需要被TD（top-to-bottom）、LR（left-to-right）两个全局流向限制死。

底层逻辑 #

全局流向参数只是设定图表的默认层级排列基准，并非强制所有节点都要顺着同一个方向线性铺开。从Mermaid v9.4版本开始，已经开放了足够多的布局微调能力，不需要手动指定节点的绝对坐标，就能做出符合需求的紧凑布局。

常用的布局控制手段 #

• 压缩默认布局间距
  可以通过图表初始化配置，直接缩小节点、层级之间的默认预留空隙，从根源上减少布局的松散感，配置示例：

  %%{init: {'flowchart': {'nodeSpacing': 25, 'rankSpacing': 35}}}%%
  

  其中nodeSpacing控制同一水平层内节点的横向距离，rankSpacing控制上下两个层级的纵向距离，数值越小整体布局越紧凑。
• 用不可见连线锚定节点相对位置
  可以使用无箭头的不可见连线~~~，把需要固定相邻关系的节点绑定起来，强制布局引擎按照你设定的方位排列节点，不会出现无意义的位置偏移。比如要实现参考图中的折线路径，只需要把折行后的节点用不可见连线和上一层的相邻节点做锚定，就能让主流程自然拐折，不需要把长流程拉成一整条超长的横向条带。
• 简化冗余连线
  遇到多节点指向同一目标的分支场景，可以用&语法一次性完成多源连接，减少多余连线对布局空间的占用，进一步压缩图表整体尺寸。

对应参考效果的实现思路 #

参考图中的蛇形紧凑流程图，本质是把一整条长线性流程拆成多段短横向流程，每段流程的末尾通过不可见连线锚定下一段的起始节点位置，让整体路径按照“向右延伸-向下拐折-向左延伸-向下拐折-向右延伸”的方式排布，完全可以在Mermaid内实现，不需要切换到其他绘图工具。

内容的提问来源于stack exchange，提问作者Paw in Data