打造梦幻又实用的 Mermaid 马卡龙渐变风主题 —— 技术博主必备视觉指南

Goboy2025-07-11 10:48

在做技术内容的人都知道，图表这东西，说简单也简单，说讲究也很讲究。

一张图画得好，不光能节省大段文字，还能让读者"扫一眼就懂"。尤其像 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 主题和多样样式节点，技术博主们不仅能让内容更具吸引力，也能帮助读者快速抓住核心流程。视觉与内容双管齐下，效果加倍！

相关推荐
用户69190268133918 小时前
LangChain 与 LangGraph：从「链」到「图」，一次讲清它们是什么、什么关系
面试·架构·设计
cyf3118 小时前
程序员到架构师工作和生活反思
程序员·生活·架构师
Thneonl18 小时前
故意弄坏生产：混沌工程不是乱砸，是实验设计
后端·程序员
Thneonl18 小时前
别上来就 strace：60 秒十条命令看清一台病机
后端·程序员
Sam_Deep_Thinking20 小时前
CountDownLatch实现原理
java·后端·面试·程序员
程序员cxuan1 天前
腾讯又来一王炸，开源版 WorkBuddy 太夯了！
人工智能·后端·程序员
阿宸科普1 天前
液冷机组冷却设备，接触器怎么选？三大系列参数与工程校核要点
产品
穆梓兰煊1 天前
WebAssembly AI 推理学习路线图
程序员
洞察万事局1 天前
液冷机组冷却设备，接触器怎么选？一个电气设计的一线记录
产品
穆梓东海1 天前
公司从 400 多人缩减到 100 多人，我开始重新思考程序员的未来
程序员
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05「全语录+省流版」邵艾伦 × 孙宇晨：聊风口、聊个人IP、聊年轻人如何抓住 AI 时代的机会06蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接07轻量化AI渗透武器库｜ARTEX自主攻防系统、资产梳理、漏洞挖掘、链路分析全流程智能化落地08Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新10Telegram APK 下载安装完整指南 — 2026年最新