Infographic

信息图制作

> 将数据或文字内容转化为可视化信息图，支持静态 AntV 信息图和动画 GIF 两种输出模式

与其他图表 SKILL 的区别

都能"生成图表"，但机制与产物不同，按需求路由：

• infographic（本 SKILL） = 本地渲染。两种产物：静态信息图（AntV DSL，列表/流程/对比/层级 HTML→SVG）+ GIF 动画图表（matplotlib 逐帧→GIF）。
• chart-visualization = 调 AntV 远程 API，产出单张静态图片 URL（25+ 类型），最快拿到单图。
• data-report = 输入 CSV/Excel/JSON，产出整页可视化报告（KPI 卡 + 多图 + 洞察 + 表格）。

两模式边界：要静态矢量信息图（可导出 SVG、模板丰富）→ 模式 A；要会动的 GIF（发社媒/朋友圈的动图，如条形竞赛、数字滚动、进度动画、折线生长）→ 模式 B。

输入

用户提供的文字内容、数据、或主题描述。可以是结构化数据（CSV/JSON）、自然语言描述、或简单的数字罗列。

输出

• 静态模式：outputs/主题名/infographic.html（浏览器打开，可导出 SVG）
• 动画模式：outputs/主题名/chart.gif（scripts/gif_chart.py 直接产出可发社媒的 GIF）

执行步骤

第一步：确认输出模式

询问用户选择输出格式：

1. 静态信息图（AntV Infographic）— 列表、流程、对比、层级、关系图等 50+ 模板，矢量渲染，可导出 SVG
2. 动画 GIF（scripts/gif_chart.py）— 条形竞赛 / 数字滚动 / 进度 / 折线生长 4 类爆款动画，直接产出 GIF

如用户需求明确（如"做个条形竞赛动图"或"做个流程图"），直接选择对应模式，无需确认。

第二步：分析内容与选择图表

分析用户输入，提取关键信息结构（标题、描述、数据项等）。选择合适的模板/图表类型。

关键：必须尊重用户输入的语言。用户用中文输入，所有文本必须是中文。

第三步：渲染

• 模式 A（静态 AntV） → 读 references/antv-templates.md：DSL 语法规则、模板选择指南、可用模板列表、HTML 渲染模板。生成 HTML 保存到 outputs/，告知路径。

• 模式 B（动画 GIF） → 调 scripts/gif_chart.py ，无需手写动画代码。子命令按图型：

| 子命令 | 用途 | 数据 JSON 结构 | |--------|------|----------------| | bar-race | 条形竞赛（排名随时间变化，数据可视化爆款） | {"title","times":[...],"series":{"名称":[数值×时间]}} | | count-up | 数字滚动增长（KPI 从 0 涨到目标） | {"title","items":[{"label","value","suffix"}]} 或 {"label","value"} | | progress | 进度动画（--style ring/bar） | {"label","value","max","color"} | | line-grow | 折线逐步生长 | {"title","x":[...],"series":{"名称":[数值]}} |

通用参数：--output x.gif、--data f.json（- 读 stdin，省略用内置示例）、--title、--width（默认 900）、--height、--fps（默认 20）、--duration（秒，默认 4）。

典型调用（先写数据到临时 JSON，再调脚本）： ``bash python skills/openclaw/infographic/scripts/gif_chart.py bar-race --data data.json \ --output outputs/城市增长.gif --width 900 --duration 5 ` 脚本自动设置中文字体、Agg 后端、自适应调色板控体积。自检：python skills/openclaw/infographic/scripts/gif_chart.py --selftest`。

目录结构

infographic/
├── SKILL.md                    本文件（执行流程 + references 指针）
├── scripts/
│   └── gif_chart.py            模式 B：动画 GIF 运行时（matplotlib+Pillow，4 子命令）
└── references/
    ├── antv-templates.md       模式 A：静态 AntV 信息图完整规范
    └── gif-charts.md           模式 B：图表选择/数据格式参考

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: ZJU-REAL
• Source: ZJU-REAL/Easel
• License: Apache-2.0
• Homepage: https://zju-real.github.io/Easel/

Install and usage instructions live in the source repository linked above.