如何用CSS仅隐藏Mermaid类图中指定节点及其关联边？

核心思路 #

Mermaid渲染类图时，会给节点和边生成带标识的DOM元素：

• 节点会带上你设置的cssClass类名
• 边（SVG路径）会有data-source和data-target属性，值对应关联节点的ID（格式一般是class-节点名）

利用这两个特性，就能精准隐藏目标节点及其关联边，同时不影响其他节点和边。

具体实现步骤 #

1. 给目标节点添加自定义类 #

在Mermaid代码里用classDef定义隐藏类，再给目标节点绑定这个类：

classDiagram
    class Animal
    class Lion {
        +roar()
    }
    class Zebra {
        +run()
    }
    Animal <|-- Lion
    Animal <|-- Zebra

    // 定义隐藏类
    classDef hidden-node display: none;
    // 给Zebra绑定隐藏类
    Zebra:::hidden-node

2. 用CSS精准隐藏关联边 #

针对关联到目标节点的边，通过data-source/data-target属性定位：

/* 隐藏目标节点（如果classDef不够用的话，也可以用这个） */
.hidden-node {
    display: none;
}

/* 隐藏所有指向Zebra或从Zebra出发的边 */
svg[data-mermaid-type="classDiagram"] path[data-target$="Zebra"],
svg[data-mermaid-type="classDiagram"] path[data-source$="Zebra"] {
    opacity: 0;
    pointer-events: none; /* 避免隐藏的边干扰交互 */
}

为什么之前的:has选择器失效？ #

:has选择器在SVG环境下的支持有限，而且如果你的选择器写得太宽泛（比如svg:has(.hidden-node) path），会选中所有边。而利用Mermaid自带的data-source/data-target属性，能精准定位到只和目标节点关联的边，不会影响其他节点的边。

注意事项 #

• GitHub的原生Markdown不支持直接嵌入<style>块，你需要通过浏览器用户样式表（比如Stylus插件）来应用这段CSS，或者如果是GitHub Pages项目，可以把CSS加到站点的样式文件里。
• 节点ID的格式可能会随Mermaid版本微调，比如有些版本可能是node-Zebra，可以通过浏览器开发者工具查看元素属性确认。

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