system-design-notes 配图体检
判据来源：cathrynlavery/diagram-design（44 类编辑级图表设计系统，v2.6.x）
结论
这批配图不是 diagram-design 生成物 —— 它们是上游仓库 liquidslr/system-design-notes
转存的原书插图（Alex Xu《System Design Interview》Vol.1/Vol.2），共三种来源风格混排。
用 diagram-design 的判据逐条对照，结果分两类：
- 风格类判据大面积不达标：配色、连接器、无栅格化字体这三块全部违规，但它们属于「原书就是这么画的」， 不是这次转换引入的缺陷，强行重绘 387 张图不现实。
- 工程类判据存在真实可修缺陷：387 张图清一色白底栅格（379/387）、
0 张带
width/height、单文件 43 MiB、暗色主题下会眩光 —— 这几条是本次交付里能直接修的。
所以下面的清单按「值不值得动手」排序，而不是按「违反了几条规范」排序。
<img> 补上了 width/height：实测 387 / 387 张（已与 Pillow 逐图交叉核验，387/387 一致）。P0 第 2、3 条（单文件体积、暗色主题白底眩光）仍未处理；重绘图本身已跟随深浅主题。一、判据映射：哪些能查，哪些查不了
diagram-design 的 §9 Pre-Output Checklist 约 30 条，但绝大多数检查的是 SVG DOM
（role="img"、aria-labelledby、viewBox、r=8 圆角、4px 网格、字体族）。
这批配图已经栅格化成 WebP，矢量信息不存在，所以必须先切一刀：
| 判据 | 能否用于栅格图 | 本次怎么处理 |
|---|---|---|
| §4 反模式（阴影、同款盒子、多强调色） | 能（像素可测） | 机检配色 + 抽样目检 |
| §5 设计系统（单一强调色、1–2 焦点） | 能（色相统计） | 已量化，见 §3 |
| §7 复杂度预算（≤9 节点 / ≤12 箭头） | 不能 | 栅格图无法数节点，仅目检 |
| §6 六条连接器规则 | 不能 | 需矢量数据；但斜向连线人眼可辨，已在证据图标注 |
| §9 可访问性契约（role/aria/title/desc） | 不适用图片；适用于页内 2 个内联 SVG | 已查出：用 aria-label 而非 aria-labelledby+<title> |
| §5 字体族（Instrument Serif / Geist） | 不能 | 已栅格化，字体不可考 |
| §7 4px 网格 | 不能 | 同上 |
| §12 输出（单文件、离线、PNG/SVG 导出） | 能 | 已检（单文件 ✓ / 体积 ✗） |
work/audit-diagrams.py 对像素与 HTML 的实测，可复跑复现。
二、工程类缺陷（本次能修，按优先级）
已修 387 张 <img> 全部补齐宽高，CLS 已消除
构建脚本现在直接解 WebP 容器头（VP8X / VP8L / VP8）取真实尺寸，给每个内容图补上 width="原生宽" height="原生高"，实测 387 / 387 张；剩余 1 张是灯箱占位图 #large-image，本就不该有固定尺寸。已与 Pillow 逐图解码结果交叉核验，387/387 一致。
CSS 侧保留 img{max-width:100%;height:auto}，补属性不影响自适应缩放。
P0单文件 43 MiB，配图 31.8 MiB 无损 WebP
387 张图按原始分辨率转无损 WebP 内嵌 base64，base64 本身再膨胀 33%。 体积分布见下，最重的 10 张占了相当比例。
修法：① 线条类图改用 quality=85 有损 WebP（这类图有损压缩几乎无损视觉，体积常降 60–80%）；
② 生成 2× / 1× 两档 + srcset，移动端不再下载 2000px 原图；
③ 最重的 10 张单独复检。
P0暗色主题下 379 张白底图会眩光，1 张暗色截图会变黑块
页面有 body.dark{--bg:#17231d} 暗色主题，但配图清一色纯白底（379/387 张四角均值 >245）。
在暗底白字环境里插入满屏白块，是阅读疲劳的主要来源。
反过来的问题只有一张：grafana-dashboard.png.webp（1862×1454，716 KB）本身是暗色截图，
在亮色主题下反而是一块黑。它是全站唯一 corner_avg 落在深色区的图。
| 章节 | 图 | 尺寸 | 四角均值 | 体积 |
|---|---|---|---|---|
| 20. Metrics Monitoring and | metrics-example-1 | 1646×462 | 140.3 | 53 KB |
| 21. Ad Click Event Aggrega | lambda-architecture | 1868×716 | 191.2 | 17 KB |
| 23. Distributed Email Serv | dns-lookup | 1494×546 | 217.5 | 369 KB |
| 18. Google Maps | zoom-level-increases | 1258×1630 | 240.5 | 727 KB |
| 27. Digital Wallet | sharded-raft-groups | 1428×1564 | 240.8 | 50 KB |
| 20. Metrics Monitoring and | grafana-dashboard | 1862×1454 | 241.0 | 716 KB |
| 23. Distributed Email Serv | local-dir-storage | 920×1166 | 242.5 | 6 KB |
| 28. Stock Exchange | product-order-execution-data-model | 1354×1560 | 243.0 | 151 KB |
修法：给 .prose img 加暗色态处理 —— 要么 background:#fff 保持原样但降亮度
（filter:brightness(.92)），要么统一加 1px 描边 + 8px 圆角让它「像一张插图卡」而不是「一块发光板」。
Grafana 那张加 <figcaption> 标注「截图，非示意图」。
P1配色违反「单一强调色」，87 张图含 ≥4 个色相族
diagram-design §5：一个强调色，每图 1–2 个焦点元素。实测 174 张彩色图里， 87 张（50%）同时出现 4 个以上色相族，只有 63 张收敛在 2 个以内。 最典型的是青 / 绿 / 紫 / 橙四色成体系（原书用颜色区分类别，而不是标记焦点）。
全站出现频次最高的非灰颜色：
#7ebb4326#2c72b624#f7c4fd11#f7c5fd11#cafdff9#3bb4db9#fffec48#3bb4da8#7ebb427#ccfcc46#2d72b65#fefdc35
修法：这个不建议改 —— 颜色在这批图里承担语义（蓝=服务、绿=存储、紫=复制）， 改成单色会丢信息。正确做法是承认它、并在页面上把「配图 = 原书插图」讲清楚（现在 README 已经这么写了）。 真要统一，只统一页面自身的元素（第 1/2/4/5 章的交互演示图），那部分才归我们管。
P1alt 文本过短且重复，屏幕阅读器区分不出来
覆盖率 100%（387 张，366 张已中文化）—— 这点做得好。但质量参差： 18 组重复 alt（多出 33 张同名），162 张≤4 字。 8 张都叫「高层设计」、5 张都叫「哈希桶」、5 张叫「高层架构」，还有「架构」「分片」「复制」「二维」这种单词 alt。
修法：alt 是图片的唯一文本等价物。alt="高层设计" 应改成
alt="聊天系统高层设计：客户端经负载均衡接入 API 服务器与实时服务，后端三组 KV 存储"。
建议按「对象 + 关系 + 结论」三段式重写这 195 条。
P2桌面端 387 张图里只有 48 张不需要缩放
原生宽度中位数 1380px，最宽 2008px。桌面阅读列约 968px，意味着 42% 的图要缩到 50–70%， 7% 缩到 40–50%；320px 手机上缩放比例中位数只剩 0.2 倍。
修法：已有按需放大查看器（点击 role="button" + #image-dialog 支持 #large-image 原尺寸滚动），
移动端体验已被兜底，不建议改。若要进一步优化，只给宽高比 >6 的极扁图做横向滚动容器即可。
三、页内 2 个内联 SVG：这里才该用 diagram-design 判据
页面第 1 章与第 5 章的交互演示是真正手写的 SVG（role="img" + viewBox），
它们归本项目管，可以直接按 §9 查：
| §9 检查项 | 实测 | 结论 |
|---|---|---|
role="img" | 2/2 有 | 通过 |
aria-labelledby 指向 <title>+<desc> | 0/2（用的是 aria-label） | 不通过：aria-label 可用但不推荐，缺 <desc> 等于没有长描述 |
<title> 作为 <svg> 首个子元素 | 0/2 | 不通过 |
| 连接器只用正交折线（§6 规则 1） | 用的是 M x1 y1 L x2 y2 直斜线 | 不通过：全是斜向连线 |
| 箭头标签有遮罩 | 无标签 | 不适用 |
| 颜色取自主题变量 | 硬编码 #91a18b / #e38845，而主题是 --accent:#ba5d35 | 不通过：暗色主题下这两个色不会跟着变 |
| 箭头先于盒子绘制 | 是（edges 在 nodes 前） | 通过 |
这 7 条是本次审计里唯一 100% 可复现、可验收、改动成本最低的一批 ——
把两个 SVG 的 aria-label 换成 aria-labelledby+<title>+<desc>、
把硬编码色换成 var(--accent)、把斜线换成 r=8 的直角折线，就是一次干净的 diagram-design 落地。
四、抽样目检
机检之外，按风格各抽一张出来看。以下判词是目视结论，不是机检结果。
斜向连线（diagram-design §6 规则 1 明令禁止）、箭头标签 http/ws 直接压在线上无遮罩（规则 2）、单图出现青绿紫三个强调色系而非 1–2 个焦点（§5）。这是全站占比最高的一类。
桌面端缩到 52%、320px 手机上只剩 15%。同款盒子的重复排布也丢掉了层级（§4「每个节点同款盒子」）。
全站唯一在桌面端能不缩放的尺寸。灰度单色、无强调色 —— 与上一种风格完全割裂。
它不是图，是截图。在亮色主题下是一块 1862px 的黑块；反过来说它是全站唯一在暗色主题下不刺眼的图。diagram-design 无法重绘它 —— 应作为「证据」保留，但要明确标注为截图。
同样是斜向箭头 + 无遮罩标签。优点是层级清楚（分区虚线框），是重绘成功率最高的一类 —— 结构已经对了，只差设计系统。
五、重绘候选：291 张，Top 25
按「配色乱度 + 原生尺寸 + 体积 + 宽高比」打分排序。高分 ≠ 必须改， 而是「如果决定投入重绘，从这里开始性价比最高」。
| 分 | 章节 | 图 | 尺寸 | 体积 | 触发原因 |
|---|---|---|---|---|---|
| 7 | 28. Stock Exchange | world-stock-exchanges | 2006×962 | 458 KB | 配色含 6 个色相族、原生 2006px，桌面需缩至 48%、单图 0.4 MB |
| 5 | 18. Google Maps | geohashing | 1042×1234 | 567 KB | 配色含 6 个色相族、单图 0.6 MB |
| 5 | 18. Google Maps | map-projections | 1542×1294 | 1.2 MB | 配色含 7 个色相族、单图 1.2 MB |
| 5 | 18. Google Maps | map-routing-hierarchical | 1392×1294 | 1.7 MB | 配色含 12 个色相族、单图 1.7 MB |
| 5 | 18. Google Maps | partitioning-system | 792×760 | 487 KB | 配色含 9 个色相族、单图 0.5 MB |
| 5 | 18. Google Maps | routing-tiles | 1534×722 | 502 KB | 配色含 5 个色相族、单图 0.5 MB |
| 5 | 18. Google Maps | shortest-path-service | 1390×608 | 600 KB | 配色含 10 个色相族、单图 0.6 MB |
| 5 | 18. Google Maps | zoom-level-increases | 1258×1630 | 727 KB | 配色含 5 个色相族、单图 0.7 MB |
| 5 | 20. Metrics Monitoring | grafana-dashboard | 1862×1454 | 716 KB | 配色含 8 个色相族、单图 0.7 MB |
| 5 | 01. Scaling | cache | 1202×184 | 51 KB | 配色含 5 个色相族、宽高比 6.5，移动端几乎不可读 |
| 5 | 25. Real-time Gaming L | skip-list-performance | 1956×322 | 11 KB | 原生 1956px，桌面需缩至 49%、宽高比 6.1，移动端几乎不可读、纯灰度大图，易用统一设计系统重塑 |
| 5 | 17. Nearby Friends | geohash-borders | 1238×764 | 634 KB | 配色含 5 个色相族、单图 0.6 MB |
| 5 | 21. Ad Click Event Agg | digital-advertising-example | 1930×244 | 31 KB | 原生 1930px，桌面需缩至 50%、宽高比 7.9，移动端几乎不可读、纯灰度大图，易用统一设计系统重塑 |
| 3 | 15. Google Drive | high-level-design | 1230×958 | 94 KB | 配色含 4 个色相族 |
| 3 | 15. Google Drive | sync-conflicts | 1324×336 | 47 KB | 配色含 5 个色相族 |
| 3 | 12. Chat System | group-chat-flow | 1110×936 | 111 KB | 配色含 4 个色相族 |
| 3 | 12. Chat System | group-chat | 798×692 | 102 KB | 配色含 5 个色相族 |
| 3 | 12. Chat System | heartbeat-mechanism | 1152×926 | 82 KB | 配色含 6 个色相族 |
| 3 | 12. Chat System | high-level-design | 1178×1290 | 241 KB | 配色含 6 个色相族 |
| 3 | 12. Chat System | long-polling | 1428×1350 | 108 KB | 配色含 6 个色相族 |
| 3 | 12. Chat System | message-synchronization | 1180×918 | 87 KB | 配色含 4 个色相族 |
| 3 | 12. Chat System | one-to-one-chat | 892×772 | 115 KB | 配色含 5 个色相族 |
| 3 | 12. Chat System | polling | 1436×1544 | 121 KB | 配色含 6 个色相族 |
| 3 | 12. Chat System | zookeeper | 1062×1012 | 106 KB | 配色含 6 个色相族 |
| 3 | 10. Notification Syste | contact-info-gathering | 1346×350 | 95 KB | 配色含 4 个色相族 |
附：体积 Top 10
| 章节 | 图 | 尺寸 | 体积 |
|---|---|---|---|
| 18. Google Maps | map-routing-hierarchical | 1392×1294 | 1.7 MB |
| 18. Google Maps | map-projections | 1542×1294 | 1.2 MB |
| 18. Google Maps | zoom-level-increases | 1258×1630 | 727 KB |
| 20. Metrics Monitoring and | grafana-dashboard | 1862×1454 | 716 KB |
| 17. Nearby Friends | geohash-borders | 1238×764 | 634 KB |
| 21. Ad Click Event Aggrega | cassandra-scalability | 1352×1234 | 626 KB |
| 18. Google Maps | shortest-path-service | 1390×608 | 600 KB |
| 18. Google Maps | geohashing | 1042×1234 | 567 KB |
| 18. Google Maps | road-representation | 1522×712 | 521 KB |
| 18. Google Maps | routing-tiles | 1534×722 | 502 KB |
六、如果只做三件事
- ✅ 补
width/height（387 张）—— 已完成，CLS 已消除。 - 重压配图，有损 WebP +
srcset两档 —— 单文件有望从 43 MiB 降到 8–12 MiB。 - 改 2 个内联 SVG 的可访问性与连接器 —— 唯一能完整套用 diagram-design §6/§9 的地方。
至于 387 张原书插图本身：它们的风格问题属于上游，不是本次转换的缺陷。 若要真按 diagram-design 重做，那是「用自己的话重画 387 张图」的工作量，应该按章挑重点做，而不是全量替换。