如何设置Mermaid图形形状与文本透明度并隐藏边注释背景？

针对你遇到的边注释（边上的文本标签）背景无法隐藏的问题，可通过在linkStyle中添加fill:transparent或fill:none彻底移除标签背景，配合文本透明度控制实现完全隐藏效果。

优化后的帧代码示例 #

第一帧（仅显示Start节点） #

start[Start]
    middle[Process]
    stop[Stop]

    start -- calls --> middle
    middle -- notifies --> stop

    %% 隐藏中间节点、对应边及标签
    linkStyle 0 opacity:.1, color:#0001, fill:transparent
    style middle opacity:.1, color:#0001

    %% 隐藏结束节点、对应边及标签
    linkStyle 1 opacity:.1, color:#0001, fill:transparent
    style stop opacity:.1, color:#0001

中间帧（显示Start和Process节点及连接） #

start[Start]
    middle[Process]
    stop[Stop]

    start -- calls --> middle
    middle -- notifies --> stop

    %% 恢复中间节点和对应边的显示
    %% linkStyle 0 opacity:.1, color:#0001, fill:transparent
    %% style middle opacity:.1, color:#0001

    %% 隐藏结束节点、对应边及标签
    linkStyle 1 opacity:.1, color:#0001, fill:transparent
    style stop opacity:.1, color:#0001

最后一帧（显示所有节点和边） #

start[Start]
    middle[Process]
    stop[Stop]

    start -- calls --> middle
    middle -- notifies --> stop

    %% 恢复所有元素显示
    %% linkStyle 0 opacity:.1, color:#0001, fill:transparent
    %% style middle opacity:.1, color:#0001

    %% linkStyle 1 opacity:.1, color:#0001, fill:transparent
    %% style stop opacity:.1, color:#0001

关键样式说明 #

• fill:transparent：直接移除边注释的背景填充，解决背景残留问题
• opacity：控制节点和边的整体透明度
• color:#0001：十六进制颜色值的最后一位控制文本透明度（00为完全透明，FF为完全不透明）

额外优化建议 #

为减少重复代码的繁琐，可使用classDef定义通用隐藏样式，通过类名快速批量设置元素状态：

classDef hidden opacity:.1, color:#0001;
    classDef linkHidden opacity:.1, color:#0001, fill:transparent;

    start[Start]
    middle[Process]
    stop[Stop]

    start -- calls --> middle
    middle -- notifies --> stop

    %% 第一帧：隐藏中间、结束节点及对应边
    class middle hidden;
    class stop hidden;
    linkStyle 0 class linkHidden;
    linkStyle 1 class linkHidden;

后续帧只需注释/取消注释对应的class绑定即可，简化操作流程。

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