样本：anthropic.com/news、anthropic.com/research、claude.com/resources/articles 共 389 篇文章，去重后 1,591 张配图。 筛选：先按主题词（agent / MCP / system / pipeline / code / SDK / sandbox…）收窄到 420 张技术类图，再人工剔除评测基准、准确率曲线、问卷结果这类「结果图」，留下 78 张架构、系统、代码与流程类图解。 结论先说：他们画得最好的是带边界和泳道的系统图，不是插画；最差的是直接导出的泳道图和过度简化的方块图。整体信息设计水平很高，但缺少统一制图规范，质量随作者波动。
| 类型 | 长什么样 | 用在哪 | 占比感受 |
|---|---|---|---|
| 结果图 | 柱状、折线、误差棒、热力图、ROC | 评测、经济指数、模型对比 | 最多，但和架构表达无关 |
| 系统图 | 方块、泳道、嵌套容器、箭头 | agent 架构、MCP、沙箱、上下文 | 技术文章的主力 |
| 装饰插画 | 陶土橙底 + 黑色手绘线稿、摄影 | 产品发布、品牌页 | 很少，集中在 Claude Design 等营销页 |
值得研究的是第二类。它又分成四种稳定图式：
代表：Beyond permission prompts 的 Claude Code Sandboxing 图。
Allow、红色 Deny X、蓝色 Ask user for permission。allowed:443、unknown:80、denied:443、Write ~/.bad_file。可复用点：把「策略」画成节点，把「判定」画成有颜色的 chip，把「参数」写在线上。
代表：Agent + Skills + Virtual Machine、5 layers / 1 loop、High-level Architecture of Advanced Research。
use computer、contents live in file system）连接，而不是让线穿墙。可复用点：层级靠背景色 + 边框 + 内边距表达，不靠阴影；跨层只画一条「语义箭头」。
代表：Multi-agent coordination patterns 系列（Orchestrator-Subagent / Agent Teams / Message Bus / Shared State）。
A vs. B，下面两栏并置。可复用点：系列图不要每张重新设计，锁定一套 token，只改变量。对比图是最好的教学单位。
代表：Programmatic tool calling 的纵向时序图、两阶段分类流水线。
Transcript filtering、Two-stage pipeline）。More research needed? → Exit loop / Continue loop。按 400 张抽样统计，约三分之一的图使用米色纸面底；纯色满版封面约 30 张，其中陶土橙为主。
| 项 | 取值 |
|---|---|
| 画布底色 | #FBFAF7 近白；容器 #F5F1E8 米色 |
| 主文字 | #1F1E1C（近黑，不用纯黑） |
| 强调色 | #D97757 陶土橙（标题、关键节点、错误） |
| 调度/主流程 | 淡蓝 #A8C4E5，描边略深 |
| 执行/子任务/允许 | 薄荷绿 #A9D6C0 |
| 拒绝/风险 | 淡红 #E8A6A0 |
| 画布圆角 | 外层 16–24px，节点 8–10px |
| 线 | 1.5px 深灰，直角折线，小三角箭头 |
| 字号 | 图标题 28–34；节点 14–16；注释 11–12 |
| 图例 | 基本不用，靠颜色语义 + 线上标签自解释 |
一个很关键的细节：节点里的文字是名词，连线上的文字是动词或参数。比如 Orchestrator → Subagent A 是名词，dispatches / allowed:443 是动词或参数。
allowed:443 / unknown:80 这类标签让图自带解释力，读者不用回正文。SKILL.md 的 YAML + Markdown 结构、目录树、接口表；只有终端输出才用截图。<--> 同时表示请求、响应、共享），回传边没有标签，读者只能猜。不要让模型直接输出 SVG / HTML。 先让它输出一个 scene graph，再由固定渲染器排版，才能保证一致性和可读性。
{
"canvas": {"preset": "architecture-4x3", "theme": "claude-paper"},
"lanes": [
{"id": "user", "label": "User"},
{"id": "agent", "label": "Claude Code"},
{"id": "sandbox", "label": "Sandbox"}
],
"nodes": [
{"id": "u", "lane": "user", "label": "User", "role": "actor"},
{"id": "cc", "lane": "agent", "label": "Bash (python foo.py)", "role": "process"},
{"id": "sb", "lane": "sandbox", "label": "bash -c 'python foo.py'", "role": "process"},
{"id": "d1", "lane": "sandbox", "label": "Allow", "role": "decision", "state": "allow"}
],
"edges": [
{"from": "u", "to": "cc", "verb": "submit", "payload": "command"},
{"from": "cc", "to": "sb", "verb": "exec"},
{"from": "sb", "to": "d1", "verb": "write", "payload": "~/.bashrc", "result": "deny"}
]
}
建议的约束：
actor / orchestrator / worker / store / queue / boundary / external / decision / artifact，每种角色固定配色与形状。verb，可选 payload、result；禁止无标签双向箭头。architecture.htmlatlas.html