Infographic README

The project's README from github.com/antvis/Infographic. As one markdown file: README.md.

简体中文 | English

Infographic, bring words to life!

🦋 An Infographic Generation and Rendering Framework, bring words to life!

antvis%2FInfographic | Trendshift

npm version build status Visitors 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.

Website GitHub Docs Gallery Skills AI Agent

AntV Infographic Preview

✨ Features

🚀 Installation

npm install @antv/infographic

📝 Quick Start

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
      desc Complete
`);

The rendered result looks like this:

AntV Infographic DEMO

Streaming Rendering

With a highly fault-tolerant infographic syntax you can stream AI output in real time and progressively render the infographic.

let buffer = '';
for (const chunk of chunks) {
  buffer += chunk;
  infographic.render(buffer);
}
AntV Infographic Streaming Rendering

🔧 Skills Integration

AntV Infographic provides skills to integrate with AI agents:

Claude Code

Claude marketplace is now available. You can install from marketplace, or keep using manual install.

/plugin marketplace add https://github.com/antvis/Infographic.git
/plugin install antv-infographic-skills@antv-infographic

Manual install:

set -e

VERSION=0.2.4 # Replace with the latest tag, e.g. 0.2.14
BASE_URL=https://github.com/antvis/Infographic/releases/download
mkdir -p .claude/skills

curl -L --fail -o skills.zip "$BASE_URL/$VERSION/skills.zip"
unzip -q -o skills.zip -d .claude/skills
rm -f skills.zip

Codex

Enter codex

# Replace <SKILL> with the skill name, e.g. infographic-creator
# https://github.com/antvis/Infographic/tree/main/skills/<SKILL>
$skill-installer install https://github.com/antvis/Infographic/tree/main/skills/infographic-creator

🌐 Ecosystem

Community projects and products powered by AntV Infographic:

💡 Have a project using AntV Infographic? Share it in Issue #99!

💬 Community & Communication

If you have any suggestions, feel free to communicate with us on GitHub! Star ⭐ us to show your support.

📄 License

This project is open source under the MIT license. See LICENSE for details.

Infographic (antvis/Infographic)

Searching Database…

7K ·GitHub
Infographic
这是什么？AntV Infographic 是一个用于生成和渲染信息图的声明式框架。它让 AI 能够把文字描述转换成精美的信息图，并以 SVG 格式渲染输出。
这是渲染库还是完整的设计应用？它是一个 TypeScript 渲染引擎和库，内置约 200 个模板、数据项组件和布局，并不是独立的设计应用。你可以把它嵌入自己的工具中，也可以通过社区开发的应用、CLI 或编辑器扩展来使用。
怎么让它跑起来？安装 @antv/infographic 包，然后按照快速开始指南，用其声明式语法渲染信息图。你也可以为 Claude Code 或 Codex 安装 AI 智能体技能，让它们自动生成信息图。
使用它需要 AI 服务商吗？核心渲染引擎本身不需要任何 AI 服务。只有当你通过提供的技能，把它接入 Claude Code 或 Codex 等智能体，用来生成信息图语法时，才会用到 AI。
AI 流式输出时格式出错会怎样？Infographic 语法经过专门设计，容错性很高。因此即使 AI 流式输出的内容不完整或不够完美，也能逐步渲染。
它能在浏览器里运行，还是在 Node 里运行，还是两者都行？它是一个通用的 TypeScript 库，可以渲染为 SVG，同时支持浏览器和 Node 环境。周边生态还提供 CLI、VSCode 扩展和 React 封装等集成。
输出使用什么文件格式？默认渲染为 SVG。项目方表示，这样能保持较高的视觉还原度，并且方便之后再编辑。
我能用 Python 而不是 JavaScript 来使用它吗？核心库是 TypeScript/JavaScript 的，但社区维护了 feffery-infographic。这是一个 Python 封装，可以用来基于 Plotly Dash 构建信息图。
它能集成到 VS Code 或 Obsidian 这样的编辑器中吗？可以。生态中包括一个专用的 VSCode 扩展和一个 Obsidian 插件，能够直接在这两个应用中预览并渲染 Infographic 语法。
这个项目的 DeepSeek Harness 插件是什么？dsh-antv-infographic 是社区开发的 DeepSeek Harness 插件。它允许智能体在该 Harness 中流式生成、编辑和导出 Infographic 图表。
What are similar projects?bolt-slides, baoyu-skills, marp, dsh-openpencil, html-anything, deepseek-design, chubbyskills, apexcharts.js
Which topics is it in?ppt, obsidian, presentation, firefox-extension, vscode, wechat, chrome-extension, theme, svg, visualization, deepseek-harness, editor
Creator
antvis
Size
3.8 MB
Stars
7K
Updated
CommitAug 21Release0.2.19May 06
Age
1y
Commits · 90 Days