generating-infographics

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Generating Infographics

生成信息图

Generate branded infographics with custom themes and backgrounds using @antv/infographic.

使用@antv/infographic生成带有自定义主题和背景的品牌风格信息图。

Prerequisites

前置条件

Run
```
/brand-init
```
to create project structure
Run
```
/brand-extract
```
to generate brand-philosophy.md
Run
```
/template-infographic
```
to create an infographic template

运行
```
/brand-init
```
创建项目结构
运行
```
/brand-extract
```
生成brand-philosophy.md
运行
```
/template-infographic
```
创建信息图模板

When to Use

使用场景

"Create an infographic"
"Make a process diagram"
"Visualize this data"
"Create a timeline"
"Show comparison infographic"
NOT for: Charts/graphs (use charting library), presentations (use visual-content skill)

"创建信息图"
"制作流程图表"
"将此数据可视化"
"创建时间线"
"生成对比信息图"
不适用于：图表/图形（使用图表库）、演示文稿（使用视觉内容技能）

Commands

命令

Command	Purpose
`/template-infographic`	Create infographic template
`/infographic`	Generate infographic (guided)
`/infographic-quick`	Generate infographic (fast)

命令	用途
`/template-infographic`	创建信息图模板
`/infographic`	生成信息图（引导式）
`/infographic-quick`	生成信息图（快速式）

Template Categories (114 Total)

模板类别（共114个）

Category	Count	Use Cases	Icons	Illustrated
Sequence	43	Timelines, steps, processes, roadmaps	✓ (2)	✓ (5)
List	23	Features, grids, pyramids, sectors	✓ (4)	✓ (1)
Hierarchy	25	Org charts, tree structures	—	—
Compare	17	VS, before/after, SWOT	—	—
Quadrant	3	2x2 matrices	—	✓ (1)
Relation	2	Networks, connections	✓ (1)	—
Chart	1	Bar charts	—	—

类别	数量	适用场景	图标支持	插画支持
序列图	43	时间线、步骤、流程、路线图	✓ (2)	✓ (5)
列表图	23	功能展示、网格、金字塔、扇区图	✓ (4)	✓ (1)
层级图	25	组织结构图、树状结构	—	—
对比图	17	对比、前后变化、SWOT分析	—	—
四象限图	3	2x2矩阵图	—	✓ (1)
关系图	2	网络、关联关系	✓ (1)	—
图表	1	柱状图	—	—

Template Asset Types

模板资源类型

Type	Count	Identifier	Data Format
Text-only	100+	(default)	`{ "label": "Cloud", "desc": "Infrastructure" }`
Icon-based	8	`icon` in name	`{ "label": "icon:rocket", "desc": "Fast" }`
Illustrated	9	`-illus` suffix	`{ "label": "Step 1", "desc": "Discovery", "illus": "step-1" }`

Recommendation: Start with text-only templates. Illustrated templates require custom image files.

类型	数量	标识	数据格式
纯文本	100+	(默认)	`{ "label": "Cloud", "desc": "Infrastructure" }`
基于图标	8	名称包含 `icon`	`{ "label": "icon:rocket", "desc": "Fast" }`
带插画	9	后缀为 `-illus`	`{ "label": "Step 1", "desc": "Discovery", "illus": "step-1" }`

建议： 从纯文本模板开始使用。带插画的模板需要自定义图片文件。

Illustrated Template Workflow

插画模板工作流

When using

-illus

templates:

Content includes
```
illus
```
field referencing image filename
Supported formats: SVG (recommended), PNG, JPG
Options: provide your own images, find icons, or use placeholders

Images stored with infographic output:

infographics/{date}-{name}/illustrations/

See
```
references/illustrations.md
```
for detailed workflow

使用后缀为

-illus

的模板时：

内容中需包含
```
illus
```
字段，用于引用图片文件名
支持的格式：SVG（推荐）、PNG、JPG
可选方案：提供自有图片、查找图标或使用占位图
图片将与信息图输出文件一同存储在：
```
infographics/{date}-{name}/illustrations/
```
详细工作流请查看
```
references/illustrations.md
```

Text Guidelines (Avoiding Overlap)

文本规范（避免重叠）

Element	Max	Good	Bad
Labels	1-2 words	"Cloud"	"Cloud Computing Services"
Descriptions	2-4 words	"Infrastructure design"	"Complete infrastructure design and implementation"

If overlap occurs: shorten text, use wider canvas (1200px+), or use column/grid templates.

元素	最大限制	示例	反例
标签	1-2个单词	"Cloud"	"Cloud Computing Services"
描述	2-4个单词	"Infrastructure design"	"Complete infrastructure design and implementation"

若出现重叠：缩短文本、使用更宽的画布（1200px以上），或使用列/网格模板。

Quick Reference

快速参考

Task	How
Generate infographic	`node generate.js --config config.json --data '{...}' --output output.png`
Set background	`--background "spotlight-dots"`
SVG output	`--format svg`

任务	操作方式
生成信息图	`node generate.js --config config.json --data '{...}' --output output.png`
设置背景	`--background "spotlight-dots"`
输出SVG格式	`--format svg`

Background Presets

背景预设

Layered (gradient + pattern):

Preset	Effect
`spotlight-dots`	Radial spotlight + subtle dots (recommended)
`spotlight-grid`	Radial spotlight + grid lines
`diagonal-crosshatch`	Diagonal fade + crosshatch
`tech-matrix`	Tech gradient + dense grid

Simple (gradient or pattern only):

Preset	Effect
`spotlight`	Radial gradient only
`diagonal-fade`	Corner to corner fade
`top-down`	Vertical fade
`subtle-dots`	Light dot pattern
`tech-grid`	Grid lines
`crosshatch`	Diagonal crosshatch
`solid`	Plain solid color

分层样式（渐变+图案）：

预设名称	效果
`spotlight-dots`	径向聚光灯+细微点阵（推荐）
`spotlight-grid`	径向聚光灯+网格线
`diagonal-crosshatch`	对角渐变+交叉影线
`tech-matrix`	科技风渐变+密集网格

简约样式（仅渐变或仅图案）：

预设名称	效果
`spotlight`	仅径向渐变
`diagonal-fade`	角落到角落的渐变
`top-down`	垂直渐变
`subtle-dots`	浅色点阵图案
`tech-grid`	网格线
`crosshatch`	对角交叉影线
`solid`	纯纯色

Workflow

工作流

1. Create Template (once)

1. 创建模板（仅需一次）

/template-infographic

Select: category → design → palette → background → style

/template-infographic

选择：类别 → 设计 → 调色板 → 背景 → 样式

2. Generate Infographic (repeat)

2. 生成信息图（可重复操作）

/infographic-quick

Select template → paste content → name → get PNG

/infographic-quick

选择模板 → 粘贴内容 → 命名 → 获取PNG文件

Accessibility & Readability (MANDATORY)

可访问性与可读性（强制要求）

These checks are NON-NEGOTIABLE before generating any infographic.

在生成任何信息图之前，以下检查项为必须执行项，无例外。

Contrast Validation (WCAG AA)

对比度验证（符合WCAG AA标准）

Requirement	Value
Minimum contrast ratio	4.5:1 for all text
Large text (title)	3:1 acceptable
Standard	WCAG 2.1 AA

Key principle: Palette colors are for SHAPES and FILLS, not text. Text needs explicit high-contrast colors.

要求	数值
最低对比度	所有文本需达到4.5:1
大文本（标题）	可接受3:1
标准	WCAG 2.1 AA

核心原则： 调色板颜色仅用于形状和填充，不用于文本。文本需使用明确的高对比度颜色。

Text Color Rules by Background

按背景类型划分的文本颜色规则

Background Type	Title Fill	Description Fill	Label Fill
Dark (spotlight-dots, tech-matrix)	`#FFFFFF`	`rgba(255,255,255,0.85)`	`#FFFFFF`
Light (solid, subtle-dots)	`#1A202C`	`#4A5568`	`#1A202C`

Never use palette colors for text - they're for decorative shapes only.

背景类型	标题填充色	描述填充色	标签填充色
深色（spotlight-dots、tech-matrix等）	`#FFFFFF`	`rgba(255,255,255,0.85)`	`#FFFFFF`
浅色（solid、subtle-dots等）	`#1A202C`	`#4A5568`	`#1A202C`

切勿将调色板颜色用于文本——它们仅用于装饰性形状。

Spacing & Balance Rules

间距与平衡规则

Element	Requirement
Item spacing	Minimum 20px between items
Edge margins	Never touch canvas edges (min 5% padding)
Text truncation	Labels 1-2 words, descriptions 2-4 words
Visual balance	Equal spacing between similar elements

元素	要求
项间距	项之间最小间距为20px
边缘边距	内容切勿触碰画布边缘（最小边距为5%）
文本截断	标签为1-2个单词，描述为2-4个单词
视觉平衡	同类元素之间的间距需均等

Pre-Generation Checklist

生成前检查清单

□ All text has 4.5:1 contrast against background
□ Labels are 1-2 words (no overlap risk)
□ Descriptions are 2-4 words
□ Content fits template capacity (check item limits)
□ Dark bg → white text, Light bg → dark text
□ No text touching edges

If ANY check fails, DO NOT generate. Fix the content or config first.

□ 所有文本与背景的对比度达到4.5:1
□ 标签为1-2个单词（无重叠风险）
□ 描述为2-4个单词
□ 内容符合模板容量（检查项数量限制）
□ 深色背景→白色文本，浅色背景→深色文本
□ 文本未触碰边缘

若任何检查项未通过，请勿生成信息图。请先修复内容或配置。

Config Examples

配置示例

Dark Backgrounds (spotlight-dots, tech-matrix, etc.)

json

{
  "colorBg": "#0D2B5C",
  "colorPrimary": "#60A5FA",
  "title": { "fill": "#FFFFFF" },
  "desc": { "fill": "rgba(255,255,255,0.85)" },
  "item": {
    "label": { "fill": "#FFFFFF" },
    "desc": { "fill": "rgba(255,255,255,0.7)" }
  }
}

Light Backgrounds (solid, subtle-dots, etc.)

json

{
  "colorBg": "#FFFFFF",
  "colorPrimary": "#3B82F6",
  "title": { "fill": "#1A202C" },
  "desc": { "fill": "#4A5568" },
  "item": {
    "label": { "fill": "#1A202C" },
    "desc": { "fill": "#4A5568" }
  }
}

Common mistake: Using pastel palette colors for text on light backgrounds. Pastels are for decorative shapes only.

See template-infographic.md for complete config examples.

深色背景（spotlight-dots、tech-matrix等）

json

{
  "colorBg": "#0D2B5C",
  "colorPrimary": "#60A5FA",
  "title": { "fill": "#FFFFFF" },
  "desc": { "fill": "rgba(255,255,255,0.85)" },
  "item": {
    "label": { "fill": "#FFFFFF" },
    "desc": { "fill": "rgba(255,255,255,0.7)" }
  }
}

浅色背景（solid、subtle-dots等）

json

{
  "colorBg": "#FFFFFF",
  "colorPrimary": "#3B82F6",
  "title": { "fill": "#1A202C" },
  "desc": { "fill": "#4A5568" },
  "item": {
    "label": { "fill": "#1A202C" },
    "desc": { "fill": "#4A5568" }
  }
}

常见错误： 在浅色背景上使用柔和的调色板颜色作为文本。柔和色调仅用于装饰性形状。

更多完整配置示例请查看template-infographic.md。

Data Structure by Type

按类型划分的数据结构

Sequence/List

序列图/列表图

json

{
  "title": "Our Process",
  "items": [
    { "label": "Step 1", "desc": "Discovery" },
    { "label": "Step 2", "desc": "Design" }
  ]
}

json

{
  "title": "Our Process",
  "items": [
    { "label": "Step 1", "desc": "Discovery" },
    { "label": "Step 2", "desc": "Design" }
  ]
}

Compare

对比图

json

{
  "title": "Before vs After",
  "items": [
    { "label": "Before", "children": [{ "label": "Slow" }] },
    { "label": "After", "children": [{ "label": "Fast" }] }
  ]
}

json

{
  "title": "Before vs After",
  "items": [
    { "label": "Before", "children": [{ "label": "Slow" }] },
    { "label": "After", "children": [{ "label": "Fast" }] }
  ]
}

Hierarchy

层级图

json

{
  "title": "Organization",
  "items": [{
    "label": "CEO",
    "children": [{ "label": "CTO" }, { "label": "CFO" }]
  }]
}

json

{
  "title": "Organization",
  "items": [{
    "label": "CEO",
    "children": [{ "label": "CTO" }, { "label": "CFO" }]
  }]
}

Common Mistakes

常见问题及解决方法

Mistake	Fix
Text overlapping	Shorten labels (1-2 words), descriptions (2-4 words)
Missing illustrations	Check template ends in `-illus` , provide SVG/PNG/JPG files
Icon not showing	Use `icon:name` syntax, only for icon templates
Background not applied	Pass `--background` flag to generate.js
Text invisible on light bg	Add explicit `title` / `desc` / `item` fills with dark colors (#1A202C, #4A5568)
Pastel text unreadable	Palette colors are for shapes only; text needs high contrast (~4.5:1)

问题	解决方法
文本重叠	缩短标签（1-2个单词）、描述（2-4个单词）
插画缺失	检查模板后缀是否为 `-illus` ，提供SVG/PNG/JPG文件
图标未显示	使用 `icon:name` 语法，仅适用于图标模板
背景未生效	向generate.js传递 `--background` 参数
浅色背景上文本不可见	为 `title` / `desc` / `item` 显式设置深色填充色（#1A202C、#4A5568）
柔和色调文本可读性差	调色板颜色仅用于形状；文本需使用高对比度颜色（约4.5:1）

References

参考文档

```
references/templates.md
```
- Complete 114 template catalog with asset requirements
```
references/theming.md
```
- Theme configuration details
```
references/backgrounds.md
```
- Background customization guide
```
references/icons.md
```
- Available icons for icon-based templates
```
references/illustrations.md
```
- Illustrated template workflow and SVG requirements

```
references/templates.md
```
- 完整的114个模板目录及资源要求
```
references/theming.md
```
- 主题配置详情
```
references/backgrounds.md
```
- 背景自定义指南
```
references/icons.md
```
- 基于图标的模板可用图标列表
```
references/illustrations.md
```
- 插画模板工作流及SVG要求

Module Structure

模块结构

lib/
├── renderer.js       # Main entry point
├── dom-setup.js      # JSDOM environment
├── infographic.js    # Infographic creation
├── exporter.js       # SVG/PNG export
├── backgrounds.js    # Gradient/pattern backgrounds
└── icons.js          # Icon utilities

lib/
├── renderer.js       # 主入口文件
├── dom-setup.js      # JSDOM环境配置
├── infographic.js    # 信息图创建逻辑
├── exporter.js       # SVG/PNG导出功能
├── backgrounds.js    # 渐变/图案背景处理
└── icons.js          # 图标工具类