发现一个可以补充 Mermaid 的可视化组件库 Infographic

上周末在 SEE Conf 大会上，由蚂蚁的 AntV 数据可视化团队开源 Infographic 信息图可视化。

开源地址见 antvis/Infographic
官网在这里

大概看了下，功能还是挺强的，和 Mermaid 有点像，可以互补。Mermaid 更多是一些架构图，流程图之类的技术图表，Infographic 更多的是一些文字图表，用于展示文字信息的逻辑，适用于 PPT 和写文章的场景。

两者结合一下，应该能有不错的效果。

介绍

从官网上来看，AntV Infographic 新一代信息图可视化引擎，主要的特性如下：

100+ 内置模板与组件，开箱可用；从 0 到 1 构建信息图，从未如此轻松。
让 AI 理解文本，抽取关键信息并生成配置，一键渲染专业信息图。
一键切换风格，满足不同场景需求
无需安装，在浏览器即可创作。丰富示例助你快速上手，轻松打造专业信息图。

目标：让信息图成为 AI 时代的视觉语言基础设施。

使用案例

对写代码的技术人来说，用法还是很简单的，直接用一个配置就可以渲染出一个流程图

目前从官网看内置了 100 个信息图模版，看起来都还挺好看的。

更多的模版截图，可以去这里看 Gallery。另外，看文档还可以做一些自定义开发信息图，基于 JSX 的语法，看不懂，这里就让技术大佬去看吧。

AI 应用

官网还提供了一个 AI 应用，可以输入文字，生成 Infographic 信息可视化图表，点 Chat With AI 体验，只需要填入 LLM Key ，就可以链接生成信息图了。功能很简单，也比较清晰，没有广告，但是需要自己填入大模型 Key 。

我自己使用 DeepSeek 试了一下，生成了一个 3D 的图，挺好看的，生成了 10 多次，消耗大概裁 1 分钱，还是挺节省 Token 的；另外也支持一键复制代码，然后用这个开源库进行渲染。

不过也有点问题，生成图老是这几种，没有均匀分布到 100 个信息图图表中，也不能推荐多个，可以选择，感觉可以改进一下，一定会更好用。

最后

刚刚开源不久，好像都还搜索不到，相比于 picdoc 、visdoc 、napkin 等，更关注于开源技术迭代，而且官网也很纯粹，没有什么商业感。

如果官网这个 AI Agent 应用推荐更多图表，也能够用户自己选择，个人感觉不会比商业产品差，求技术大佬不要断更。

50vip

2025 年 11 月 26 日

https://infographic.antv.vision/examples/example?template=sequence-filter-mesh-simple

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

const infographic = new Infographic({
container: '#container',
theme: 'light',
themeConfig: {
palette: 'antv',
},
template: 'sequence-filter-mesh-simple',
data: {
title: '企业优势列表',
desc: '展示企业在不同维度上的核心优势与表现值',
items: [
{
icon: 'icon:mingcute/diamond-2-fill',
label: '品牌影响力',
desc: '在目标用户群中具备较强认知与信任度',
value: 85,
time: '2021',
illus: 'illus:creative-experiment',
},
{
icon: 'icon:mingcute/code-fill',
label: '技术研发力',
desc: '拥有自研核心系统与持续创新能力',
value: 90,
time: '2022',
illus: 'illus:code-thinking',
},
{
icon: 'icon:mingcute/wallet-4-line',
label: '市场增长快',
desc: '近一年用户规模实现快速增长',
value: 78,
time: '2023',
illus: 'illus:business-analytics',
},
{
icon: 'icon:mingcute/happy-line',
label: '服务满意度',
desc: '用户对服务体系整体评分较高',
value: 88,
time: '2020',
illus: 'illus:feeling-happy',
},
{
icon: 'icon:mingcute/user-4-line',
label: '数据资产全',
desc: '构建了完整用户标签与画像体系',
value: 92,
time: '2022',
illus: 'illus:mobile-photos',
},
{
icon: 'icon:mingcute/rocket-line',
label: '创新能力强',
desc: '新产品上线频率高于行业平均',
value: 83,
time: '2023',
illus: 'illus:creativity',
},
],
},
});

infographic.render();

```