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

【问题标题】：Global or document-wide styles in MermaidMermaid 中的全局或文档范围样式
【发布时间】：2020-11-09 02:35:47
【问题描述】：

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

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

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

有没有办法指定每个文档的classDefs 集或在所有相同类型的图表之间共享的样式？

【问题讨论】：

标签： markdown mermaid

【解决方案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

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

【讨论】：