diagram

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Diagramming

图表绘制

Create conceptual charts and diagrams as SVG, render to PNG, self-critique, iterate, and show user.

创建概念图表与示意图（格式为SVG），将其渲染为PNG，进行自我审查、迭代优化后展示给用户。

When to Use

适用场景

Conceptual diagrams (Venn, flow, architecture)
Data charts (line, bar, area)
Visual explanations for slides or documents

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

When NOT to Use

不适用场景

Hero images or photorealistic content (use picture skill)
Simple text formatting (markdown suffices)
Screenshots or screen mockups (different tools)

主视觉图或写实内容（使用图片技能）
简单文本格式（Markdown即可满足）
截图或界面原型（需使用其他工具）

Workflow

工作流

1. Understand the Content

1. 理解需求内容

User typically provides:

Structure — "boxes connected by arrows", "Venn with overlap"
Content — the actual text/data to include
Purpose — the message or insight

Clarify these before drawing. The structure is theirs, the execution is yours.

用户通常会提供：

结构 —— "带箭头连接的方框"，"带重叠区域的维恩图"
内容 —— 需包含的实际文本/数据
目的 —— 要传递的信息或洞察

绘制前需明确以上信息。结构由用户指定，执行由你负责。

2. Apply Brand (if applicable)

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

If a brand skill exists (e.g.,

itv-brand

), read its specs for:

Color palette
Typography
Visual principles

If no brand specified, use sensible defaults:

Dark background (#1a1a2e or similar)
Clear hierarchy (see Contrast below)

若存在品牌技能（例如

itv-brand

），请查阅其规范获取：

调色板
字体规范
视觉原则

若未指定品牌，使用合理默认值：

深色背景（#1a1a2e或类似色值）
清晰的层级结构（见下文“对比”部分）

3. Create SVG

3. 创建SVG

Canvas: 1280×720 (16:9) default. Brand skill may override.

xml

<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"/>
  <!-- Content -->
</svg>

For human-editable SVGs: Structure multi-line text as siblings in one transform group:

xml

<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>

This keeps lines together as one selectable object in editors like Inkscape. (Note: Affinity breaks this apart on import — see

references/svg-interop.md

CRITICAL: Never create separate unlinked

<text>

elements for lines that belong together semantically. If "New stories / to tell" is one label, it's one group — always. Ungrouped lines become editing nightmares.

画布：1280×720（16:9）默认。品牌技能可能会指定不同尺寸。

xml

<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"/>
  <!-- Content -->
</svg>

可人工编辑的SVG规范：多行文本需作为同级元素放在同一个变换组中：

xml

<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>

元素。例如“New stories / to tell”作为一个标签，必须放在同一个组中——永远遵循此规则。未分组的文本会给编辑带来极大困扰。

4. Render to PNG

4. 渲染为PNG

bash

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

Note:

sips

is faster but doesn't support markers/arrows.

bash

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

注意：

sips

速度更快，但不支持标记/箭头。

5. Self-Critique (CRAP + Composition)

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

Read the PNG and critique against CRAP principles before showing user:

Proximity — Are related items grouped?

Labels adjacent to what they describe (not 300px away in a separate column)
Annotations should be close enough that the eye doesn't have to hunt
More space between groups than within groups
White space organized, not scattered

Alignment — Do elements connect visually?

Every element aligns with something else
One dominant alignment system
If annotations are in a column, align them to ONE x-coordinate (ragged = amateur)
Strong invisible lines across the canvas
Cross-canvas alignment creates unity even between unrelated elements

Repetition — Is styling consistent?

Similar elements styled identically
Limited color palette, reused systematically
Clear visual rhythm
Consolidate font sizes to 3-4 levels maximum

Contrast — Is hierarchy clear?

Title largest, then highlighted element, then content
Primary data stands out from secondary
No "wimpy" differences — all contrasts are bold
Check contrast at smaller sizes — problems emerge

Composition Check — After CRAP, step back and ask:

Is the composition centered on the canvas? (Calculate, don't eyeball)
Is whitespace balanced left/right, top/bottom?
Are there orphan elements with no visual relationship to anything?

Centering calculation:

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

查看PNG文件，在展示给用户前依据CRAP原则进行审查：

亲密性（Proximity） —— 相关元素是否已分组？

标签应紧邻所描述的对象（而非在300px外的单独列中）
注释应足够靠近，无需用户费力寻找
组与组之间的间距应大于组内元素的间距
留白需规整，而非零散分布

对齐（Alignment） —— 元素是否在视觉上相互关联？

每个元素都应与其他元素对齐
使用单一主导对齐系统
若注释在同一列，需对齐到同一个X坐标（参差不齐=业余表现）
画布上应有清晰的隐形对齐线
跨画布对齐可使无关元素之间也产生统一感

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

同类元素样式统一
使用有限调色板，并系统性复用
形成清晰的视觉节奏
字体大小最多保留3-4个层级

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

标题字号最大，其次是重点元素，最后是内容文本
主数据应与次要数据区分开
避免“微弱”差异——所有对比都应鲜明
缩小尺寸检查对比问题——问题会在此场景下显现

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

构图是否在画布中央？（需计算，而非目测）
左右、上下留白是否平衡？
是否存在与其他元素无视觉关联的孤立元素？

居中计算方法：

left_edge = 最左侧内容的X坐标
right_edge = 最右侧内容的X坐标
content_center = (left_edge + right_edge) / 2
offset = 画布中心 - content_center

Shift everything by offset

将所有元素偏移offset距离


See `references/design-principles.md` for detailed interventions.


详见`references/design-principles.md`中的详细调整方法。

6. Reduced Size Check

6. 缩小尺寸检查

View the PNG at 50-75% size (or squint). Problems that hide at full size emerge:

Centering issues become obvious
Competing elements reveal themselves
Hierarchy flattens — is the important thing still prominent?
Low contrast text disappears

If something looks wrong small, it IS wrong.

将PNG缩小至50-75%显示（或眯眼观察）。在全尺寸下隐藏的问题会显现：

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

若缩小后看起来有问题，那它确实存在问题。

7. Fix and Re-render

7. 修正并重新渲染

If issues found, fix and render again. Iterate until satisfied. Only then show user.

Common fixes:

Centering off → calculate offset, shift all elements
Annotations too far → move closer, or put inside elements
Orphan element → add connector line or align to something
Low contrast → boost to #e2e8f0 minimum for text on dark backgrounds

若发现问题，进行修正并重新渲染。迭代优化直至满意，再展示给用户。

常见修正项：

居中偏移 → 计算偏移量，移动所有元素
注释距离过远 → 移近，或嵌入元素内部
孤立元素 → 添加连接线或与其他元素对齐
低对比度 → 将深色背景上的文本对比度提升至#e2e8f0及以上

8. Completeness Check

8. 完整性检查

Before showing user, ask: what's missing from the domain? You're visualising someone's mental model — have you captured all the key elements they'd expect to see? If the diagram is about "data partnerships" and you only listed two when there are three, the user will notice. This isn't about design; it's about content accuracy.

展示给用户前，问自己：领域中缺少了什么？ 你在可视化用户的心智模型——是否捕获了所有用户预期的关键元素？例如，如果图表是关于“数据合作关系”，而你只列出了两个，但实际有三个，用户会注意到。这与设计无关，而是内容准确性问题。

9. Show User

9. 展示给用户

bash

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

Or copy to Desktop if user needs the file.

bash

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

若用户需要文件，可复制到桌面。

Design Principles

设计原则

Hierarchy

层级结构

Title > Highlighted element > Content. The title is largest. The key insight (e.g., Venn intersection) is second. Everything else supports these.

标题 > 重点元素 > 内容文本。标题字号最大，关键洞察（如维恩图交集）次之，其余内容为辅助。

Containment

包含性

In Venn diagrams, intersection text should be visually contained within the overlap shape. Each piece of content should be unambiguously inside its region.

在维恩图中，交集文本应视觉上包含在重叠区域内。每个内容块应明确属于其所在区域。

Territory Clarity

区域清晰性

No straddling, no ambiguity about "which side does this belong to?" Content occupies clear territory.

避免模糊——“这属于哪一侧？”不应成为问题。内容应占据清晰的区域。

Labels Don't Touch Lines

标签不触碰线条

Circle labels, box labels — keep clear space from edges. Position labels at "clock positions" (10 o'clock, 2 o'clock) rather than centered above.

圆形标签、方框标签——需与边缘保持清晰间距。标签应放在“时钟位置”（10点钟、2点钟方向）而非正上方居中。

Fill the Space

填满空间

Chart area should use ~80% of canvas
"Fill" means centered and balanced, not just "big enough"
If there's empty space at bottom, elements are undersized or poorly positioned
Scale elements uniformly to fill — never stretch text (aspect ratio is sacred)

图表区域应占据约80%的画布
“填满”指居中且平衡，而非仅“足够大”
若底部有空白，说明元素尺寸过小或位置不佳
需均匀缩放元素以填满空间——绝不能拉伸文本（宽高比至关重要）

Scatter, Don't Stack

分散排列，而非堆叠

When placing multiple detail items within a region (e.g., items inside a Venn circle), scatter them organically to fill the territory. Don't default to neat vertical stacks or bullet-list layouts — that's document thinking, not visual thinking. Let items breathe and occupy the space naturally. Stacking looks rigid; scattering looks designed.

在区域内放置多个细节项时（如维恩图圆圈内的项目），应自然分散排列以填满区域。不要默认使用规整的垂直堆叠或项目符号布局——这是文档思维，而非视觉思维。让元素有呼吸空间，自然占据空间。堆叠显得僵硬，分散排列更具设计感。

Display Text Capitalisation

文本大小写规范

Labels and titles get consistent Title Case capitalisation.

标签和标题应统一使用标题大小写（Title Case）。

Label Specificity

标签明确性

Review labels for specificity before finalising. Bare nouns often need modification to land:

"Naming" → "Consistent Naming"
"SME-friendly" → "SME-friendly tools"
"Models" → "Better predictive models"

Ask: would someone unfamiliar with the context understand what this means? If not, add the adjective.

最终确定前检查标签的明确性。单一名词通常需要修饰才能准确传达含义：

“Naming” → “Consistent Naming（统一命名）”
“SME-friendly” → “SME-friendly tools（适合领域专家的工具）”
“Models” → “Better predictive models（更优预测模型）”

问自己：不熟悉背景的人能否理解其含义？若不能，添加修饰词。

Chesterton's Fence

切斯特顿栅栏原则

Before removing any element, ask: "What job is this doing?"

Axis labels frame conceptual space (X vs Y dimensions)
Annotations provide meaning, not just labels ("This ad led to this click" ≠ "Last-click")
Width indicators reinforce messages the visual implies
Key/legend panels group meta-information
Don't mistake "explanation" for "noise"

删除任何元素前，问自己：“它的作用是什么？”

坐标轴标签定义概念空间（X与Y维度）
注释提供含义，而非仅标签（“此广告带来点击”≠“最后点击”）
宽度指示器强化视觉所隐含的信息
图例面板整合元信息
不要将“解释”误认为“噪音”

Respect the Metaphor

尊重隐喻规则

Visual metaphors have rules. Breaking them breaks comprehension:

Ladder: rungs go INSIDE the rails, not wider than them
Venn: content belongs unambiguously in one region
Flow: arrows point in direction of flow
Tree: children below parents

If your visual breaks the metaphor's rules, the viewer's mental model breaks.

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

梯子：梯级应在栏杆内部，而非宽于栏杆
维恩图：内容应明确属于某一区域
流程图：箭头指向流程方向
树状图：子节点在父节点下方

若你的视觉设计打破了隐喻规则，观者的心智模型也会被打破。

Less Is More (Especially Overlaps)

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

Not every region needs a label. In Venn diagrams, if an overlap's meaning is self-evident from the surrounding content, leave it empty. Labelling everything creates noise. The unlabelled center can be more powerful than a forced "synergy" label. Ask: does this label add meaning, or am I labelling because I feel I should?

并非每个区域都需要标签。在维恩图中，如果重叠区域的含义可通过周围内容自明，留空即可。给所有区域加标签会产生噪音。未标注的中心区域可能比强行添加的“协同效应”标签更有力量。问自己：这个标签是否增加了含义，还是我只是出于习惯而添加？

No Orphan Elements

无孤立元素

Everything needs a visual relationship to something else:

If a callout box floats alone, connect it (line, alignment, proximity)
Elements without relationships look like mistakes
Even "independent" items should align with something

所有元素都需与其他元素有视觉关联：

若标注框孤立存在，需连接它（线条、对齐、亲密性）
无关联元素看起来像错误
即使是“独立”项目也应与其他元素对齐

Key/Legend Placement

图例放置优先级

Hierarchy of preferences:

Best: No key needed — visual is self-explanatory
Acceptable: Contained key panel — all meta-info grouped in one area
Worst: Scattered meta-info — bits floating in different corners

If you need a key, contain it. If you're adding labels to explain what colors mean, the colors might not be working.

优先级排序：

最佳：无需图例——视觉设计自明
可接受：整合式图例面板——所有元信息集中在一个区域
最差：分散式元信息——零散分布在不同角落

若需要图例，应整合放置。若你需要添加标签解释颜色含义，说明颜色选择可能存在问题。

Key Specs

关键规格

Element	Size	Notes
Title	36-40px	Largest, top hierarchy
Highlighted text	24-28px	Second hierarchy
Labels	20-24px	Circle/region labels
Content text	18-20px	Inside regions
Strokes	3-4px	Circle outlines, connectors

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

Composing with Brand Skills

与品牌技能结合使用

When a brand skill exists:

Read its brand-guide.md for colors, fonts, specs
Apply those specs to your SVG
Brand skill may specify different canvas size

Example: For ITV-branded charts, also invoke the

itv-styling

skill.

当存在品牌技能时：

查阅其brand-guide.md获取颜色、字体、规格
将这些规格应用到你的SVG中
品牌技能可能指定不同的画布尺寸

示例：对于ITV品牌的图表，还需调用

itv-styling

技能。

Anti-Patterns

反模式

Pattern	Problem	Fix
Skip self-critique	Quality issues persist	Always render and check before showing user
Low contrast text	Illegible on projection	White/near-white on dark, test at 50% zoom
Crowded layouts	Visual overload	Use CRAP principles, leave breathing room
Skip brand check	Inconsistent styling	Load brand skill first when brand applies

模式	问题	修正方案
跳过自我审查	质量问题持续存在	展示给用户前务必渲染并检查
低对比度文本	投影时难以辨认	深色背景使用白色/近白色文本，在50%缩放比例下测试
布局拥挤	视觉过载	运用CRAP原则，留出呼吸空间
跳过品牌检查	样式不一致	当涉及品牌时，先加载品牌技能

References

参考资料

```
references/design-principles.md
```
— Full CRAP framework with SVG-specific interventions
```
references/svg-interop.md
```
— SVG editor compatibility notes
```
references/svg-recipes.md
```
— Code snippets for common elements

```
references/design-principles.md
```
—— 包含SVG专属调整方法的完整CRAP框架
```
references/svg-interop.md
```
—— SVG编辑器兼容性说明
```
references/svg-recipes.md
```
—— 常见元素的代码片段