Skip to content
cccskills
FreePublished on GitHub

infographic

Turn text or data into visual explanations, from process diagrams and comparison layouts to animated charts. Create browser-viewable graphics that export to SVG, or GIFs showing changing rankings, rising numbers, progress, and growing lines.

OriginalShow the original description

将数据或文字内容转化为可视化信息图,支持静态(AntV)和动画 GIF 两种模式。当用户需要制作信息图、数据可视化、流程图、对比图、动画图表、GIF 图表、思维导图、SWOT 分析图时调用。本地渲染信息图/GIF 动画;要单张静态图片 URL 用 chart-visualization,要 CSV/JSON→整页报告用 data-report

Run score Not tested

See how to install

Good for

  • Explain a process with a visual diagram
  • Compare options in a static infographic
  • Animate rankings that change over time
  • Share animated KPI numbers or progress on social media

Files included (5)

  • SKILL.md4.3 KB
  • EASEL-META.md1.5 KB
  • references/antv-templates.md5.6 KB
  • references/gif-charts.md3.1 KB
  • scripts/gif_chart.py21.3 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

信息图制作

将数据或文字内容转化为可视化信息图,支持静态 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,再调脚本):

    python skills/builtin/infographic/scripts/gif_chart.py bar-race --data data.json \
      --output outputs/城市增长/柱状竞速.gif --width 900 --duration 5
    

    脚本自动设置中文字体、Agg 后端、自适应调色板控体积。自检:python skills/builtin/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:图表选择/数据格式参考

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

ai-image-gen

FreeSummary

Generate images from written descriptions, transform existing images with editing instructions, or create several variations. Choose image dimensions and quantity, then save the results using an OpenAI-compatible service or apimart with your own API key.

  • Generating an illustration from a written description
  • Changing an image's background using instructions
  • Creating several variations of an existing image
ZJU-REAL/Easel4KUpdated Oct 23, 2026

ai-music

FreeSummary

Generate background music for short videos, vlogs, and social posts from descriptions of mood, style, and instruments. Download MP3 audio, optionally include sung lyrics, and use shared scripts to trim tracks, adjust loudness, or add music to videos.

  • Generating background music for a vlog intro
  • Creating instrumental music to match a social post
  • Generating a sung track from supplied lyrics
ZJU-REAL/Easel4KUpdated Oct 23, 2026

ai-video-gen

FreeSummary

Create new videos from written scene descriptions or still images using external AI services. Set the aspect ratio and duration, animate a character image, and request generated audio when the selected model supports it.

  • Generate a short video from a scene description
  • Animate a still image
  • Create character motion from a starting image
ZJU-REAL/Easel4KUpdated Oct 23, 2026

asset-manager

FreeSummary

Organize generated images, videos, and text in outputs/ by date, platform, and type. Add tags, search filenames and content, produce asset lists and reports, and preview archive moves before applying them to make past work easier to reuse.

  • Organizing generated assets by date, platform, and type
  • Finding past content through keywords and tags
  • Listing assets for a specific account or platform
ZJU-REAL/Easel4KUpdated Oct 23, 2026

audio-denoise

FreeSummary

Reduce background noise in audio recordings or video soundtracks with three processing levels. Keep the original file, create a cleaned version, and receive a report of the settings used and file details before and after processing.

  • Reducing fan or air conditioner noise in recordings
  • Cleaning speech in podcasts and interviews
  • Reducing noise in a video's audio track
ZJU-REAL/Easel4KUpdated Oct 23, 2026

audio-editing

FreeSummary

Edit audio files by trimming sections, converting formats, matching loudness, or extracting sound from videos. You can also join recordings, add fades, and change playback speed while keeping the original pitch.

  • Trim a recording to the section you need
  • Convert audio formats and match loudness
  • Extract audio from a video
ZJU-REAL/Easel4KUpdated Oct 23, 2026

See all skills by ZJU-REAL

Report a problem with this skill