Mermaid如何设置白底黑字主题？

Question

**问题描述：** 在使用 Mermaid 生成流程图或图表时，默认主题通常是浅色背景配深色文字，但有时需要调整为白底黑字以符合特定文档风格或可访问性要求。然而，Mermaid 的默认主题配置并不直接提供“白底黑字”的选项，因此用户常常不清楚该如何自定义主题样式来实现这一效果。那么，如何通过 Mermaid 的主题设置或自定义 CSS 来实现白底黑字的图表样式？这是使用 Mermaid 过程中一个常见且具有代表性的样式定制问题。

Answer 1

1. Mermaid 图表主题定制概述

Mermaid 是一个流行的开源库，用于在 Markdown 和 HTML 中创建流程图、序列图等可视化图表。默认情况下，Mermaid 提供了几种预设主题（如 default, forest, dark 等），但并没有直接提供“白底黑字”的主题选项。

• 用户常需通过自定义 CSS 或修改现有主题来实现视觉风格的调整。
• 理解 Mermaid 的主题机制和样式注入方式是解决此问题的关键。

2. 分析：为何无法直接设置白底黑字？

Mermaid 使用 JSON 格式定义其内置主题。例如，默认主题如下所示：

{
  "theme": "default",
  "themeVariables": {
    "primaryColor": "#ffe4cc",
    "primaryBorderColor": "#000",
    ...
  }
}

属性	含义
primaryColor	节点主色
primaryBorderColor	边框颜色

虽然可以通过配置 themeVariables 修改颜色，但这些变量并不完全覆盖所有元素（如背景、字体等）。

3. 解决方案一：使用自定义 CSS 覆盖默认样式

推荐做法是通过自定义 CSS 来强制将图表区域的背景设为白色，文字设为黑色。

1. 在 HTML 页面中添加如下 CSS 代码：

.mermaid {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.mermaid .node rect,
.mermaid .edge {
  fill: #ffffff !important;
  stroke: #000000 !important;
}

4. 解决方案二：自定义 Mermaid 主题配置

也可以通过 JavaScript 设置 Mermaid 的主题配置对象，覆盖关键颜色变量。

```js mermaid.initialize({ theme: 'base', themeVariables: { primaryColor: '#ffffff', primaryBorderColor: '#000000', lineColor: '#000000', textColor: '#000000', background: '#ffffff' } }); ``` graph TD A[开始] --> B{是否需要白底黑字} B -->|是| C[应用自定义CSS或主题] B -->|否| D[使用默认主题]

5. 高级技巧：结合 CSS 和 JS 实现动态切换

若需支持用户切换不同主题，可以编写一个简单的切换函数，并结合 CSS 类名进行控制。

```js function setWhiteTheme() { document.querySelector('.mermaid').classList.add('white-theme'); mermaid.initialize({ theme: 'base', themeVariables: { primaryColor: '#ffffff', textColor: '#000000', background: '#ffffff' } }); } ``` <style> .white-theme { background-color: #ffffff !important; color: #000000 !important; } </style>