如何在Mermaid中为链接关联元素的类样式？

原生Mermaid不支持直接让节点类自动关联链接样式，但可以用两种方式实现你要的效果：

方法1：用Mermaid内置的linkStyle批量设置 #

通过节点ID选择其所有输出链接，一次性设置样式，不用逐个修改链接。

修改后的Mermaid代码：

graph LR;
    classDef activ stroke:#F6BE00, stroke-width: 2px;

    a1((a1)):::activ-->b1((b1));
    a2((a2))-->b1;
    a3((a3))-->b1;
    a1-->b2((b2));
    a2-->b2;
    a3-->b2;
    a1-->b3((b3));
    a2-->b3;
    a3-->b3;
    a1-->b4((b4));
    a2-->b4;
    a3-->b4;
    b1-->c1((c1));
    b2-->c1;
    b3-->c1;
    b4-->c1;
    b1-->c2((c2));
    b2-->c2;
    b3-->c2;
    b4-->c2;

    # 给activ类节点a1的所有出链设置黄色样式
    linkStyle all in a1 stroke:#F6BE00, stroke-width:2px;

如果有多个activ类节点，比如a4、a5，只需再添加对应linkStyle行即可，比手动给每条链接加样式高效得多。

方法2：自定义CSS（仅限支持自定义样式的环境） #

如果你的运行环境支持自定义CSS（比如本地HTML、Obsidian等），可以用CSS选择器直接匹配activ类节点的所有输出链接，实现全自动样式关联。

对应的CSS代码：

/* 匹配带有activ类的节点的所有输出链接 */
.mermaid .node.activ + .edgePath path {
    stroke: #F6BE00 !important;
    stroke-width: 2px !important;
}

这种方式下，只要节点标注了:::activ，它的所有出链都会自动变成黄色，无需在Mermaid代码里额外添加任何设置。

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