主题
主题配置
🌐 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
- 默认 - 这是所有图表的默认主题。
- 中性 - 这个主题非常适合将要打印的黑白文档。
- 深色 - 这个主题适合深色元素或夜间模式。
- 森林 - 这个主题包含各种绿色调。
- 基础 - 这是唯一可以修改的主题。请使用此主题作为自定义的基础。
全站主题
🌐 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:
提醒：唯一可以自定义的主题是
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
| Variable | Default value | Description |
|---|---|---|
| darkMode | false | Affects how derived colors are calculated. Set value to true for dark mode. |
| background | #f4f4f4 | Used to calculate color for items that should either be background colored or contrasting to the background |
| fontFamily | trebuchet ms, verdana, arial | Font family for diagram text |
| fontSize | 16px | Font size in pixels |
| primaryColor | #fff4dd | Color to be used as background in nodes, other colors will be derived from this |
| primaryTextColor | calculated from darkMode #ddd/#333 | Color to be used as text color in nodes using primaryColor |
| secondaryColor | calculated from primaryColor | |
| primaryBorderColor | calculated from primaryColor | Color to be used as border in nodes using primaryColor |
| secondaryBorderColor | calculated from secondaryColor | Color to be used as border in nodes using secondaryColor |
| secondaryTextColor | calculated from secondaryColor | Color to be used as text color in nodes using secondaryColor |
| tertiaryColor | calculated from primaryColor | |
| tertiaryBorderColor | calculated from tertiaryColor | Color to be used as border in nodes using tertiaryColor |
| tertiaryTextColor | calculated from tertiaryColor | Color to be used as text color in nodes using tertiaryColor |
| noteBkgColor | #fff5ad | Color used as background in notes |
| noteTextColor | #333 | Text color in note rectangles |
| noteBorderColor | calculated from noteBkgColor | Border color in note rectangles |
| lineColor | calculated from background | |
| textColor | calculated from primaryTextColor | Text in diagram over the background for instance text on labels and on signals in sequence diagram or the title in Gantt diagram |
| mainBkg | calculated from primaryColor | Background in flowchart objects like rects/circles, class diagram classes, sequence diagram etc |
| errorBkgColor | tertiaryColor | Color for syntax error message |
| errorTextColor | tertiaryTextColor | Color for syntax error message |
流程图变量
🌐 Flowchart Variables
| 变量 | 默认值 | 描述 |
|---|---|---|
| nodeBorder | primaryBorderColor | 节点边框颜色 |
| clusterBkg | tertiaryColor | 子图背景 |
| clusterBorder | tertiaryBorderColor | 集群边框颜色 |
| defaultLinkColor | lineColor | 链接颜色 |
| titleColor | tertiaryTextColor | 标题颜色 |
| edgeLabelBackground | calculated from secondaryColor | 边标签背景 |
| nodeTextColor | primaryTextColor | 节点内部文本颜色 |
顺序图变量
🌐 Sequence Diagram Variables
| Variable | Default value | Description |
|---|---|---|
| actorBkg | mainBkg | Actor Background Color |
| actorBorder | primaryBorderColor | Actor Border Color |
| actorTextColor | primaryTextColor | Actor Text Color |
| actorLineColor | actorBorder | Actor Line Color |
| signalColor | textColor | Signal Color |
| signalTextColor | textColor | Signal Text Color |
| labelBoxBkgColor | actorBkg | Label Box Background Color |
| labelBoxBorderColor | actorBorder | Label Box Border Color |
| labelTextColor | actorTextColor | Label Text Color |
| loopTextColor | actorTextColor | Loop Text Color |
| activationBorderColor | calculated from secondaryColor | Activation Border Color |
| activationBkgColor | secondaryColor | Activation Background Color |
| sequenceNumberColor | calculated from lineColor | Sequence Number Color |
饼图变量
🌐 Pie Diagram Variables
| Variable | Default value | Description |
|---|---|---|
| pie1 | primaryColor | Fill for 1st section in pie diagram |
| pie2 | secondaryColor | Fill for 2nd section in pie diagram |
| pie3 | calculated from tertiary | Fill for 3rd section in pie diagram |
| pie4 | calculated from primaryColor | Fill for 4th section in pie diagram |
| pie5 | calculated from secondaryColor | Fill for 5th section in pie diagram |
| pie6 | calculated from tertiaryColor | Fill for 6th section in pie diagram |
| pie7 | calculated from primaryColor | Fill for 7th section in pie diagram |
| pie8 | calculated from primaryColor | Fill for 8th section in pie diagram |
| pie9 | calculated from primaryColor | Fill for 9th section in pie diagram |
| pie10 | calculated from primaryColor | Fill for 10th section in pie diagram |
| pie11 | calculated from primaryColor | Fill for 11th section in pie diagram |
| pie12 | calculated from primaryColor | Fill for 12th section in pie diagram |
| pieTitleTextSize | 25px | Title text size |
| pieTitleTextColor | taskTextDarkColor | Title text color |
| pieSectionTextSize | 17px | Text size of individual section labels |
| pieSectionTextColor | textColor | Text color of individual section labels |
| pieLegendTextSize | 17px | Text size of labels in diagram legend |
| pieLegendTextColor | taskTextDarkColor | Text color of labels in diagram legend |
| pieStrokeColor | black | Border color of individual pie sections |
| pieStrokeWidth | 2px | Border width of individual pie sections |
| pieOuterStrokeWidth | 2px | Border width of pie diagram's outer circle |
| pieOuterStrokeColor | black | Border color of pie diagram's outer circle |
| pieOpacity | 0.7 | Opacity of individual pie sections |
状态颜色
🌐 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 部分的填充 |