如何在Mermaid中为菱形、正方形等节点添加双边框？

Mermaid默认仅支持通过ID1(((Text)))语法给圆形节点添加双边框，要给菱形、正方形节点实现同款双边框效果，可通过自定义类名+CSS样式实现，步骤如下：

1. 给目标节点绑定自定义类名 #

在流程图代码中，用:::语法给需要双边框的节点绑定自定义类（比如命名为doubleBorder）：

flowchart LR
    A[普通正方形]
    B:::doubleBorder[双边框正方形]
    C{普通菱形}
    D:::doubleBorder{双边框菱形}

2. 编写自定义CSS样式 #

针对绑定了doubleBorder类的节点，通过CSS设置双层边框样式。注意正方形节点对应SVG的rect元素，菱形对应polygon元素，样式需覆盖这两种类型：

.doubleBorder rect, .doubleBorder polygon {
    stroke: #333; /* 内层边框颜色 */
    stroke-width: 2px; /* 内层边框粗细 */
    outline: 2px solid #333; /* 外层边框样式 */
    outline-offset: -3px; /* 调整偏移量，让双层边框紧密贴合 */
}

完整使用示例 #

在支持自定义CSS的Mermaid环境（如Mermaid在线编辑器、Obsidian等）中，先添加上述CSS代码，再运行流程图代码，即可得到带双边框的菱形、正方形节点，效果与圆形双边框一致。

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