đŸŽ¯

infographic-template-updater

đŸŽ¯Skill

from antvis/infographic

VibeIndex|
What it does

Updates and maintains infographic templates automatically, ensuring consistency and synchronization across different template versions in the Infographic framework.

infographic-template-updater

Installation

Install skill:
npx skills add https://github.com/antvis/infographic --skill infographic-template-updater
14
Last UpdatedJan 26, 2026

Skill Details

SKILL.md

Overview

[įŽ€äŊ“中文](./README.zh-CN.md) | English

# Infographic, bring words to life!

đŸĻ‹ An Infographic Generation and Rendering Framework, bring words to life!

antvis%2FInfographic | Trendshift

[![npm version](https://img.shields.io/npm/v/@antv/infographic.svg)](https://www.npmjs.com/package/@antv/infographic)

[![build status](https://img.shields.io/github/actions/workflow/status/antvis/infographic/build.yml)](https://github.com/antvis/infographic/actions)

![Visitors](https://hitscounter.dev/api/hit?url=https://github.com/antvis/infographic&label=Visitors&icon=graph-up&color=%23dc3545&message=&style=flat&tz=UTC)

[![license](https://img.shields.io/npm/l/@antv/infographic.svg)](./LICENSE)

AntV Infographic is AntV's next-generation declarative infographic visualization engine. With a carefully designed infographic syntax, it can quickly and flexibly render high-quality infographics, making information presentation more efficient and data storytelling simpler.

✨ Features

  • 🤖 AI-friendly: Configuration and syntax are tuned for AI generation, provide concise prompts, and support AI streaming output and rendering
  • đŸ“Ļ Ready to use: ~200 built-in infographic templates, data-item components, and layouts to build professional infographics in minutes
  • 🎨 Theme system: Hand-drawn, gradients, patterns, multiple preset themes, plus deep customization
  • 🧑đŸģ‍đŸ’ģ Built-in editor: Includes an editor for infographics so AI-generated results can be edited further
  • 📐 High-quality SVG output: Renders with SVG by default to ensure visual fidelity and easy editing

🚀 Installation

```bash

npm install @antv/infographic

```

📝 Quick Start

[![](https://img.shields.io/badge/Getting%20Started-2F54EB)](https://infographic.antv.vision/learn/getting-started)

[![](https://img.shields.io/badge/Infographic%20Syntax-13C2C2)](https://infographic.antv.vision/learn/infographic-syntax)

[![](https://img.shields.io/badge/Configuration-722ED1)](https://infographic.antv.vision/reference/infographic-options)

```ts

import { Infographic } from '@antv/infographic';

const infographic = new Infographic({

container: '#container',

width: '100%',

height: '100%',

editable: true,

});

infographic.render(`

infographic list-row-simple-horizontal-arrow

data

lists

- label Step 1

desc Start

- label Step 2

desc In Progress

- label Step 3