Diagram Lab · Research
把系统画清楚
Anthropic 和 Claude 官方博客里，真正值得学的不是插画，而是带边界的系统图。这里收集了 389 篇文章、1,591 张配图，并从中筛出 78 张架构 / 代码 / 流程类图解，拆解它们的视觉语法。
389篇文章
1,591去重配图
420技术类图解
78精选架构图
精选 · 78 张
架构图与代码图解
按四种图式分组：泳道与信任边界、嵌套容器、拓扑对比、时序与生命周期。每张附一句点评。
全量 · 1,591 张
官方视觉档案
全部去重配图，可按站点、封面、主色筛选，搜索标题。用于观察整体 art direction。
四个可复用结论
颜色是语义蓝=调度，绿=执行/允许，珊瑚=重点/拒绝，米色=容器。跨文章高度一致。
一图只改一个变量拓扑系列和 workflow 系列共用一套方块语法，学习成本极低。
边界即信息allowed:443、unknown:80 这类标签直接写在线上，读者不用回正文。
代码图不截 IDE画 SKILL.md 结构、目录树、接口表；只有终端输出才用截图。
导出图会翻车低对比的泳道图、交叉箭头、8px 字号，说明缺少统一制图规范。
时序图是空白区他们用泳道/流程图替代 UML 时序图，严格时序图极少。
完整分析、配色参数与「AI 自动画架构图」的 scene graph 设计，见 研究报告。