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

先唠两句实在的

现在写东西、对齐方案、让 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