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 — декларативный фреймворк для генерации и отрисовки инфографики. Он создан так, чтобы ИИ мог превращать текстовые описания в аккуратную визуальную инфографику, отрисованную в виде SVG.
Это библиотека для отрисовки или полноценное приложение для дизайна?Это движок отрисовки и библиотека на TypeScript с примерно 200 встроенными шаблонами, компонентами элементов данных и макетами. Это не самостоятельное приложение для дизайна: вы встраиваете её в свой инструмент или используете через созданные сообществом приложения, CLI или расширения для редакторов.
Как это запустить?Установите пакет @antv/infographic и следуйте руководству Quick Start, чтобы отрисовывать инфографику из его декларативного синтаксиса. Также можно установить навыки (skills) для ИИ-агентов Claude Code или Codex, чтобы генерировать инфографику автоматически.
Нужен ли мне провайдер ИИ, чтобы это использовать?Для самого движка отрисовки доступ к ИИ не нужен. ИИ подключается только тогда, когда вы подключаете инструмент к агенту вроде Claude Code или Codex и используете предоставленные навыки для генерации синтаксиса инфографики.
Что происходит, если вывод ИИ оказывается некорректным при потоковой передаче?Синтаксис инфографики специально разработан устойчивым к ошибкам, чтобы текст, который ИИ выводит потоком, можно было постепенно отрисовывать, даже если он неполный или несовершенный.
Работает ли это в браузере, в 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. Он позволяет агентам передавать, редактировать и экспортировать диаграммы 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