Mermaid 两个极简主题样式分享

Mermaid.js 是一款强大的工具，它允许我们使用文本和代码快速生成各种图表和流程图。非常适合与 Markdown 结合。一个美观且合适的图表主题能够显著提升信息传递的效率和专业性。

但是他的默认主题实在是太丑了，于是本文分享两个简约风格的 Mermaid 主题配置。

原皮：

主题一：纯白简约风格

要使用此主题，只需将以下 %%{ init: { ... } }%% 配置块复制到你的 Mermaid 代码块的顶部即可。

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#ffffff',
      'primaryTextColor': '#333333',
      'primaryBorderColor': '#cccccc',
      'lineColor': '#888888',
      'tertiaryColor': '#D0E4FF',
      'tertiaryBorderColor': '#D0E4FF',
      'tertiaryTextColor': '#00A4FF'
    }
  }
}%%

主题一配置解析

如上所示，我基于 base 主题魔改了一些自定义样式。通过 themeVariables，调整了颜色方案：

• primaryColor: #ffffff (节点背景色 - 白色)
• primaryTextColor: #333333 (节点文字颜色 - 深灰色)
• primaryBorderColor: #cccccc (节点边框色 - 浅灰色)
• lineColor: #888888 (连接线颜色 - 中灰色)
• tertiaryColor: #D0E4FF (特定节点/分组背景色 - 淡蓝色)
• tertiaryBorderColor: #D0E4FF (特定节点/分组边框色 - 淡蓝色)
• tertiaryTextColor: #00A4FF (特定节点/分组文字颜色 - 亮蓝色)

主题二：淡雅商务风格

第二个主题采用了更加商务化的配色方案，使用淡雅的背景色和黑色边框，更适合正式文档和商务报告。

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#F0F4FC',
      'primaryTextColor': '#1F2329',
      'primaryBorderColor': '#000000',
      'lineColor': '#888888',
      'tertiaryColor': '#F5F6F7',
      'tertiaryBorderColor': '#F5F6F7',
      'tertiaryTextColor': '#00A4FF'
    }
  }
}%%

主题二配置解析

这个主题使用了更加专业和商务化的色彩搭配：

• primaryColor: #F0F4FC (节点背景色 - 淡蓝灰色)
• primaryTextColor: #1F2329 (节点文字颜色 - 深色文本)
• primaryBorderColor: #000000 (节点边框色 - 黑色边框)
• lineColor: #888888 (连接线颜色 - 中灰色)
• tertiaryColor: #F5F6F7 (特定节点/分组背景色 - 浅灰色)
• tertiaryBorderColor: #F5F6F7 (特定节点/分组边框色 - 浅灰色)
• tertiaryTextColor: #00A4FF (特定节点/分组文字颜色 - 亮蓝色)

使用示例

代码如下：

%%{
  init: {
    'theme': 'base',
    'themeVariables': {
      'primaryColor': '#ffffff',
      'primaryTextColor': '#333333',
      'primaryBorderColor': '#cccccc',
      'lineColor': '#888888',
      'tertiaryColor': '#D0E4FF',
      'tertiaryBorderColor': '#D0E4FF',
      'tertiaryTextColor': '#00A4FF'
    }
  }
}%%
graph TD
    subgraph client_subgraph [客户端]
        C1[客户端1]
        C2[客户端2]
        C3[客户端3]
    end

    subgraph server_subgraph [服务器集群]
        S1[服务器1 （健康）]
        S2[服务器2 （健康）]
        S3[服务器3 （不健康）]
        S4[服务器4 （健康）]
    end

    LB{负载均衡器}

    C1 --> LB
    C2 --> LB
    C3 --> LB

    LB -- 健康检查 --> S1
    LB -- 健康检查 --> S2
    LB -- 健康检查 --> S3
    LB -- 健康检查 --> S4

    LB -- 流量分配 --> S1
    LB -- 流量分配 --> S2
    LB -- 流量分配 --> S4

    %% 箭头样式：深灰色，1.5px宽度
    style S3 fill:#f99

参考

• https://mermaid.js.org/config/theming.html