research-svg：给文章配一张论文级的图

research-svg 是本仓库里最常用的一个技能：为博客文章生成科研论文风格的 SVG 配图——就是 Nature / Science 论文里那种 Figure，白底、细线、克制的配色、带面板角标（A/B/C）和图注，而不是营销页的花哨插画。

全站教程系列（Java 并发、Redis、RabbitMQ、MySQL、Spring、LangChain4j、MinIO、网关熔断……）里的 90 多张配图都出自它。

它解决什么问题

技术博客的配图通常两个极端：要么随手截图、示意含糊；要么用绘图工具拖出一堆渐变、阴影、图标，风格像 PPT 而不像技术文章。这个技能把配图统一到「期刊插图」的审美上：

• 白底卡片：显式画出白色画布，深浅色主题下都像一张论文插图，可读性稳定；
• 自包含：产出是纯静态 SVG，不引用外部字体、图片、脚本，放进任何页面都能独立渲染；
• 宽度适配：默认 820px 画布宽，正好匹配博客内容栏。

六类模板

技能内置六类模板，覆盖技术文章几乎所有的配图场景：

模板	适用
流程图	请求链路、算法步骤、生命周期
分层架构图	系统结构、模块分层、部署拓扑
标注式原理图	数据结构、内存布局、机制标注
对比图	正反方案、前后对照（A/B 面板）
数据图	条形对比、耗时/容量示意
时间线	历史演进、版本迭代

模板定义了视觉语言，每张图以对应模板为起点改内容，保证全站配图风格一致。

设计语言

配色采用 Nature 期刊常用的 NPG 学术色系：

角色	色值	用途
主色·深蓝	#3C5488	标题、主要结构、面板角标
辅色·青	#4DBBD5	次要模块、第二类元素
辅色·青绿	#00A087	目标态、成功/通过
强调·红	#E64B35	警示、关键差异（一张图最多一处）
辅助·橙	#F39B7F	反馈回路、第三类元素
辅助·灰紫	#8491B4	背景层、弱化元素

几条「科研感」的核心规则：

• 模块填充一律低饱和（palette 色 + 10%~15% 透明度 + 同色描边），像论文示意图的「彩窗描边」画法；
• 一张图的主色不超过 3 种，同一流程的同类节点用同一颜色；
• 红色只留给最关键的警示或差异点；
• 文字永远用墨色或次灰，palette 色只上图形不上文字。

排版上也有讲究：中文字体栈兜底（Noto Sans SC → PingFang SC → Microsoft YaHei），最小字号 11px；图注固定在底部居中（图 N｜一句话描述），多面板图左上角加粗体角标 A / B / C——这是最有「论文味」的元素。

直接看两张示例

两张都是白底、自包含的静态 SVG：显式画出白色画布，深浅色主题下都保持「论文插图卡片」的可读性。

产出与引用

图片就放在文章自己的资源目录里——与 .md 同级的同名文件夹（Hexo 的 post asset folder 机制），发布后图片直接位于文章 URL 之下；文章里写相对文件名引用：

![图1：三智能体架构](<文件名>.svg)

在哪里能看到实例

站内各教程系列文章里随处可见，比如：

• Java 并发系列：JVM 运行时数据区、ConcurrentHashMap putVal 流程、锁升级路径
• Redis 系列：RDB/AOF 持久化、Cluster 槽位分片、Redisson 看门狗
• Spring 系列：Bean 八步生命周期、三级缓存解循环依赖、事务传播三面板
• AI 系列：LangChain4j 工具调用循环、RAG 摄入/检索双管道

如果想了解某个系列的全部配图，到对应文章里翻即可——它们共享同一套视觉语言。