问题描述
我有一个文档,其中正在创建许多流程图,这些流程图共享其商品的样式和颜色的通用说明。例如:
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
添加到我制作的每个流程图中。复制并粘贴它们并不是世界末日,但是当您有二十个流程图使它们全部使用相同的样式定义时,并不是最好的方法。
是否可以指定每个文档类型的classDef
或样式在同一类型的所有图之间共享?
解决方法
为此,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-classes
注意:如您在上面看到的,与文档中所建议的不同,!important
指令已添加到某些样式定义中,因为如果未添加,则Mermaid CSS优先于自定义CSS。至少在使用当前版本的Meramaid(8.8.3)的Firefox中就是这种情况。