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

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

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

相关推荐
一只叫煤球的猫3 小时前
【🤣离谱整活】我写了一篇程序员掉进 Java 异世界的短篇小说
java·后端·程序员
你的人类朋友4 小时前
🫏光速入门cURL
前端·后端·程序员
UI罐头7 小时前
后台设计指南:系统架构、交互规范与工具实战全流程解析
ui·设计·设计工具
舒一笑7 小时前
PandaCoder重大产品更新-引入Jenkinsfile文件支持
后端·程序员·intellij idea
大葱白菜8 小时前
🧩 Java 枚举详解:从基础到实战,掌握类型安全与优雅设计
java·程序员
大葱白菜8 小时前
🧱 Java 抽象类详解:从基础到实战,掌握面向对象设计的核心基石
后端·程序员
SimonKing8 小时前
颠覆传统IO:零拷贝技术如何重塑Java高性能编程?
java·后端·程序员
陈随易9 小时前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
天天摸鱼的java工程师10 小时前
每个程序员的周五下午,都像重温高中放学的快乐
前端·后端·程序员
不简说11 小时前
史诗级更新!sv-print虽然不是很强,但却是很能打的设计器组件
前端·产品