信息图的不可能三角，被这个开源项目打破了

作者 | 陈姚戈 最近有个段子广为流传：“4 年之前你绝对想不到，我们发现 AGI 的重要组成部分竟然是 Markdown 文档。” 好笑，但也点出了一个趋势：在生成式 AI 时代，人类与大模型高效协作的媒介，往往是结构清晰、语法简洁的纯文本格式，Markdown 这类语言正是其中的典范。 就像 vibe coding 改变了编程范式一样，以 Markdown 为语法的信息图工具也会改变内容创作者的工作流。 作为技术媒体编辑，我经常需要把文字原理翻译成清晰的信息图。最早用 PPT 手动画，后来用 Canva 这类工具，也借助 Nano Banana 等工具 AI 生成。用这些工具的时候会发现， 免费、可控和可集成，几乎是信息图工具的不可能三角。 这段时间密集使用了一个叫 AntV Infographic 的信息图生成工具，只需要提出数据、配色、风格的要求，Infographic 就能生成简明、准确、风格统一的信息图，并可以在语法编辑器内直接修改内容。 注：Infographic 网站提供 AI 生成功能。下图左边是用户的 prompt、右边是 AI 自动生成的信息图语法；上图是实时生成的图片 。 更关键的是，它内置了 200 多种模板，覆盖时间线、对比分析、层级结构等多种场景。 用户可直接在模板库中挑选合适的样式，根据内容微调几行语法，页面就能重新渲染出新图。 可以看到，Infographic 面向使用者采用了类 Markdown 的信息图语法，这套语法逻辑清晰、结构直观，即便没有编程基础，我也能快速理解上手。 注：用户可直接在Infographic网站选择合适模板，通过信息图语法或工具栏，进行样式和内容编辑。 顺手查了下它的 GitHub 页面，开源才一个多月，Star 数已经超过 2k。考虑到它的定位相当垂直，这种关注度说明它确实切中了一类现实需求。 回过头看，无论是 ECharts、D3，还是 Mermaid，它们在文本到图的转换、编辑性、风格控制上都存在局限。虽然这些工具可以手动桥接 AI 能力，但整体流程复杂、风格不可控，也难以嵌入业务系统。 AntV Infographic 补上了这一环。它是一个声明式、AI 友好、可编辑的信息图生成与渲染引擎，显著简化了从文本到图的转换流程。 Infographic 解决的不只是我个人的效率问题，还有正在快速浮现的行业需求。当 AI 成为内容生产的主力，可视化工具必须同时适应人和 AI 的需求。 当前，大量 AI Agent 应用聚焦于文字的处理与呈现，如 AI PPT、AI 流程图、AI 图表、DeepResearch 等。过去由设计师或运营人员手动构建的信息图，如今越来越多地由大模型从原始文本中自动抽取结构、选择模板、生成配置并输出可视化结果。 于是，一个关键问题浮现出来：什么样的信息图引擎，才是 AI 友好的，能同时被大模型理解生成、又被人类高效编辑？ 要回答这个问题，得从最基础的“语法”开始。 AI 友好的“信息图语法” 当 AI 成为内容生产主力，信息图的语言也得升级。它必须既符合大模型的理解和生成机制，又能保留足够的结构化语义供人类后续调整。 大模型以 token 为单位逐字生成，天然支持流式输出；而类 Markdown 语法恰好是逐行或逐块可解析的。它不依赖成对标签，而是通过缩进、连字符、空格等简单符号表达结构，用最少的 token 传递最丰富的语义。对 LLM 而言，这意味着更低的出错率、更快的生成速度和更低的推理成本。 Markdown 对人类用户同样友好。打开一份 Markdown 文件，没有编程基础的人也能立刻理解、直接修改；AI 则可基于修改后的文本继续生成。这种双向可读、可编辑的特性，正是“人机协同”的理想形态，也是像我这样的非程序员能够轻松上手 Infographic 的根本原因。 Infographic 的“信息图语法”，正是一种类 Markdown 的语法，用于描述模板、设计、数据与主题。它适合 AI 流式输出，也适合人工编写，并通过 Infographic 的 render(syntax) 直接渲染。 信息图语法以 infographic [template-name] 为入口，通过缩进块（block）组织四大核心部分： 模板（template ）：在入口处直接通过 infographic 制定。 设计块（design）：用于选择结构、卡片与标题等模块。 数据块（data ）：是信息结构的核心，通常包含标题、描述与列表项，支持嵌套层级。 主题块（theme）：用于切换主题与调整色板、字体与风格化能力。用户可以使用 Infographic 的预设主体，也可以自定义主题。 这套语法通过 render(syntax) 方法直接渲染，支持两种典型渲染模式： 常规渲染：传入完整语法，一次性生成信息图； 流式渲染：结合大模型使用，模型逐段输出后，将片段追加至缓冲区并调用 render(buffer) 重新渲染，让画面与输出同步更新。 正是这种声明式、结构化、流式友好 的设计，让 Infographic 既能被 AI 高效生成，又能被人类直观编辑，成为为 AI 时代量身打造的信息图通用语言。 面向生成式 AI 优化的信息图架构 在生成式 AI 时代，信息图的描述语言需要同时满足两个目标：能被大模型准确理解与生成，又具备清晰的结构和语义，便于人类后续编辑。传统的 JSON DSL 或静态模板，往往在表达力、灵活性和可编辑性上捉襟见肘。 为此，AntV Infographic 专门面向生成式 AI 进行了架构优化，构建了由 JSX Engine、Runtime 和 API 三层组成的系统，全面适配生成式 AI 与人机协同编辑的需求，构成了一个真正“AI 友好”的信息图语言体系。 JSX Engine：用 JSX 作为 AI 友好的信息图描述语言 传统的可视化工具普遍采用 JSON DSL 描述画布内容。 而 AntV Infographic 团队做出了一个有趣的技术选择，放弃 JSON 方案，转而采用 JSX 作为信息图的底层描述语言。 这初看有些反直觉。毕竟，从 Figma 的插件生态到许多经典的可视化库，采用轻量的 JSON 来序列化和存储画布内容，几乎是标准做法。JSON 结构清晰、对机器友好，是数据交换的理想载体。 但问题在于，当创作主体从人类转向 AI 时，JSON 的局限性便逐渐暴露。 JSON 本质上是面向程序的数据载体，缺乏语义表达力、逻辑控制能力和动态组合能力。它难以描述复杂的布局逻辑、条件分支和组件嵌套关系。为了确保数据有效性，往往还需额外引入 Schema 约束，进一步增加了复杂度。 而大模型作为"类人创作者"，更擅长理解和生成语义丰富的结构。因此，在 AI 驱动的画布生成场景中，使用代码来描述内容比使用纯数据结构更自然、更高效。 基于这一洞察，AntV Infographic 团队选择 JSX 作为信息图的描述语言，并围绕它构建了一套独立于 React 的 JSX 渲染引擎。 开发者可以直接使用 JSX 描述信息图，而渲染器会将其转化为最终的 SVG 输出。渲染引擎内置了几何图形、文本、分组等原语组件