ReaderMX.
alitrack

AI做图表总翻车？微软发现不是AI的问题，是语言的问题

aalitrack约 5 分钟

你让 ChatGPT 画个热力图。它吭哧吭哧写了 200 行 Vega-Lite 代码。轴标签重叠了。色阶选错了。Legend 盖住了数据。

你让它改。它又写了 200 行。这次 Legend 好了，但 X 轴日期变成了乱码。

这不是段子。任何一个试图让 AI 画过图表的人，都经历过这个噩梦。

微软研究院最近开源了一个项目，叫 Flint。他们给这个问题找到了一个出人意料的答案：不是 AI 不行，是可视化语言太低级了。

想象一下：你让一个翻译把中文译成英文，但要求他同时指定每个单词的字体、字号、行距和页边距。这不是翻译的工作，这是排版工的工作。现在的 Vega-Lite、ECharts、Chart.js 就是这样的——它们要求 Agent 在描述「我想表达什么」的同时，还要精确控制 scale、axis、color scheme、spacing 这些和表达意图无关的底层参数。

Flint 做的事情很简单：在 Agent 和渲染库之间，插入一个编译器。

● ● ●

Flint 是什么

Flint 是一种可视化的「中间语言」。你只需要告诉它三件事：

  1. 01数据是什么（data）
  2. 02每列数据意味着什么（semantic types，比如「这列是年月」「那列是利润」）
  3. 03想画什么图（chart type + encodings）

编译器自动处理剩下的一切——时间解析、坐标轴格式、色阶、diverging midpoint、cell 尺寸、legend 位置。一份 spec，同时编译到 Vega-Lite、ECharts、Chart.js。

举个例子。如果你想画一个「新用户月度热力图」，Flint 的 spec 长这样：

{
  "data": { "values": [...] },
  "semantic_types": {
    "period": "YearMonth",
    "newUsers": "Profit",
    "game": "Category"
  },
  "chart_spec": {
    "chartType": "Heatmap",
    "encodings": {
      "x": "period", "y": "game", "color": "newUsers"
    },
    "chartProperties": { "colorScheme": "redblue" }
  }
}

就这些。YearMonth 告诉编译器这个字段是时间，需要按月解析和格式化。Profit 告诉编译器用 diverging 色阶，midpoint 设在 0。编译器补全剩余几十个底层参数，生成一份可以直接渲染的 Vega-Lite / ECharts / Chart.js spec。

如果你想把热力图换成旭日图（Sunburst），只需要改 chartType 和 encodings。Vega-Lite 不支持旭日图？没关系，切换到 ECharts 后端就行——spec 不变。

● ● ●

70+ 种语义类型，编译器替你决策

Flint 的核心创新在于一个包含 70 多种语义类型的系统。不是 quantitative / nominal 这种底层抽象，而是 YearMonth、Profit、Temperature、Rank、Delta、Country 这种有领域含义的类型。

每种类型携带了足够的信息让编译器做正确的事：

  • Profit → diverging 色阶，midpoint=0，正绿负红
  • YearMonth → 时间解析器 + 月份格式标注
  • Temperature → sequential 色阶，从蓝到红
  • Rank → ordinal scale，按排名排序
  • Country → 地理映射，考虑名称变体

Agent 擅长推断语义——看到一列值在 -10000 到 +10000 之间，叫 netChange，它很容易猜出这是 Profit。但它很难猜出 Vega-Lite 里应该用 scale.domainMid: 0 还是 scale.scheme: "redblue"。

Flint 把前者交给 Agent，把后者交给编译器。

● ● ●

弹性布局：图表自己会「长」

Flint 的第二个核心设计是弹性布局引擎。基于弹性模型（elastic layout model）和 banking 原则，编译器动态管理 sizing、spacing 和排列。

随着数据密度增加——比如分组柱状图从 5 个分组变成 22 个——Flint 自动拉伸画布、压缩 band width，像弹簧一样适应容器。你不需要手动调 bandPadding 或 width.step。

● ● ●

数据说话：Flint 比直接写 Vega-Lite 强在哪里

微软研究院在 Tidy Tuesdays 数据集上做了对比实验。基线是 DirectVL——让 LLM 直接生成完整的 Vega-Lite spec。评估方式是 LLM-as-Judge 打分：

模型DirectVLFlint提升
GPT-5.115.9116.27+2.3%
GPT-5-mini15.6016.16+3.6%
GPT-4.115.3415.91+3.7%

模型越弱，Flint 优势越明显。这验证了核心假设：降低 spec 复杂度 = 提升 Agent 可靠性。

● ● ●

已经投入实战：Data Formulator

Flint 不只是实验室论文（论文即将发布）。它已经集成到了 Data Formulator 中——微软研究院另一个 AI 数据分析工具，GitHub 上 15,900+ stars。

Data Formulator v0.7 起用 Flint 作为语义图表引擎。用户上传 CSV 或连数据库，Agent 探索数据，Flint 负责把所有查询结果变成精美的 30+ 种图表。v0.8 alpha 刚在 7 月 14 日发布，进一步深化了 Agent 驱动的工作流。

● ● ●

MCP 协议：Agent 一键调用

Flint 提供了开箱即用的 MCP server：

npx -y flint-chart-mcp

配置到 Claude Desktop 或任意 MCP 客户端后，Agent 可以在对话中直接创建图表——内联数据或读取本地 JSON/CSV/TSV 文件，输出交互式预览、PNG/SVG 静态图或后端原生 spec。

还提供了独立的 Agent Skill 定义，不依赖 MCP 也能用。

● ● ●

一个待解决的短板

Flint 目前的生产级实现是 TypeScript/JavaScript。Python 移植版（flint-py）仍处于源码预览阶段，尚未发布到 PyPI。对于 Python 数据分析生态（pandas、Polars、Jupyter）来说，这是最大的等待项。

好消息是微软研究院和中国人民大学 IDEAS Lab 联合开发，团队稳定。项目从 5 月 13 日首次提交到 7 月 8 日正式发布，节奏很快。1300+ stars，MIT 协议，可放心使用。

● ● ●

结论：可视化进入了编译器时代

Flint 做的事，本质上是把可视化设计决策从手写代码推到了编译器一层。这和编程语言从汇编到 C 到 Python 的逻辑一样——每一代都让人类（或 AI）更专注于「说什么」，而不是「怎么说」。

对于做数据分析工具的人来说，Flint 提供了一个可参考的架构：语义类型系统 + 编译器 + 多后端适配。对于用 AI 做数据分析的人来说，Flint 解决了那个最烦人的最后一公里问题——结果算出来了，图表做不出来。

GitHub: github.com/microsoft/flint-chart

官网: microsoft.github.io/flint-chart

HN 讨论: 309 points, 114 comments——社区热度说明这个痛点有多普遍。

试试看：npx -y flint-chart-mcp，配到你的 Claude Desktop 里，让它帮你画张图。如果跑通了告诉我。

你让 AI 做过图表吗？效果怎么样？评论区聊聊。

KEEP THE THREAD GOING

更多来源文章