如何缩短Mermaid嵌套子图中节点C与D的连接链路长度？

问题场景 #

在你设计的Mermaid流程图中，节点C（Smart Processing）与D（Templating Layer）之间的连线因D需连接子图S3（Delivery Interfaces）的垂直排列节点，导致布局引擎自动拉长了两者的距离——即便视觉上存在足够缩短空间，引擎也无法识别，影响了图表可视性。

可行解决方案 #

方案1：调整子图S3的布局方向为水平（LR）

将S3的垂直布局（direction TB）改为水平布局（direction LR），让E、F、G三个接口节点横向排列。这样D到三个节点的连线会更紧凑，D的位置会自然向C靠拢，直接缩短C-D的链路长度。

修改后的完整代码：

---
config:
  flowchart:
    nodeSpacing: 15
    rankSpacing: 50
    curve: monotoneX
  layout: fixed
---
flowchart LR
 subgraph S1["1. Input Source"]
        A[("📂 Codebase & Git")]
  end
 subgraph S2["2. Code2Prompt Core"]
    direction LR
        B{"🔍 Filtrage & Config"}
        C["🧠 Smart Processing
(Parse CSV, Notebooks, JSONL)"]
        D["🎨 Templating Layer
(Handlebars + Token Count)"]
  end
 subgraph S3["3. Delivery Interfaces"]
    direction LR
        E["💻 CLI / TUI"]
        F["🐍 Python SDK"]
        G["🔌 MCP Server"]
  end
    A --> B
    B --> C
    C --> D
    D --> E & F & G
    E --> H("🤖 LLM / AI Model")
    F --> H
    G --> H
    H -. 📝 Generate & <br> Integrate Code .-> A

     A:::input
     B:::core
     C:::core
     D:::core
     E:::delivery
     F:::delivery
     G:::delivery
     H:::ai
    classDef input fill:#e1f5fe,stroke:#01579b,stroke-width:2px
    classDef core fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px
    classDef delivery fill:#fff3e0,stroke:#ef6c00,stroke-width:2px
    classDef ai fill:#f3e5f5,stroke:#7b1fa2,stroke-width:2px
    classDef loop fill:#ffffff,stroke:#333,stroke-width:1px,stroke-dasharray: 5 5

方案2：用rank指令强制C与D紧凑排列

如果必须保留S3的垂直布局，可在S2子图内添加rank same指令，强制C和D处于同一水平层级并紧密排列，同时可微调全局间距参数压缩空间。

重点修改片段：

subgraph S2["2. Code2Prompt Core"]
    direction LR
        B{"🔍 Filtrage & Config"}
        C["🧠 Smart Processing
(Parse CSV, Notebooks, JSONL)"]
        D["🎨 Templating Layer
(Handlebars + Token Count)"]
        rank same C D
  end

同时可将config中的rankSpacing从50调整为30，进一步压缩子图间的垂直空间。

方案3：用linkStyle优化D到S3的连线路径

通过linkStyle指定D到E、F、G的连线为直线，减少布局引擎为弯曲路径预留的空间，辅助缩短C-D的距离。在代码末尾添加：

linkStyle 3,4,5 stroke:#2e7d32,stroke-width:2px,curve:none;

（注：数字3、4、5对应D到E、F、G的连线索引，可根据实际连线顺序调整）

方案适用场景 #

• 方案1适合希望保持接口节点水平排列的场景，整体布局更均衡；
• 方案2适合必须保留S3垂直布局的情况，强制C-D紧凑；
• 方案3作为辅助优化，可配合前两种方案进一步提升视觉效果。

内容的提问来源于stack exchange，提问作者Olivier D'Ancona