diagram

该技能用于创建概念性图表与示意图，输出 SVG 并渲染为 PNG，通过自我批判与迭代提升质量。

用途

适用于概念性示意图（维恩图、流程图、架构图）、数据图表（折线图、柱状图、面积图），以及为幻灯片或文档制作视觉解释。不适用于主视觉图或照片级写实内容（应使用 picture 技能）、简单文本排版（Markdown 即可）、截图或界面原型（属于其他工具）。

工作流程

理解内容：用户通常提供结构（如“方框由箭头连接”“带重叠的维恩图”）、内容（实际文本或数据）与目的（要传达的信息或洞见）。绘制前需先澄清这些要素。
应用品牌（如适用）：若存在品牌技能（例如 itv-brand），读取其配色、字体与视觉原则。若无品牌指定，则使用合理默认值：清晰层级；变化配色，不要每次都默认深色背景，浅色、暖色、粉彩、大地色、柔和色均可，并匹配内容基调（活泼主题用亮色，企业用干净白色加点缀色，技术用冷灰）；深色背景只是选项之一，不是默认。
创建 SVG：默认画布 1280×720（16:9），品牌技能可覆盖。示例结构：

为便于人工编辑，多行文本应作为同一 transform 组内的兄弟元素：

这样在 Inkscape 等编辑器中可作为一个可选对象保持在一起。注意：Affinity 导入时会拆开，详见 references/svg-interop.md。关键：语义上属于同一标签的多行文本，绝不能创建为彼此独立的 <text> 元素。

渲染为 PNG：前置条件 brew install librsvg，这是箭头标记与完整 SVG 渲染保真度所必需的。命令：rsvg-convert -w 1280 -h 720 input.svg -o /tmp/chart.png。sips 更快但会静默丢弃 SVG 标记（箭头、箭头头部），仅用于无标记的图表。若未安装 rsvg-convert，渲染前应警告用户箭头会缺失。
自我批判（CRAP + 构图）：读取 PNG，在展示给用户前依据 CRAP 原则批判。邻近：相关项是否分组；标签紧邻所描述对象；组间距大于组内间距；留白有组织而非散乱；无关元素最小间距约 22px。对齐：每个元素与某物对齐；一个主导对齐系统；注释列对齐到同一 x 坐标；跨画布对齐创造统一感。重复：相似元素样式一致；有限配色系统化复用；清晰视觉节奏；字号合并为最多 3-4 级。对比：标题最大，其次高亮元素，再次内容；主数据突出于次要数据；差异要大胆，层级间至少 2 倍（如 36px 标题对 18px 正文）；在较小尺寸下检查对比；深色背景文字最低 #e2e8f0，WCAG 4.5:1 为硬底线。构图检查：构图是否居中（计算而非目测）；留白左右、上下是否平衡；是否有孤立元素；画布边缘留出约 10% 边距。居中计算：left_edge = 最左内容 x 坐标；right_edge = 最右内容 x 坐标；content_center = (left_edge + right_edge) / 2；offset = canvas_center - content_center；整体平移 offset。详见 references/design-principles.md。
缩小尺寸检查：以 50-75% 尺寸查看 PNG（或眯眼）。居中问题、竞争元素、层级扁平化、低对比文字都会显现。小尺寸下看起来不对，就是不对。
修复并重新渲染：发现问题后修复并再次渲染。一个修复常引发另一个问题，至少运行两轮批判循环再宣布完成。常见修复：居中偏移则计算偏移并平移所有元素；注释太远则移近或放入元素内；孤立元素则加连接线或对齐某物；低对比则深色背景文字提升到 #e2e8f0 最低；文字触碰形状边缘则四边内缩 10-15px；过于密集则拆分到多个视觉而非缩小文字。
完整性检查：展示前问：该领域还缺什么？你在可视化他人的心智模型，是否捕捉了他们会期望看到的所有关键元素？这关乎内容准确性，而非设计。
展示用户：open -a "Google Chrome" /tmp/chart.png，或按需复制到桌面。

设计原则

层级：标题 > 高亮元素 > 内容，最多三级。标题最大，关键洞见（如维恩交集）第二，其余支撑。层级间差异明显，标题与正文至少 2 倍。

包含：维恩图中交集文字应视觉上包含在重叠形状内，每项内容明确位于其区域内。

领域清晰：不跨骑、不模糊归属，内容占据明确领域。

标签不碰线：圆形、方框标签与边缘保持间距，放在“时钟位置”（10 点、2 点）而非正上方居中。形状内文字四边内缩 10-15px。

填满空间：图表区域应使用约 80% 画布（边缘约 10% 边距）。“填满”指居中且平衡，不只是“够大”。底部留空说明元素过小或位置不佳。均匀缩放元素填充，绝不拉伸文字。宁可拆分到多个视觉，也不缩小一切塞进一个。每画布 3-4 个关键元素为佳。

散开而非堆叠：区域内多个细节项应有机散开填充领域，不要默认整齐垂直堆叠或项目符号布局。

显示文本大小写：标签与标题使用一致的 Title Case。

标签具体性：定稿前审查标签具体性。裸名词常需修饰：“Naming” → “Consistent Naming”；“SME-friendly” → “SME-friendly tools”；“Models” → “Better predictive models”。问：不熟悉上下文的人能理解吗？

切斯特顿栅栏：移除任何元素前问“它在做什么工作？”轴标签框定概念空间，注释提供意义而非仅标签，宽度指示器强化信息，关键/图例面板分组元信息。不要把“解释”误当“噪音”。

尊重隐喻：视觉隐喻有规则，破坏规则就破坏理解。梯子横档在两侧栏杆内；维恩内容明确属于一个区域；流程箭头指向流动方向；树子节点在父节点下方。

少即是多（尤其重叠）：并非每个区域都需要标签。维恩图中若重叠含义自明，留空即可。给一切加标签会制造噪音。

无孤立元素：一切需与某物有视觉关系。若标注框孤立漂浮，用线、对齐或邻近连接它。

不用 Emoji 作图标：绝不用 emoji 或 Unicode 符号作视觉元素，跨平台、浏览器、导出格式渲染不一致。用正规 SVG 形状——带对勾路径的圆，而非 ✅；带感叹号的三角，而非 ⚠️。

关键/图例放置：最佳是无需图例，视觉自解释；可接受是包含式图例面板，元信息集中一处；最差是散落元信息。若需图例，就包含它。

关键规格：标题 36-40px（最大，顶层）；高亮文字 24-28px（第二层）；标签 20-24px（圆/区域标签）；内容文字 18-20px（区域内）；描边 3-4px（圆轮廓、连接线）。

与品牌技能组合：存在品牌技能时，读取其 brand-guide.md 的配色、字体、规格并应用到 SVG；品牌技能可指定不同画布尺寸。例如 ITV 品牌图表还需调用 itv-styling 技能。

反模式：跳过自我批判（质量问题持续）——始终渲染并检查后再展示；低对比文字（投影不可读）——深色上白/近白，WCAG 4.5:1 最低，50% 缩放测试；拥挤布局（视觉过载）——每视觉 3-4 关键元素，拆分而非缩小；层级差异微弱（层级不可见）——层级间至少 2 倍；文字触碰形状边缘（显得局促）——四边内缩 10-15px；只修一次不复查（引入新问题）——至少两轮批判循环；每次同样深色背景（单调、基调不符）——变化配色匹配内容；Emoji 作图标（渲染不一致）——用 SVG 形状；跳过品牌检查（样式不一致）——品牌适用时先加载品牌技能。

参考资料：references/design-principles.md（完整 CRAP 框架与 SVG 具体干预）；references/slide-design-principles.md（幻灯片专用阈值，输出用于演示时加载，标记 U 的通用规则适用于所有图表）；references/svg-interop.md（SVG 编辑器兼容性说明）；references/svg-recipes.md（常见元素的代码片段）。

技能介绍