# Infographic **Repository Path**: antv/Infographic ## Basic Information - **Project Name**: Infographic - **Description**: 🦋 An Infographic Generation and Rendering Framework, bring words to life with AI! - **Primary Language**: TypeScript - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2026-01-04 - **Last Updated**: 2026-01-08 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README 简体中文 | [English](/README.md)
# Infographic, 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** 是 AntV 推出的新一代**声明式信息图可视化引擎**,通过精心设计的信息图语法,能够快速、灵活地渲染出高质量的信息图,让信息表达更高效,让数据叙事更简单。

官网 GitHub 文档 示例 Prompt AI Agent

AntV Infographic 预览
## ✨ 特性 - 🤖 **AI 友好**:配置和语法更适合 AI 生成,提供简洁有效的 Prompt,支持 AI 流式输出和渲染 - 📦 **开箱即用**:内置 ~200 信息图模板、数据项组件与布局,快速构建专业信息图 - 🎨 **主题系统**:支持手绘、渐变、图案、多套预设主题,允许深度自定义 - 🧑🏻‍💻 **内置编辑器**:内置信息图的编辑器,让 AI 生成之后可以二次编辑 - 📐 **高质量 SVG 输出**:默认基于 SVG 渲染,保证视觉品质与可编辑性 ## 🚀 安装 ```bash npm install @antv/infographic ``` ## 📝 快速开始 [![](https://img.shields.io/badge/%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97-2F54EB)](https://infographic.antv.vision/learn/getting-started) [![](https://img.shields.io/badge/%E4%BF%A1%E6%81%AF%E5%9B%BE%E8%AF%AD%E6%B3%95-13C2C2)](https://infographic.antv.vision/learn/infographic-syntax) [![](https://img.shields.io/badge/%E9%85%8D%E7%BD%AE%E9%A1%B9-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 items: - label: Step 1 desc: Start - label: Step 2 desc: In Progress - label: Step 3 desc: Complete `); ``` 渲染结果如下: AntV Infographic DEMO ## 流式渲染 [![](https://img.shields.io/badge/Demo-D46A6A)](https://infographic.antv.vision/learn/infographic-syntax) 使用具有高容错性的信息图语法能够实时接收 AI 流式输出并逐步渲染信息图。 ```ts let buffer = ''; for (const chunk of chunks) { buffer += chunk; infographic.render(buffer); } ``` AntV Infographic 流式渲染 ## 💬 社区与交流 - 在 GitHub 提交你的问题或建议 - 参与 [GitHub Discussions](https://github.com/antvis/infographic/discussions) 与社区交流 - 欢迎参与贡献,一起完善 AntV Infographic! 如有任何建议,欢迎在 GitHub 上与我们交流!欢迎 Star ⭐ 支持我们。 - [AntV 官网](https://antv.antgroup.com/) - [GitHub 仓库](https://github.com/antvis/infographic) - [问题反馈](https://github.com/antvis/infographic/issues) ## 📄 许可证 本项目基于 **MIT** 许可开源,详见 [LICENSE](./LICENSE)。