diagram

图表绘制

创建概念图表和示意图，将其渲染为 SVG，再转为 PNG，进行自我评审和迭代，最后展示给用户。

适用场景

• 概念图（维恩图、流程图、架构图）
• 数据图表（折线图、柱状图、面积图）
• 用于幻灯片或文档的可视化说明

不适用场景

• 主视觉图片或照片级真实内容（使用 picture skill）
• 简单的文本排版（Markdown 已足够）
• 截图或屏幕模型（使用其他工具）

工作流

1. 理解内容

用户通常会提供：

• 结构 —“用箭头连接的方框”“有重叠区域的维恩图”
• 内容 —要包含的实际文本或数据
• 目的 —想要传达的信息或洞见

绘制前先确认这些内容。结构由用户决定，具体呈现由你负责。

2. 应用品牌规范（如适用）

如果有品牌 skill（例如 itv-brand），请阅读其规范，了解：

• 配色方案
• 字体排印
• 视觉原则

如果未指定品牌，则使用合理的默认设置：

• 层次清晰（参见下文的对比度）
• **让配色方案有所变化。**不要每次都默认使用深色背景。浅色、暖色、柔和色、土色、低饱和色都可以。应与内容的基调相符：活泼的主题 → 明亮的颜色；企业主题 → 干净的白色搭配强调色；技术主题 → 冷灰色。深色背景只是一个选项，并非默认设置。

3. 创建 SVG

**画布：**默认 1280×720（16:9）。品牌 skill 可能会覆盖此设置。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720">
  <rect x="0" y="0" width="1280" height="720" fill="#BACKGROUND"/>
  
</svg>

**对于可供人工编辑的 SVG：**将多行文本作为同一个变换组中的同级元素：

<g transform="translate(250, 175)">
  <text x="0" y="0" text-anchor="middle">Line One</text>
  <text x="0" y="28" text-anchor="middle">Line Two</text>
</g>

这样可以让多行文本在 Inkscape 等编辑器中作为一个可选对象保持在一起。（注意：Affinity 导入时会将其拆开 — 参见 references/svg-interop.md。）

**重要：**绝不要将语义上属于一起的多行内容创建为彼此独立、未链接的 <text> 元素。如果“要讲述 / 的新故事”是一个标签，它就应当是一个组 — 始终如此。未分组的文本行会让编辑变成噩梦。

4. 渲染为 PNG

前置条件：brew install librsvg — 渲染箭头标记并确保 SVG 完整保真所必需。

rsvg-convert -w 1280 -h 720 input.svg -o /tmp/chart.png

sips 速度更快，但会静默丢弃 SVG 标记（箭头、箭头尖）。仅在图表不含标记时使用 sips。如果未安装 rsvg-convert，请在渲染前提醒用户 — 箭头会缺失。

5. 自我审查（CRAP + 构图）

向用户展示前，先阅读 PNG，并依据 CRAP 原则进行审查：

邻近性（Proximity） — 相关项目是否分组在一起？

• 标签应紧邻其描述对象（不要隔着 300px 放在单独的列中）
• 注释应足够靠近，让人一眼就能找到
• 组间距应大于组内间距
• 留白应有条理，而非散乱分布——不要一处大面积空白，另一处却拥挤不堪
• 不相关元素之间的最小间距：约 22px（相当于 0.3"）。若小于这个距离，看起来就会像是碰撞，除非有意将它们分组

对齐（Alignment） — 元素之间是否有视觉关联？

• 每个元素都应与其他元素对齐
• 采用一个主导的对齐系统
• 如果注释放在一列中，应将它们对齐到同一个 x 坐标（参差不齐会显得业余）
• 在画布上形成清晰的隐形线条
• 跨画布对齐能让彼此无关的元素也显得统一

重复（Repetition） — 样式是否一致？

• 相似元素采用相同样式
• 限制配色方案，并系统性地重复使用颜色
• 建立清晰的视觉节奏
• 将字体大小精简至最多 3–4 个级别

对比（Contrast） — 层级是否清晰？

• 标题最大，其次是突出元素，再其次是内容
• 主要数据应比次要数据醒目
• 不要有“软弱无力”的差异——所有对比都应强烈。如果两个元素属于不同的层级，字号差异应至少为 2 倍（例如，标题 36px、正文 18px，而非 20px 和 16px）
• 缩小尺寸检查对比度——问题会逐渐显现
• 深色背景上的文本：至少使用 #e2e8f0。WCAG 4.5:1 对比度是硬性下限

构图检查 — 完成 CRAP 检查后，退后一步并思考：

• 构图是否位于画布中央？（进行计算，不要凭目测）
• 左右、上下的留白是否均衡？（检查两个轴向——即使水平居中，顶部过重看起来仍然不对）
• 是否存在没有任何视觉关联的孤立元素？
• 画布边缘边距：内容应与四周外缘保持约 10% 的距离。内容贴边会显得未完成。

居中计算：

left_edge = leftmost content x-coordinate
right_edge = rightmost content x-coordinate
content_center = (left_edge + right_edge) / 2
offset = canvas_center - content_center
# Shift everything by offset

有关详细调整方法，请参阅 references/design-principles.md。

6. 缩小尺寸检查

以 50–75% 的尺寸查看 PNG（或眯起眼睛看）。在原尺寸下不易察觉的问题会显现出来：

• 居中问题会变得明显
• 相互争夺注意力的元素会暴露出来
• 层级会变得扁平——重要内容是否仍然突出？
• 低对比度文本会消失

如果缩小后看起来不对，那就是不对。

7. 修复并重新渲染

如果发现问题，请修复并重新渲染。一个修复往往会带来另一个问题——为解决重叠而重新定位，可能会产生新的空隙；调整文本大小可能会破坏对齐。宣布完成前，至少进行两轮审查。

常见修复方法：

• 居中偏移 → 计算偏移量，移动所有元素
• 注释太远 → 移近，或放入元素内部
• 孤立元素 → 添加连接线，或与其他内容对齐
• 对比度低 → 深色背景上的文本至少提高到 #e2e8f0
• 文本贴近形状边缘 → 将文本向内缩进，使其与四周边框相距 10–15px
• 内容过密 → 将内容拆分到多个视觉图表中，而不是缩小文本

8. 完整性检查

向用户展示前，请思考：这个领域还缺少什么？ 你要将某人的心智模型可视化——是否涵盖了他们预期会看到的所有关键元素？如果图表讲的是“数据合作关系”，而实际有三个合作方，你只列出两个，用户会注意到。这不是设计问题，而是内容准确性问题。

9. 向用户展示

open -a "Google Chrome" /tmp/chart.png

如果用户需要文件，也可以将其复制到桌面。

设计原则

层级

标题 > 突出元素 > 内容。最多分为三个层级。标题字号最大。关键见解（例如，维恩图的交集）居于第二层。其他内容都应为这两者提供支持。各层级之间的差异应一目了然——标题与正文之间至少相差 2 倍字号。

包含关系

在维恩图中，交集区域的文本应在视觉上位于重叠形状内。每项内容都应明确地位于其所属区域中。

区域清晰

不要跨越区域，也不要让人疑惑“这属于哪一边？”。内容应位于清晰的区域内。

标签不要触碰线条

圆形标签、方框标签都应与边缘保持清晰间距。将标签放在“钟点位置”（10 点钟、2 点钟），而不是居中置于上方。形状（卡片、横幅、圆角矩形）内的文字应与边框四周保持 10-15px 的内边距——文字贴着形状边缘会显得拥挤且像是无意为之。

填满空间

• 图表区域应占画布约 80%（与边缘保持约 10% 的边距）
• “填满”意味着居中且平衡，而不只是“足够大”
• 如果底部有空白，说明元素尺寸过小或位置不佳
• 等比缩放元素来填满空间——绝不要拉伸文字（宽高比至关重要）
• 与其缩小所有内容塞进一张图，不如优先拆分成多个视觉内容。一张塞满 12 个拥挤方框的图是文档，不是视觉内容——每张画布放 3-4 个关键元素最合适

散布，不要堆叠

在一个区域内放置多个细节项（例如维恩图圆圈内的条目）时，应自然地散布它们，填满区域。不要默认采用整齐的纵向堆叠或项目符号列表布局——那是文档思维，不是视觉思维。让条目之间留有空间，自然地占据区域。堆叠显得僵硬，散布则显得精心设计。

显示文本的大小写

标签和标题的大小写格式应统一，采用标题式大小写。

标签的具体性

定稿前检查标签是否足够具体。单独的名词往往需要修饰，才能准确传达含义：

• “命名” → “统一命名”
• “SME 友好” → “面向 SME 的工具”
• “模型” → “更好的预测模型”

请自问：不了解上下文的人能理解这是什么意思吗？如果不能，就添加修饰语。

切斯特顿之栅

移除任何元素之前，先问：“它发挥了什么作用？”

• 轴标签界定概念空间（X 轴与 Y 轴维度）
• 注释用于提供含义，而不只是标签（“这则广告带来了这次点击”≠“末次点击”）
• 宽度指示器强化视觉内容所传达的信息
• 图例面板用于归纳元信息
• 不要把“解释”误认为“噪声”

尊重隐喻

视觉隐喻有其规则。打破规则就会破坏理解：

• 梯子：横档应位于两侧梯梁之间，而不能比梯梁更宽
• 维恩图：内容应明确属于某一个区域
• 流程图：箭头应指向流程的前进方向
• 树状图：子节点应位于父节点下方

如果视觉内容违反隐喻规则，观众的心智模型就会被打乱。

少即是多（尤其是重叠区域）

并非每个区域都需要标签。在维恩图中，如果根据周围内容就能显而易见地理解重叠区域的含义，就让它保持空白。给所有内容都加标签会产生噪声。留空中心区域可能比硬加一个“协同效应”标签更有力。请自问：这个标签增加了含义吗？还是我只是觉得应该加标签？

不要留下孤立元素

每个元素都需要与其他元素存在视觉关系：

• 如果标注框孤零零地悬浮着，就用线条、对齐或距离关系将它连接起来
• 没有关系的元素看起来像是错误
• 即使是“独立”的条目，也应与某些内容对齐

不要用表情符号充当图标

绝不要使用表情符号或 Unicode 符号作为视觉元素。它们在不同平台、浏览器和导出格式中的显示效果并不一致。应使用恰当的 SVG 形状——例如用带有勾号路径的圆形，而不是 ✅；用带有感叹号的三角形，而不是 ⚠️。

图例的位置

优先级如下：

1. 最佳： 无需图例——视觉内容能自我说明
2. 可接受： 集中式图例面板——所有元信息集中在一个区域
3. 最差： 分散的元信息——零散地分布在不同角落

如果需要图例，就将其集中放置。如果你需要添加标签来解释颜色的含义，可能是颜色本身没有发挥作用。

关键规格

元素	尺寸	说明
标题	36-40px	最大，层级最高
突出文本	24-28px	层级第二
标签	20-24px	圆形/区域标签
正文	18-20px	区域内部
描边	3-4px	圆形轮廓、连接线

使用品牌技能进行创作

如果存在品牌技能：

1. 阅读其 brand-guide.md，了解颜色、字体和规格
2. 将这些规格应用到你的 SVG 中
3. 品牌技能可能会指定不同的画布尺寸

示例：对于 ITV 品牌图表，还要调用 itv-styling 技能。

反模式

模式	问题	修正方法
跳过自我批评	质量问题持续存在	展示给用户前，务必渲染并检查
文本对比度低	投影时难以辨认	深色背景上使用白色/近白色，至少达到 WCAG 4.5:1，在 50% 缩放时测试
布局拥挤	视觉过载	每个视觉图表包含 3-4 个关键元素，拆分布局，而不是缩小元素
尺寸差异过小	层级不明显	各层级之间至少相差 2 倍（标题 36px / 正文 18px）
文本贴近形状边缘	显得局促	四周留出 10-15px 内边距
只修复一次，没有复查	引入新问题	至少进行两轮批评检查
每次都使用相同的深色背景	单调且色调不匹配	根据内容调整配色
使用表情符号作为图标	渲染不一致	使用 SVG 形状
跳过品牌检查	样式不一致	适用品牌时，先加载品牌技能

参考资料

• references/design-principles.md — 完整的 CRAP 框架及 SVG 特定改进措施
• references/slide-design-principles.md — 幻灯片专用阈值（间距、密度、布局术语）。输出用于演示文稿时加载。通用规则（标记为 U）适用于所有图表。
• references/svg-interop.md — SVG 编辑器兼容性说明
• references/svg-recipes.md — 常见元素的代码片段