用 Obsidian 画 Mermaid 图表的人很多，但知道可以单独给每个图表设置主题的人很少。

不需要插件，不需要写 CSS，只要在代码块开头加一行配置，就能让同一篇笔记里的不同图表呈现完全不同的风格。

这个功能叫 Directives（配置指令），是 Mermaid 的原生能力，Obsidian 完美支持。

0x01 基础用法：一键切换主题

Mermaid 内置 5 个主题：

主题风格
default经典蓝色
neutral黑白灰，适合打印
dark深色模式
forest清新绿色
base可完全自定义

在代码块第一行加上配置指令即可：

  %%{init: {'theme': 'forest'}}%%
graph TD
    A[开始] --> B{是否满意?}
    B -->|是| C[完成]
    B -->|否| D[调整主题]

把 forest 换成其他主题名，立刻生效。

0x02 进阶用法：自定义配色

WARNING

只有 base 主题支持自定义颜色，其他主题是预设的。

通过 themeVariables 可以精确控制每一种颜色：

  %%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#ffcc00',
      'primaryTextColor': '#333',
      'primaryBorderColor': '#333',
      'lineColor': '#ff6b6b'
    }
  }
}%%
graph LR
    A[自定义黄色节点] --> B[红色连线]

核心变量一览

变量作用
primaryColor主要节点背景色
primaryTextColor主要节点文字颜色
primaryBorderColor主要节点边框颜色
secondaryColor次要元素颜色
tertiaryColor第三级元素颜色
lineColor连线颜色
background背景色
fontFamily字体
TIP

大部分颜色变量会自动从 primaryColor 派生，通常只需设置几个关键变量即可。

0x03 深色模式适配

如果你用深色主题，启用 darkMode 让 Mermaid 自动调整对比度：

  %%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'darkMode': true,
      'primaryColor': '#1e40af',
      'primaryTextColor': '#e0e7ff',
      'lineColor': '#60a5fa',
      'background': '#1e1e1e'
    }
  }
}%%
graph TD
    A[深色主题] --> B[自动计算对比度]
    B --> C[阅读更舒适]

0x04 图表类型专属变量

不同类型的图表有各自的专属变量。

流程图

  %%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#e3f2fd',
      'clusterBkg': '#fff3e0',
      'clusterBorder': '#ff9800'
    }
  }
}%%
graph TD
    subgraph 子图区域
        A[节点A] --> B[节点B]
    end
    B --> C[节点C]
变量作用
clusterBkg子图背景色
clusterBorder子图边框色
defaultLinkColor连线颜色
edgeLabelBackground连线标签背景色

时序图

  %%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'actorBkg': '#e8f5e9',
      'actorBorder': '#4caf50',
      'signalColor': '#ff5722',
      'activationBkgColor': '#fff3e0'
    }
  }
}%%
sequenceDiagram
    participant A as 用户
    participant B as 系统
    A->>B: 发送请求
    activate B
    B-->>A: 返回结果
    deactivate B
变量作用
actorBkg / actorBorder角色框样式
signalColor / signalTextColor信号线样式
activationBkgColor / activationBorderColor激活框样式

饼图

  %%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'pie1': '#ff6b6b',
      'pie2': '#4ecdc4',
      'pie3': '#45b7d1',
      'pie4': '#ffa07a'
    }
  }
}%%
pie title 项目分布
    "项目A" : 35
    "项目B" : 25
    "项目C" : 20
    "项目D" : 20
变量作用
pie1 ~ pie12每个扇形的颜色
pieTitleTextSize / pieTitleTextColor标题样式
pieStrokeColor / pieStrokeWidth扇形边框

0x05 推荐配色方案

清新商务风

1
2
3
4
5
6

'primaryColor': '#e3f2fd',
'primaryTextColor': '#1565c0',
'primaryBorderColor': '#1976d2',
'lineColor': '#42a5fa',
'secondaryColor': '#f3e5f5',
'tertiaryColor': '#fff3e0'

  %%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#e3f2fd',
      'primaryTextColor': '#1565c0',
      'primaryBorderColor': '#1976d2',
      'lineColor': '#42a5f5',
      'secondaryColor': '#f3e5f5',
      'tertiaryColor': '#fff3e0'
    }
  }
}%%
graph LR
    A[需求分析] --> B[方案设计]
    B --> C[开发实现]
    C --> D[测试验收]

温暖橙色调

1
2
3
4
5

'primaryColor': '#fff4e6',
'primaryTextColor': '#d84315',
'primaryBorderColor': '#f57c00',
'lineColor': '#ff6f00',
'secondaryColor': '#ffe0b2'

  %%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#fff4e6',
      'primaryTextColor': '#d84315',
      'primaryBorderColor': '#f57c00',
      'lineColor': '#ff6f00',
      'secondaryColor': '#ffe0b2'
    }
  }
}%%
graph LR
    A[创意] --> B[执行]
    B --> C[迭代]
    C --> D[交付]

0x06 注意事项

NOTE
  1. 颜色格式必须是十六进制：用 #ff0000 而不是 red
  2. 配置必须放在第一行：否则不会生效
  3. JSON 格式要正确：注意引号和逗号