如何在MermaidJS拓扑图中添加交换机间连线且不打乱布局？

当然可以实现，通过Mermaid的节点层级控制和子图布局优化，既能添加Switch1-Switch2、Switch2-Switch3的连线，又能维持原有图的对齐效果。以下是调整后的代码：

graph TD
    subgraph s
        rank=same  # 固定三个交换机在同一水平层级
        Switch1["Switch 1<br>Core Switch"]
        Switch2["Switch 2<br>Office VLAN"]
        Switch3["Switch 3<br>IoT Devices"]
    end

    # 添加交换机间的双向连线（无箭头，符合网络拓扑逻辑）
    Switch1 --- Switch2
    Switch2 --- Switch3

    subgraph sa
        Switch1 --> PC1["PC 1<br>192.168.1.101<br>Workstation"]
        Switch1 --> PC2["PC 2<br>192.168.1.102<br>Workstation"]
        Switch1 --> Server1["Server 1<br>192.168.1.200<br>File Server"]
    end

    subgraph sb
        Switch2 --> PC3["PC 3<br>192.168.1.103<br>Workstation"]
        Switch2 --> PC4["PC 4<br>192.168.1.104<br>Workstation"]
        Switch2 --> Printer1["Printer 1<br>192.168.1.150<br>Network Printer"]
        Switch2 --> IoT1["IoT Device 1<br>192.168.1.201<br>Smart Sensor"]
    end

    subgraph sc
        Switch3 --> PC5["PC 5<br>192.168.1.105<br>Workstation"]
        Switch3 --> PC6["PC 6<br>192.168.1.106<br>Workstation"]
        Switch3 --> Server2["Server 2<br>192.168.1.201<br>Web Server"]
        Switch3 --> IoT2["IoT Device 2<br>192.168.1.202<br>Security Camera"]
    end

    linkStyle default marker-end:none;
    # 单独设置交换机间连线的样式（可选，和默认保持一致）
    linkStyle 0,1 marker-end:none;

关键优化点： #

• rank=same指令：在交换机子图s中添加该指令，强制三个交换机节点保持同一水平层级，避免新增连线后出现上下错位。
• 无箭头连线---：交换机之间是双向通信，用无箭头连线更符合网络拓扑的实际逻辑，同时配合linkStyle保持和原有连线一致的视觉效果。
• 连线样式统一：通过linkStyle 0,1指定新增的两条交换机连线使用默认的无箭头样式，确保整体视觉协调。

如果需要进一步调整连线的弯曲程度或风格，可以在连线中添加符号控制路径，比如Switch1 -.- Switch2（虚线）或Switch1 === Switch2（粗线），按需选择即可。

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