主题
主题配置
🌐 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
redux-color - 适用于列在 Per-diagram defaults 下的图表类型的默认主题。它将
redux的几何和排版与分类颜色调色板搭配使用，因此每个实体、参与者、分支、类、子图容器和图表系列都会有自己的颜色。redux-dark-color -
redux-color的暗色版本。redux - 与
redux-color相同的几何和排版，但使用单色。当你希望颜色表达你自己赋予的意义，而不是按项目循环时，使用这个。redux-dark -
redux的暗色版本。中性 - 这个主题非常适合将要打印的黑白文档。
暗黑 - 这个主题适合深色元素或夜间模式。要在夜间模式（设置背景）下使用暗黑主题（更改模式本身的主题），请在你的配置中将
darkMode设置为true。森林 - 这个主题包含各种绿色调。
neo - 更平整、更柔和的外观，旨在与
look: neo搭配。新暗 -
neo的黑暗对应物。base - 这是唯一可以修改的主题。把这个主题作为自定义的基础。
每个图表的默认设置
🌐 Per-diagram defaults
并不是每种图表类型默认使用相同的主题和样式。由于 v<MERMAID_RELEASE_VERSION> 这些图表会默认使用 redux-color 主题和 neo 样式。左边的名称是 配置键 —— 你写它来为该图表指定设置，这个名称不一定是图表名称的开头关键词：
| 配置键 | 图表 |
|---|---|
agentflow | agentflow-beta |
flowchart | flowchart |
swimlane | swimlane-beta |
class | classDiagram |
er | erDiagram |
requirement | requirementDiagram |
sequence | sequenceDiagram |
state | stateDiagram |
usecase | usecase-beta |
venn | venn-beta |
其他所有图表类型默认使用 default 主题和 classic 外观。
🌐 Every other diagram type defaults to the default theme and the classic look.
layout 的工作方式是一样的。只有 swimlane 会把它覆盖成 swimlane；其他一切都使用全局默认值 dagre。
这些只是默认设置，你说得越具体越优先。优先级最高的放前面：
🌐 These are only defaults, and the most specific thing you say wins. Highest priority first:
- 图表本身的前言或
%%{init}%%指令。 - 你传给
mermaid.initialize()的东西。 - 这个图表类型的默认设置，如上所示。
- 全局默认（
theme: default、look: classic、layout: dagre）。
在正在运行的构建中未注册的布局会回退到 dagre，并在控制台显示警告。elk 作为单独的包发布，需要你自己注册，而 cose-bilkent 仅包含在包含大型功能的构建中，所以将它们中的任意一个设置为默认值并不要求每个构建都必须包含它。
🌐 A layout that is not registered in the running build falls back to dagre, with a warning in the console. elk ships as a separate package you register yourself, and cose-bilkent is only bundled into builds that include the large features, so naming either as a default does not require every build to carry it.
在前两个中，你也可以把一个值限定到某种图表类型，并且限定的值会优先于你同时设置的全局值。theme、look 和 layout 都可以这样设置：
🌐 Within each of the first two you can also scope a value to one diagram type, and the scoped value wins over the global one you set alongside it. theme, look and layout can all be set this way:
javascript
mermaid.initialize({
look: 'classic', // everything is classic...
flowchart: { look: 'handDrawn' }, // ...except flowcharts
er: { theme: 'neutral' },
});在前言部分同样适用，对于一个图表来说：
🌐 The same works in frontmatter, for one diagram:
yaml
---
config:
flowchart:
look: handDrawn
---回到之前的样子
🌐 Going back to the previous appearance
上述九种类型在成为默认类型时改变了外观。要像 Mermaid 之前画的那样画其中一种，需要先说出之前的主题名称，并查看其前言部分：
🌐 The nine types above changed appearance when these became their defaults. To draw one the way Mermaid drew it before, name the previous theme and look in its front matter:
yaml
---
config:
theme: default
look: classic
---对于页面上的每个图表，把同样的两把钥匙传给 mermaid.initialize()：
🌐 For every diagram on a page, pass the same two keys to mermaid.initialize():
javascript
mermaid.initialize({ theme: 'default', look: 'classic' });全站主题
🌐 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:
javascript
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:
代码:
mermaid
提醒：唯一可以自定义的主题是
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:
代码:
mermaid
颜色与颜色计算
🌐 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部分的填充 |