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

Question

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

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 -->

现在，我需要将这些classDef添加到我制作的每个流程图中。复制和粘贴它们并不是世界末日，但当你有20个流程图来使用相同的样式定义时，这也不是最好的。

是否有任何方法可以指定在同一类型的所有关系图之间共享的classDef或样式的每个文档集？

Answer 1

为此，Mermaid允许使用CSS：您声明一次CSS类，然后在任何Mermaid定义中使用它们，就像使用classDef声明它们一样。增加的好处是：您实际上可以在样式所属的位置(*.css文件或直接在<style>标记中(声明样式。

JSFiddle示例：https://jsfiddle.net/negbsw0v/

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

相关文件：http://mermaid-js.github.io/mermaid/#/flowchart?id=css-类

注意：正如您在上面看到的，与文档所建议的不同，!important指令被添加到一些样式定义中，因为如果不添加，Mermaid CSS将优先于自定义CSS。至少在当前版本Meramaid(8.8.3(的Firefox中是这样