样式多链接美人鱼 JS

问题描述

Mermaid JS 中是否有任何方法可以命名链接并避免图表中的每个链接都必须有一个 linkStyle？

例如，要获得下图中的红线和黑线，我的源代码如下所示，并且样式变得难以管理。

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

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

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

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

    BusNeg -->|40a| Fuse

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

    Wifi -->|1.5a| Fuse

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

    Fuse -->|10a| Cig2[Cigarette Lighter Near bed]
    Fuse -->|10a| Cig2 

    BusNeg -->|?a| Old

    Solar --> SolarCont[Solar Controller]
    Solar --> SolarCont

    SolarCont --> BusNeg
    SolarCont --> BusPos

    linkStyle 0 stroke-width:2px,fill:none,stroke:red;
    linkStyle 1 stroke-width:2px,stroke:black;
    linkStyle 2 stroke-width:2px,stroke:red;
    linkStyle 3 stroke-width:2px,stroke:black;
    linkStyle 4 stroke-width:2px,stroke:red;
    linkStyle 5 stroke-width:2px,stroke:red;
    linkStyle 6 stroke-width:2px,stroke:black;
    linkStyle 7 stroke-width:2px,stroke:black;
    linkStyle 8 stroke-width:2px,stroke:red;
    linkStyle 9 stroke-width:2px,stroke:red;
    linkStyle 10 stroke-width:2px,stroke:red;
    linkStyle 11 stroke-width:2px,stroke:black;
    linkStyle 12 stroke-width:2px,stroke:red;
    linkStyle 13 stroke-width:2px,stroke:black;
    linkStyle 14 stroke-width:2px,stroke:red;
    linkStyle 15 stroke-width:2px,stroke:black;
    linkStyle 16 stroke-width:2px,stroke:black;
    linkStyle 17 stroke-width:2px,stroke:red;
    linkStyle 18 stroke-width:2px,stroke:black;
    linkStyle 19 stroke-width:2px,stroke:black;

解决方法

您可以使用 id 列表，而不是分别为每个 id 设置样式。 例如，

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

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

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

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

    BusNeg -->|40a| Fuse

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

    Wifi -->|1.5a| Fuse

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

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

    BusNeg -->|?a| Old

    Solar --> SolarCont[Solar Controller]
    Solar --> SolarCont

    SolarCont --> BusNeg
    SolarCont --> BusPos

    linkStyle 0,1,2,4,5,8,9 stroke-width:2px,fill:none,stroke:red;
    linkStyle 3,6,7 stroke-width:2px,stroke:black;
    linkStyle 10 stroke-width:2px,stroke:red;
    linkStyle 11 stroke-width:2px,stroke:black;
    linkStyle 12 stroke-width:2px,stroke:red;
    linkStyle 13 stroke-width:2px,stroke:black;
    linkStyle 14 stroke-width:2px,stroke:red;
    linkStyle 15 stroke-width:2px,stroke:black;
    linkStyle 16 stroke-width:2px,stroke:black;
    linkStyle 17 stroke-width:2px,stroke:red;
    linkStyle 18 stroke-width:2px,stroke:black;
    linkStyle 19 stroke-width:2px,stroke:black;