在做技术内容的人都知道，图表这东西，说简单也简单，说讲究也很讲究。
一张图画得好，不光能节省大段文字，还能让读者"扫一眼就懂"。尤其像 Mermaid 这种纯文本画图工具，轻巧灵活，又不用学复杂语法，确实挺适合开发者和技术写作者。
不过，Mermaid 默认的样式说实话有点"程序员审美"：功能是有的，但太素。想让图表好看点、有点风格？那就得动动它的主题配置了。
我这次整理了几套 Mermaid 主题，风格不尽相同：有适合方案汇报的"商务蓝"，也有偏自然手绘的"原生态风"； 还有点"花园系"的温柔配色，甚至也准备了喜欢极简黑白风的版本。都是我平时写文章时自己调出来的，有的参考了配色网站，有的是用来配合特定 Markdown 主题的。现在整理出来分享给大家。
每套配置都转成了标准 JSON 格式，直接复制贴进去就能用，不需要额外插件。适配大部分支持 Mermaid 的平台，比如 GitHub、Notion、Obsidian，或者你自己的网站。
节点样式
Mermaid 不只可以调颜色，它支持的节点类型也挺丰富。比如标准的矩形框、判断流程的菱形框、附注、子流程等等。 你可以根据内容选择不同形状，加点区分；再配上主题色和线条样式，整个图表会比默认样式更清晰，也更有"层次感"。 像下面这样简单配个判断分支的图，看着是不是就比纯黑白顺眼多了：
css
%%{ init: { "theme": "base", "themeVariables": { /* 将上面 JSON 复制到这里 */ } } }%%
graph LR
A[🍓 起点] --> B((⛅ 过程节点))
B --> C{{🎯 判断条件}}
C -- 是 --> D>🌈 完成阶段]
C -- 否 --> E([🧁 回退重试])[]方形，适合常规步骤，配上浅粉色背景，甜美又醒目。()圆角节点，像气泡糖般柔和，适合中间环节。{{}}菱形判断节点，带有果冻感的渐变色，强调逻辑分支。>右尖角卡片，增强重点或完成状态的视觉感。
技术博主不一定非要追求视觉设计，但在写东西时让人"愿意看完"，有时候图表的舒服程度也挺关键的。希望这些主题配置，能让你的 Mermaid 图表，看着顺眼，用着顺手。
马卡龙渐变风主题 JSON 配置
这套主题基于 Mermaid 的 themeVariables，通过调整背景、文字、边框和节点颜色，营造出典型的糖果色彩氛围。
css
{
"theme": "base",
"themeVariables": {
"background": "#ffffff",
"primaryColor": "#fbcfe8",
"primaryTextColor": "#4b5563",
"primaryBorderColor": "#f472b6",
"lineColor": "#f9a8d4",
"textColor": "#4b5563",
"mainBkg": "#a5f3fc",
"secondaryColor": "#fde68a",
"tertiaryColor": "#c4b5fd",
"nodeBorder": "#fda4af",
"nodeTextColor": "#1f2937",
"fontFamily": "Fira Code, JetBrains Mono, sans-serif",
"fontSize": "15px",
"noteBkgColor": "#fef9c3",
"noteTextColor": "#78350f",
"actorBkg": "#d8b4fe",
"actorBorder": "#a78bfa",
"sequenceNumberColor": "#f472b6",
"classText": "#6b21a8",
"classBackground": "#fbcfe8",
"classBorder": "#d946ef",
"labelBoxBkgColor": "#fef3c7",
"labelBoxBorderColor": "#facc15"
}
}这段配置将 Mermaid 图表的主色调设为粉紫、天蓝、浅黄等甜美色，结合柔和的边框和文字颜色，打造和谐统一的视觉效果。
🟢 1. 复古 DOS 彩色字符风 (retro-dos)
json
{
"theme": "base",
"themeVariables": {
"darkMode": true,
"background": "#000000",
"primaryColor": "#00ffff",
"primaryTextColor": "#ffffff",
"primaryBorderColor": "#00ffff",
"lineColor": "#ff00ff",
"textColor": "#39ff14",
"nodeTextColor": "#ffff00",
"mainBkg": "#0000aa",
"secondaryColor": "#aa00aa",
"tertiaryColor": "#00aa00",
"nodeBorder": "#aaaaaa",
"fontFamily": "Courier New, monospace",
"fontSize": "15px",
"noteBkgColor": "#550055",
"noteTextColor": "#ffff00",
"actorBkg": "#005f87",
"actorBorder": "#d7005f",
"sequenceNumberColor": "#00d7af",
"classText": "#ffffff",
"classBackground": "#5f00af",
"classBorder": "#ff5f00",
"labelBoxBkgColor": "#005f5f",
"labelBoxBorderColor": "#5fff00"
}
}
🍹 2. 夏日果汁风 (summer-juice)
css
{
"theme": "base",
"themeVariables": {
"background": "#fdf6e3",
"primaryColor": "#fcd34d",
"primaryTextColor": "#1f2937",
"primaryBorderColor": "#fb923c",
"lineColor": "#f87171",
"textColor": "#374151",
"mainBkg": "#f9a8d4",
"secondaryColor": "#fcd34d",
"tertiaryColor": "#6ee7b7",
"nodeBorder": "#f97316",
"nodeTextColor": "#111827",
"fontFamily": "Poppins, sans-serif",
"fontSize": "15px",
"noteBkgColor": "#fff7ed",
"noteTextColor": "#78350f",
"actorBkg": "#facc15",
"actorBorder": "#f59e0b",
"sequenceNumberColor": "#10b981",
"classText": "#1e293b",
"classBackground": "#fcd34d",
"classBorder": "#fb923c",
"labelBoxBkgColor": "#fde68a",
"labelBoxBorderColor": "#fbbf24"
}
}
🎨 3. 手绘彩笔风 (handdrawn-pastel)
css
{
"theme": "base",
"themeVariables": {
"background": "#fffaf0",
"primaryColor": "#e0bbff",
"primaryTextColor": "#3c3c3c",
"primaryBorderColor": "#b388eb",
"lineColor": "#f694c1",
"textColor": "#444",
"mainBkg": "#caffbf",
"secondaryColor": "#bdb2ff",
"tertiaryColor": "#ffd6a5",
"nodeBorder": "#a0c4ff",
"nodeTextColor": "#333",
"fontFamily": "Comic Sans MS, cursive",
"fontSize": "14px",
"noteBkgColor": "#fdffb6",
"noteTextColor": "#6c584c",
"actorBkg": "#ffd6a5",
"actorBorder": "#ffadad",
"sequenceNumberColor": "#bdb2ff",
"classText": "#3c3c3c",
"classBackground": "#e0bbff",
"classBorder": "#d291bc",
"labelBoxBkgColor": "#fffffc",
"labelBoxBorderColor": "#e2e2e2"
}
}
🧊 4. 冰蓝理工风 (tech-ice)
json
{
"theme": "base",
"themeVariables": {
"darkMode": true,
"background": "#0f172a",
"primaryColor": "#38bdf8",
"primaryTextColor": "#e0f2fe",
"primaryBorderColor": "#0ea5e9",
"lineColor": "#7dd3fc",
"textColor": "#cbd5e1",
"mainBkg": "#1e3a8a",
"secondaryColor": "#64748b",
"tertiaryColor": "#7dd3fc",
"nodeBorder": "#60a5fa",
"nodeTextColor": "#f0f9ff",
"fontFamily": "JetBrains Mono, monospace",
"fontSize": "14px",
"noteBkgColor": "#1e40af",
"noteTextColor": "#93c5fd",
"actorBkg": "#0ea5e9",
"actorBorder": "#0284c7",
"sequenceNumberColor": "#bae6fd",
"classText": "#e0f2fe",
"classBackground": "#1e3a8a",
"classBorder": "#0284c7",
"labelBoxBkgColor": "#172554",
"labelBoxBorderColor": "#38bdf8"
}
}
💜 5. 紫气东来梦幻风 (ethereal-purple)
css
{
"theme": "base",
"themeVariables": {
"background": "#faf5ff",
"primaryColor": "#e9d5ff",
"primaryTextColor": "#4c1d95",
"primaryBorderColor": "#c084fc",
"lineColor": "#a78bfa",
"textColor": "#4b0082",
"mainBkg": "#d8b4fe",
"secondaryColor": "#f5d0fe",
"tertiaryColor": "#c4b5fd",
"nodeBorder": "#c084fc",
"nodeTextColor": "#3f3f46",
"fontFamily": "Georgia, serif",
"fontSize": "15px",
"noteBkgColor": "#f3e8ff",
"noteTextColor": "#6b21a8",
"actorBkg": "#c4b5fd",
"actorBorder": "#a78bfa",
"sequenceNumberColor": "#7e22ce",
"classText": "#4c1d95",
"classBackground": "#e9d5ff",
"classBorder": "#a855f7",
"labelBoxBkgColor": "#f3e8ff",
"labelBoxBorderColor": "#c084fc"
}
}
如何使用
你可以在 Markdown、博客平台或者 Mermaid 在线编辑器中，通过初始化配置覆盖默认主题：
css
%%{ init: { "theme": "base", "themeVariables": { /* 主题 JSON 配置粘贴这里 */ } } }%%
graph LR
A[🍓 起点] --> B((⛅ 过程节点))
B --> C{{🎯 判断条件}}
C -- 是 --> D>🌈 完成阶段]
C -- 否 --> E([🧁 回退重试])
如果你用的是 Mermaid API，也可以直接传入 JSON 对象做初始化。
通过这套 Mermaid 主题和多样样式节点，技术博主们不仅能让内容更具吸引力，也能帮助读者快速抓住核心流程。视觉与内容双管齐下，效果加倍！