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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

爱意满满的作品展示区。

This topic created in 156 days ago, the information mentioned may be changed or developed.

上周末在 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 应用推荐更多图表，也能够用户自己选择，个人感觉不会比商业产品差，求技术大佬不要断更。

InfoGraphic

可视化组件库

antv

4 replies • 2025-11-27 09:54:39 +08:00

selca

Nov 26, 2025

有 vscode 或者 JB 的插件吗

50vip

Nov 26, 2025

@selca 没有，想法是咋样的？来一起搞一个？

50vip

Nov 26, 2025

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();

```

selca

Nov 27, 2025

@50vip #2 造轮子太麻烦了。加油