主题配置

🌐 Theme Configuration

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

🌐 Dynamic and integrated theme configuration was introduced in Mermaid version 8.7.0.

主题现在可以在全站范围内或单个 Mermaid 图表上进行自定义。对于全站范围的主题自定义，使用 initialize 调用。对于特定图表的自定义，使用 frontmatter 配置。

🌐 Themes can now be customized at the site-wide level, or on individual Mermaid diagrams. For site-wide theme customization, the initialize call is used. For diagram specific customization, frontmatter config is used.

可用主题

🌐 Available Themes

1. 默认 - 这是所有图表的默认主题。
2. 中性 - 这个主题非常适合将要打印的黑白文档。
3. 深色 - 这个主题适合深色元素或夜间模式。
4. 森林 - 这个主题包含各种绿色调。
5. 基础 - 这是唯一可以修改的主题。请使用此主题作为自定义的基础。

全站主题

🌐 Site-wide Theme

要在整个网站范围内自定义主题，请在 mermaid 上调用 initialize 方法。

🌐 To customize themes site-wide, call the initialize method on the mermaid.

initialize 调用示例，将 theme 设置为 base:

🌐 Example of initialize call setting theme to base:

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

图表特定主题

🌐 Diagram-specific Themes

要自定义单个图表的主题，请使用 frontmatter 配置。

🌐 To customize the theme of an individual diagram, use frontmatter config.

将 theme 设置为 forest 的 frontmatter 配置示例：

🌐 Example of frontmatter config setting the theme to forest:

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

使用 themeVariables 自定义主题

🌐 Customizing Themes with themeVariables

要制作自定义主题，请通过 frontmatter 配置修改 themeVariables。

🌐 To make a custom theme, modify themeVariables via frontmatter config.

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

🌐 You will need to use the base theme as it is the only modifiable theme.

参数	描述	类型	属性
themeVariables	可通过 frontmatter 配置修改	对象	primaryColor, primaryTextColor, lineColor (查看完整列表)

使用 frontmatter 配置修改 themeVariables 的示例：

🌐 Example of modifying themeVariables using frontmatter config:

颜色与颜色计算

🌐 Color and Color Calculation

为了确保图表的可读性，某些变量的默认值是通过计算或从其他变量派生得出的。例如，primaryBorderColor 是从 primaryColor 变量派生的。因此，如果自定义了 primaryColor 变量，Mermaid 会自动调整 primaryBorderColor。调整可能包括颜色反转、色相变化、加深或变亮约 10% 等。

🌐 To ensure diagram readability, the default value of certain variables is calculated or derived from other variables. For example, primaryBorderColor is derived from the primaryColor variable. So if the primaryColor variable is customized, Mermaid will adjust primaryBorderColor automatically. Adjustments can mean a color inversion, a hue change, a darkening/lightening by 10%, etc.

主题引擎只会识别十六进制颜色，而不会识别颜色名称。因此，#ff0000 可以使用，但 red 不行。

🌐 The theming engine will only recognize hex colors and not color names. So, the value #ff0000 will work, but red will not.

主题变量

🌐 Theme Variables

| 变量 | 默认值 | 描述 |

| --- | --- | --- |

| darkMode | false | 影响派生颜色的计算方式。将值设置为 true 以启用夜间模式。 |

| 背景 | #f4f4f4 | 用于计算颜色，以便对应该使用背景色或与背景形成对比的项目 |

| 字体家族 | trebuchet ms, verdana, arial | 图表文本的字体家族 |

| 字体大小 | 16像素 | 以像素为单位的字体大小 |

| primaryColor | #fff4dd | 用作节点背景的颜色，其他颜色将从此颜色派生 |

| primaryTextColor | 从夜间模式 #ddd/#333 计算得出 | 用于在使用 primaryColor 的节点中作为文本颜色的颜色 |

| secondaryColor | 由 primaryColor 计算得出 | |

| primaryBorderColor | 从 primaryColor 计算得出 | 用作使用 primaryColor 的节点的边框颜色 |

| secondaryBorderColor | 从 secondaryColor 计算得出 | 用作使用 secondaryColor 的节点的边框颜色 |

| secondaryTextColor | 从 secondaryColor 计算得出 | 用作使用 secondaryColor 的节点的文字颜色 |

| 第三色 | 根据主色计算 | |

| tertiaryBorderColor | 从 tertiaryColor 计算得出 | 用于在使用 tertiaryColor 的节点中作为边框的颜色 |

| tertiaryTextColor | 从 tertiaryColor 计算得出 | 用作使用 tertiaryColor 的节点的文字颜色 |

| noteBkgColor | #fff5ad | 用作注意背景的颜色 |

| noteTextColor | #333 | 注意矩形中的文字颜色 |

| noteBorderColor | 根据 noteBkgColor 计算 | 注意矩形的边框颜色 |

| 线条颜色 | 根据背景计算 | |

| 文本颜色 | 从 primaryTextColor 计算得出 | 图表中的文字，例如标签上的文字、时序图中的信号文字或甘特图中的标题 |

| mainBkg | 从 primaryColor 计算 | 流程图对象（如矩形/圆形）、类图类、时序图等的背景

| errorBkgColor | tertiaryColor | 语法错误信息的颜色 |

| errorTextColor | tertiaryTextColor | 语法错误信息的颜色 |

流程图变量

🌐 Flowchart Variables

变量	默认值	描述
nodeBorder	primaryBorderColor	节点边框颜色
clusterBkg	tertiaryColor	子图的背景
clusterBorder	tertiaryBorderColor	集群边框颜色
defaultLinkColor	lineColor	链接颜色
titleColor	tertiaryTextColor	标题颜色
edgeLabelBackground	calculated from secondaryColor
nodeTextColor	primaryTextColor	节点内文本颜色

顺序图变量

🌐 Sequence Diagram Variables

变量	默认值	描述
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 计算	序列号颜色

饼图变量

🌐 Pie Diagram Variables

| 变量 | 默认值 | 描述 |

| --- | --- | --- |

| pie1 | primaryColor | 饼图第一部分的填充颜色 |

| pie2 | secondaryColor | 饼图第二部分的填充颜色 |

| pie3 | 从三级计算 | 饼图第三部分的填充 |

| 饼图4 | 从主色计算 | 饼图第四部分的填充 |

| pie5 | 从 secondaryColor 计算得出 | 饼图第5部分的填充色 |

| pie6 | 从 tertiaryColor 计算得出 | 饼图第六部分的填充色 |

| pie7 | 根据 primaryColor 计算 | 饼图第七部分的填充 |

| pie8 | 根据 primaryColor 计算 | 饼图第八部分的填充 |

| pie9 | 根据 primaryColor 计算 | 饼图第九部分的填充 |

| pie10 | 根据 primaryColor 计算 | 饼图第十部分的填充 |

| pie11 | 根据 primaryColor 计算 | 饼图第11部分的填充 |

| pie12 | 根据 primaryColor 计算 | 饼图第12部分的填充 |

| pieTitleTextSize | 25px | 标题文字大小 |

| pieTitleTextColor | taskTextDarkColor | 标题文字颜色 |

| pieSectionTextSize | 17px | 各部分标签的文字大小 |

| pieSectionTextColor | textColor | 各部分标签的文本颜色 |

| pieLegendTextSize | 17px | 图例中标签的文字大小 |

| pieLegendTextColor | taskTextDarkColor | 图例标签的文字颜色 |

| pieStrokeColor | 黑色 | 单个饼图部分的边框颜色 |

| pieStrokeWidth | 2px | 各个饼图部分的边框宽度 |

| pieOuterStrokeWidth | 2px | 饼图外圈的边框宽度 |

| pieOuterStrokeColor | 黑色 | 饼图外圆的边框颜色 |

| pieOpacity | 0.7 | 各个饼图部分的不透明度 |

状态颜色

🌐 State Colors

变量	默认值	描述
labelColor	primaryTextColor
altBackground	tertiaryColor	用于深度组合状态下的背景

类颜色

🌐 Class Colors

变量	默认值	描述
classText	textColor	类图中文本的颜色

用户旅程颜色

🌐 User Journey Colors

变量	默认值	描述
fillType0	primaryColor	行程图第1部分的填充
fillType1	secondaryColor	行程图第2部分的填充
fillType2	由primaryColor计算	行程图第3部分的填充
fillType3	由secondaryColor计算	行程图第4部分的填充
fillType4	由primaryColor计算	行程图第5部分的填充
fillType5	由secondaryColor计算	行程图第6部分的填充
fillType6	由primaryColor计算	行程图第7部分的填充
fillType7	由secondaryColor计算	行程图第8部分的填充