主题配置

Mermaid 8.7.0 版本引入了动态和集成的主题配置。

主题现在可以在站点级别或单个 Mermaid 图表上进行自定义。对于站点范围的主题自定义，使用 initialize 调用。对于图表特定的自定义，使用 init 指令。

可用主题

1. default - 这是所有图表 的默认主题。

2. neutral - 此主题非常适合黑白打印文档。

3. dark - 此主题与深色元素或暗模式很搭配。

4. forest - 此主题包含绿色阴影。

5. base - 这是唯一可以修改的主题。使用此主题作为自定义的基础。

站点范围主题

要自定义站点范围的主题，请在 mermaid 上调用 initialize 方法。

将 theme 设置为 base 的 initialize 调用的示例：

mermaid.initialize({
  securityLevel: 'loose',
  theme: 'base',
});

图表特定主题

要自定义单个图表的主题，请使用 init 指令。

将 theme 设置为 forest 的 init 指令示例：

Code:

提醒: 唯一可以自定义的主题是 base 主题。下一节介绍如何使用 themeVariables 进行自定义。

使用 themeVariables 自定义主题

要创建自定义主题，请通过 init 修改 themeVariables。

您需要使用 base 主题，因为它是唯一可修改的主题。

参数	说明	类型	属性
themeVariables	可使用 init 指令修改	对象	primaryColor, primaryTextColor, lineColor (参见完整列表)

使用 init 指令修改 themeVariables 的示例：

Code:

颜色和颜色计算

为了确保图表可读性，某些变量的默认值是计算的或从其他变量导出的。例如，primaryBorderColor 是从 primaryColor 变量导出的。因此，如果自定义了 primaryColor 变量，Mermaid 将自动调整 primaryBorderColor。调整可能意味着颜色反转、色相变化、变暗/变亮 10% 等。

主题引擎只会识别十六进制颜色，而不会识别颜色名称。因此，值 #ff0000 将起作用，但 red 将不起作用。

主题变量

变量	默认值	说明
darkMode	false	影响导出颜色的计算方式。对于暗模式，将值设置为 true。
background	#f4f4f4	用于计算应使用背景颜色或与背景对比的颜色项目的颜色
fontFamily	trebuchet ms, verdana, arial
fontSize	16px	像素单位的字体大小
primaryColor	#fff4dd	用作节点背景的颜色，其他颜色将从此颜色导出
primaryTextColor	根据 darkMode 计算 #ddd/#333	使用 primaryColor 的节点中的文本颜色
secondaryColor	从 primaryColor 计算导出
primaryBorderColor	从 primaryColor 计算导出	使用 primaryColor 的节点中使用的边框颜色
secondaryBorderColor	从 secondaryColor 计算导出	使用 secondaryColor 的节点中使用的边框颜色
secondaryTextColor	从 secondaryColor 计算导出	使用 secondaryColor 的节点中使用的文本颜色
tertiaryColor	从 primaryColor 计算导出
tertiaryBorderColor	从 tertiaryColor 计算导出	使用 tertiaryColor 的节点中使用的边框颜色
tertiaryTextColor	从 tertiaryColor 计算导出	使用 tertiaryColor 的节点中使用的文本颜色
noteBkgColor	#fff5ad	用作注释背景的颜色
noteTextColor	#333	注释矩形中的文本颜色
noteBorderColor	从 noteBkgColor 计算导出	注释矩形的边框颜色
lineColor	从 background 计算导出
textColor	从 primaryTextColor 计算导出	例如，图表上背景上的文本，例如序列图中的标签和信号上的文本或甘特图中的标题
mainBkg	从 primaryColor 计算导出	流程图对象（如矩形/圆形、类图类、序列图等）中的背景
errorBkgColor	tertiaryColor	语法错误消息的颜色
errorTextColor	tertiaryTextColor	语法错误消息的颜色

流程图变量

变量	默认值	说明
nodeBorder	primaryBorderColor	节点边框颜色
clusterBkg	tertiaryColor	子图中的背景
clusterBorder	tertiaryBorderColor	集群边框颜色
defaultLinkColor	lineColor	链接颜色
titleColor	tertiaryTextColor	标题颜色
edgeLabelBackground	从 secondaryColor 计算导出
nodeTextColor	primaryTextColor	节点内文本的颜色

序列图变量

变量	默认值	说明
actorBkg	mainBkg	角色背景颜色
actorBorder	primaryBorderColor	角色边框颜色
actorTextColor	primaryTextColor	角色文本颜色
actorLineColor	actorBorder	角色线条颜色
signalColor	textColor	信号颜色
signalTextColor	textColor	信号文本颜色
labelBoxBkgColor	actorBkg	标签框背景颜色
labelBoxBorderColor	actorBorder	标签框边框颜色
labelTextColor	actorTextColor	标签文本颜色
loopTextColor	actorTextColor	循环文本颜色
activationBorderColor	从 secondaryColor 计算导出	激活边框颜色
activationBkgColor	secondaryColor	激活背景颜色
sequenceNumberColor	从 lineColor 计算导出	序列号颜色

饼图变量

变量	默认值	说明
pie1	primaryColor	饼图中第一部分的填充
pie2	secondaryColor	饼图中第二部分的填充
pie3	从 tertiary 计算导出	饼图中第三部分的填充
pie4	从 primaryColor 计算导出	饼图中第四部分的填充
pie5	从 secondaryColor 计算导出	饼图中第五部分的填充
pie6	从 tertiaryColor 计算导出	饼图中第六部分的填充
pie7	从 primaryColor 计算导出	饼图中第七部分的填充
pie8	从 primaryColor 计算导出	饼图中第八部分的填充
pie9	从 primaryColor 计算导出	饼图中第九部分的填充
pie10	从 primaryColor 计算导出	饼图中第十部分的填充
pie11	从 primaryColor 计算导出	饼图中第十一部分的填充
pie12	从 primaryColor 计算导出	饼图中第十二部分的填充
pieTitleTextSize	25px	标题文本大小
pieTitleTextColor	taskTextDarkColor	标题文本颜色
pieSectionTextSize	17px	各部分标签的文本大小
pieSectionTextColor	textColor	各部分标签的文本颜色
pieLegendTextSize	17px	图例中标签的文本大小
pieLegendTextColor	taskTextDarkColor	图例中标签的文本颜色
pieStrokeColor	black	各个饼图部分的边框颜色
pieStrokeWidth	2px	各个饼图部分的边框宽度
pieOuterStrokeWidth	2px	饼图外圆的边框宽度
pieOuterStrokeColor	black	饼图外圆的边框颜色
pieOpacity	0.7	各个饼图部分的不透明度

状态颜色

变量	默认值	说明
labelColor	primaryTextColor
altBackground	tertiaryColor	用于深层复合状态中的背景

类颜色

变量	默认值	说明
classText	textColor	类图中文本的颜色

用户旅程颜色

变量	默认值	说明
fillType0	primaryColor	旅程图中第一部分的填充
fillType1	secondaryColor	旅程图中第二部分的填充
fillType2	从 primaryColor 计算导出	旅程图中第三部分的填充
fillType3	从 secondaryColor 计算导出	旅程图中第四部分的填充
fillType4	从 primaryColor 计算导出	旅程图中第五部分的填充
fillType5	从 secondaryColor 计算导出	旅程图中第六部分的填充
fillType6	从 primaryColor 计算导出	旅程图中第七部分的填充
fillType7	从 secondaryColor 计算导出	旅程图中第八部分的填充