Two Minimal Mermaid Theme Styles

Mermaid.js is a powerful tool that lets us generate diagrams and flowcharts quickly using text and code. It’s perfect with Markdown. A clean, fitting theme significantly improves clarity and professionalism.

But the default theme is really ugly, so here are two minimal Mermaid theme configurations.

Original:

Theme 1: Pure white minimal style

To use this theme, just copy the %%{ init: { ... } }%% block into the top of your Mermaid code block.

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

Theme 1 configuration breakdown

Based on the base theme, I customized variables via themeVariables:

• primaryColor: #ffffff (node background - white)
• primaryTextColor: #333333 (node text - dark gray)
• primaryBorderColor: #cccccc (node border - light gray)
• lineColor: #888888 (edge color - mid gray)
• tertiaryColor: #D0E4FF (special node/group background - light blue)
• tertiaryBorderColor: #D0E4FF (special node/group border - light blue)
• tertiaryTextColor: #00A4FF (special node/group text - bright blue)

Theme 2: Elegant business style

The second theme uses a more business-like palette, with soft backgrounds and black borders, suitable for formal documents and reports.

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

Theme 2 configuration breakdown

This theme uses a more professional, business-like palette:

• primaryColor: #F0F4FC (node background - soft blue-gray)
• primaryTextColor: #1F2329 (node text - dark)
• primaryBorderColor: #000000 (node border - black)
• lineColor: #888888 (edge color - mid gray)
• tertiaryColor: #F5F6F7 (special node/group background - light gray)
• tertiaryBorderColor: #F5F6F7 (special node/group border - light gray)
• tertiaryTextColor: #00A4FF (special node/group text - bright blue)

Usage example

Code:

%%{
  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

References

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