Markdown Mermaid中的全局或文档范围样式

我有一个文档，其中我正在创建一些流程图，这些流程图共享其项目的样式和颜色的通用图例。例如：

graph TB
  classDef client fill:#D5E8D4,stroke:#82B366,color:#000000;
  classDef utility fill:#E1D5E7,stroke:#9673A6,color:#000000;
  classDef resource fill:#DAE8FC,stroke:#6C8EBF,color:#000000,stroke-dasharray: 3 3;
  <!-- and more -->

图形TB
classDef客户端填充：#D5E8D4，笔划：#82B366，颜色：#000000；
classDef实用程序填充：#E1D5E7，笔划：#9673A6，颜色：#000000；
classDef资源填充：#DAE8FC，笔划：#6C8EBF，颜色：#000000，笔划dasharray:3；

现在，我需要将这些

classDef

s添加到我制作的每个流程图中。复制和粘贴它们并不是世界末日，但当您有二十个流程图使它们都使用相同的样式定义时，这并不是最好的

---

是否有任何方法可以指定每个文档的

classDef

s集合或在同一类型的所有图表之间共享的样式？

为此，Mermaid允许使用CSS：您声明CSS类一次，然后在任何Mermaid定义中使用它们，就像使用

classDef

声明它们一样。增加的好处：您实际上可以声明样式所属的位置（

*.css

文件或直接在

标记中）

JSFIDLE上的示例：

CSS中的某个地方：

.client > rect {
    fill: #D5E8D4 !important;
    stroke: #82B366 !important;
    color: #000000 !important;
}
.utility > rect {
    ...
}
.resource > rect {
    ...
}

在美人鱼的定义中：

graph TB
A --> C
B --> C
class A client
class B resource
class C utility

相关文件：

注意：如上所示，与文档建议的不同，

！重要信息

指令已添加到某些样式定义中，因为如果未添加，Mermaid CSS将优先于自定义CSS。至少在当前版本的Meramaid（8.8.3）的Firefox中是这样