Mermaid JS如何为链接命名 避免逐个配置linkStyle样式

Mermaid 从 v9.1 版本开始支持链接类绑定功能，无需为每条链接单独按索引编写linkStyle，即可批量为同类型链接设置统一样式。

具体实现步骤 #

• 先通过classDef定义公共样式类，你这个场景可以分别定义正负极对应红线、黑线两个样式类
• 在对应链接末尾添加:::类名，即可自动套用预定义的样式

修改后可实现相同效果的完整代码如下，比原代码精简很多，后续调整样式只要改classDef的定义即可：

graph TD
    %% 定义公共样式类
    classDef redLine stroke:red,stroke-width:2px,fill:none;
    classDef blackLine stroke:black,stroke-width:2px,fill:none;

    Bat(fa:fa-car-battery Batteries) -->|150a 50mm| ShutOff:::redLine
    Bat -->|150a 50mm| Shunt:::blackLine

    ShutOff[Shut Off] -->|150a 50mm| BusPos[Bus Bar +]:::redLine

    Shunt -->|150a 50mm| BusNeg[Bus Bar -]:::blackLine

    BusPos -->|40a| Fuse[Fuse Box]:::redLine
    BusPos -->|?a| Old{Old Wiring}:::redLine

    BusNeg -->|40a| Fuse:::blackLine

    Fuse -->|10a| USB(USB-C):::redLine
    Fuse -->|10a| USB:::redLine
    Fuse -->|1.5a| Switch:::redLine -->|1.5a| Wifi:::redLine

    Wifi -->|1.5a| Fuse:::blackLine

    Fuse -->|10a| Cig1[Cigarette Lighter]:::redLine
    Fuse -->|10a| Cig1:::redLine

    Fuse -->|10a| Cig2[Cigarette Lighter Near Bed]:::redLine
    Fuse -->|10a| Cig2:::redLine

    BusNeg -->|?a| Old:::blackLine

    Solar --> SolarCont[Solar Controller]:::redLine
    Solar --> SolarCont:::blackLine

    SolarCont --> BusNeg:::blackLine
    SolarCont --> BusPos:::redLine

原实现效果参考：

如果你使用的Mermaid版本低于v9.1不支持该功能，也可以通过自定义CSS匹配链接文本规则批量设置样式，建议优先升级到支持链接类的版本，维护成本更低。

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