实测出圈！ AI 时代写文档， AntV Infographic 信息图+IDE+VitePress 插件，可视化直接拉满！

[liushoukun]

先唠两句实在的

现在写东西、对齐方案、让 AI 帮忙改稿，纯文本形态越来越吃香。我自己感触特别深的一点是：同样一页「讲清楚一件事」，如果你甩给模型的是 Markdown，往往比甩一份 PPT 或一大坨二进制/富文本要省 Token 、也好 diff。

为啥？ Markdown 本质上就是结构化 plain text：字号版式少、废话少，上下文窗口里信息密度高；改一行就是改一行，人和 AI 都能精准 patch，不用在幻灯片里找「第几页第几个文本框」。所以不是说 PPT 没用——汇报、路演它依然强——而是日常技术沉淀、立项说明、方案评审材料，用 Markdown 存仓库里，更贴程序员工作流，也更贴 AI 协作流。

---

AntV Infographic 在解决啥

这时候 AntV Infographic（官网）就挺对胃口：它把「信息图」做成声明式的——你用一套清晰的配置（加上海量官方模板），就能把层级、时间轴、对比、列表叙事这类东西渲染成漂亮的 SVG。它不是替代 Mermaid ，更像是：Mermaid 啃技术图，Infographic 啃偏叙述、偏展示的信息图，文档里可以并排用。

而且它和 AI 很搭：官网也有 AI Infographic 这类玩法，大意就是大模型帮你从一段话里抽结构、吐配置，你再微调。你完全可以自己在 IDE 里用 AI 生成/改 DSL ，只要最后落在文本里，就还是 Markdown 那套「省 Token 、可版本管理」的好处。

在文档中写一个 infographic 块，即可预览好看的信息图

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

```

---

程序员写文档，到底卡在哪

咱们平时折腾的几类东西，听起来都是「文档」，痛点其实不一样：

• 技术方案、架构说明：要流程图、要模块关系，Mermaid 这类很顺手；
• 立项背景、路线图、对比表、时间线：更偏「讲故事、摆结构」，有时候 Mermaid 画起来别扭，你又会想：要不要去 Figma 、PPT 、某个在线白板里撸一版「好看点的图」，再截图贴回 Markdown？

这一贴，麻烦就来了：图和字两套源，改个字要重新导出；IDE 里看不到最终长啥样，只能切出去预览；更难受的是——你明明开着 Cursor / Copilot ，想让 AI 帮你改文案、改结构，结果可视化那块在另一个工具里，AI 帮不上忙，你也很难当场肉眼 check。

说白了：内容在仓库里是文本，可视化却漂在外面，AI 时代最香的「人机一起迭代」在这里断了。

---

那 IDE 里不能预览，不是白搭吗

对，如果只能在浏览器或外部工具里看，上面说的闭环还是瘸的：你在 VS Code / JetBrains 里写 ```infographic，预览是一片空白或者一坨代码，你就还是得外置设计 → 贴图，AI 也只能对着截图干瞪眼。

所以我自己这边参与维护的 antv-infographic-markdown-preview-plugins 想解决的就一件事：在你本来就在写代码的那个编辑器里，Markdown 预览直接渲染 Infographic。这样你可以一边让 AI 改 DSL/改文案，一边马上看见对不对，人和模型都在同一份文本上迭代，不用来回切 App 。

装起来也简单：

• VS Code / Cursor：Marketplace 或 Open VSX；
• JetBrains：插件市场 搜 AntV Infographic Markdown Preview。

支持 ```infographic 代码块预览，也支持 .infographic 独立文件，侧栏还能开个 Webview 做编辑、预览、导出图——本地跑，不依赖外面随便哪个渲染服务，离线写文档也踏实。

最小例子长这样，保存后打开 Markdown 预览就能看见图：

```infographic
infographic list-row-simple-horizontal-arrow
data
  lists
    - label Step 1
      desc Start
    - label Step 2
      desc In Progress
```

插件从需求到多 IDE 适配，我自己也是大量用 AI 辅助写的——这和「文档用 Markdown 喂 AI 」其实是同一条逻辑：尽量把一切变成可 diff 的文本，让工具和模型都能插手。

---

写到这还不够：对外发文档，别人打开还是看不见

另一个常见坑是：你把带 ```infographic 的 Markdown 推到 Git 上、或用 VitePress / 静态站发出去，默认主题根本不认识这个代码块，读者看到的还是源码，体验和在 IDE 里完全两回事。

所以要补一层 站点侧 的渲染。vitepress-plugin-legend 就是把 Markmap 、Mermaid 、AntV Infographic 一起接进 VitePress 的那类方案； Infographic 和 Mermaid 一样，带缩放、平移，大屏文档读起来不费劲。怎么装、怎么配 config / theme，直接看插件仓库里的 README 就行，这里就不重复贴一遍教程了。配好之后，正文里照样写 ```infographic 或按文档用组件引用文件，对外发的文档站才能和 IDE 里写稿看到的东西对齐。

---

串一下整条链路（看图更直观）

flowchart TB
  subgraph write [写稿阶段]
    MD[Markdown 纯文本]
    AI[IDE 里 AI 改 DSL / 文案]
    IDE[插件实时预览]
    MD --> AI --> IDE
  end
  subgraph publish [发布阶段]
    VP[VitePress 构建]
    LEGEND[vitepress-plugin-legend 渲染]
    VP --> LEGEND
  end
  IDE --> VP

---

收个尾

• AI 时代里，Markdown 这种轻量、可 diff 、好喂给模型的格式，比把内容锁在 PPT 里更省 Token 、更利于协作，这是实打实的工程体验，不是玄学。
• 技术方案、立项文档既要图又要叙事时，Infographic 补上了 Mermaid 不好扛的那一块。
• IDE 内预览插件解决「不能立刻看、AI 不好帮、人要切软件 check 」的断点；VitePress 插件解决「对外文档工具不支持渲染」的断点。两条拼起来，从写到发才算闭环。

相关仓库随手记一下，方便你复制：

• Infographic 本体：https://github.com/antvis/infographic
• Markdown 预览（ VS Code / JetBrains ）：https://github.com/liushoukun/antv-infographic-markdown-preview-plugins
• VitePress 集成：https://github.com/flingyp/vitepress-plugin-legend