Flint 完全指南：微软开源可视化中间语言，让 AI Agent 一句话生成专业图表

当 AI 编码 Agent 能写代码、改代码、甚至部署应用时，有一个领域始终是个短板——让 Agent 把数据变成好看的图表。

你现在可以让 Claude Code 或 Codex 用 Python 的 matplotlib 画图，但出来的是一张需要手动调整字体、轴距、图标的半成品。你也可以让它调 ECharts 配置，但传给 Agent 的 JSON 动辄 30+ 个嵌套字段，Agent 经常把 labels、scales、legends 搞混。更好的方案是让 Agent 写 Vega-Lite 规范——但学习曲线和配置复杂度更加劝退。

微软研究院 + 中国人民大学 IDEAS Lab 联合推出了 Flint，一个可视化中间语言。它的思路和 TypeScript 之于 JavaScript 很像——不直接渲染，而是编译：Agent 写 10 行简洁的 Flint 规范，Flint 编译器自动为你生成 Vega-Lite、ECharts 甚至 Chart.js 的可渲染图表。而且它还附带了一个 MCP 服务器，让 AI Agent 在对话中直接创建和预览图表，全程无需离开聊天窗口。

安装与配置

Flint 有两个 npm 包，安装都非常简单：

npm install flint-chart

npx -y flint-chart-mcp

目前版本是 v0.2.0（MIT 许可证）。Python 版已发布预览版（packages/flint-py），PyPI 正式包将在后续版本中推出。

核心概念：语义类型 + ChartAssemblyInput

Flint 的核心理念是 ChartAssemblyInput——一个同时描述「数据是什么」和「图表长什么样」的输入结构。它包含三个部分：

语义类型是 Flint 最巧妙的设计。传统图表库要求你定义 scales、axes、tick counts——这是「渲染的细节」。Flint 让你定义数据是什么：Price（价格）、Temperature（温度）、Country（国家）、Rank（排名）、Quantity（数量）……目前支持 70+ 种语义类型。

编译器知道「温度」通常用暖色渐变、「排名」应该降序排列、「国家」需要用不同颜色区分——这些专业知识被内置在编译器里，Agent 只需要告诉它数据的语义就行。

三个后端一键切换

Flint 目前支持三个渲染后端，输入一模一样：

import { assembleVegaLite, assembleECharts, assembleChartjs } from 'flint-chart';

const input = {
  data: { values: myData },
  semantic_types: { weight: 'Quantity', mpg: 'Quantity', origin: 'Country' },
  chart_spec: {
    chartType: 'Scatter Plot',
    encodings: { x: { field: 'weight' }, y: { field: 'mpg' }, color: { field: 'origin' } },
    baseSize: { width: 400, height: 300 },
  },
};

// 三个后端，同一个输入
const vlSpec = assembleVegaLite(input);   // → Vega-Lite 规范
const ecSpec = assembleECharts(input);    // → ECharts 配置
const cjsSpec = assembleChartjs(input);   // → Chart.js 配置

这意味着你完全不需要改 chart_spec 结构——切后端只需要换导入的函数名。目前支持 30+ 种图表类型，包括折线、柱状、散点、热力图、箱线图、桑基图、雷达图等。

MCP Server：Agent 的绘图工具箱

Flint 的 MCP 服务器 flint-chart-mcp 是为 AI Agent 量身定做的。安装后，Agent 通过 MCP 协议与它交互——不需要写代码，直接在对话中描述即可。

MCP 工具概览：

在 Claude Code 中使用（MCP 配置）：

{
  "mcpServers": {
    "flint-chart": {
      "command": "npx",
      "args": ["-y", "flint-chart-mcp"]
    }
  }
}

配置完成后，你可以这样对 Claude Code 说：

“用 flint-chart 画一张散点图，横轴是 weight（重量），纵轴是 mpg（油耗），按 origin（产地）着色”

Agent 会先通过 list_chart_types 获取可用图表类型，生成 ChartAssemblyInput，再通过 create_chart_view 打开交互式图表——全程自动化。

实战：从 CSV 到交互式图表

假设你有一个汽车数据 CSV（包含 weight、mpg、origin 三个字段），想让 Agent 画一个「不同产地汽车的重量 vs 油耗分布图」：

步骤 1：将 CSV 转换为内联 JSON（或读取文件 URL）

步骤 2：定义 ChartAssemblyInput（Agent 自动完成）

const input = {
  data: { values: carData },
  semantic_types: { weight: 'Quantity', mpg: 'Quantity', origin: 'Country' },
  chart_spec: {
    chartType: 'Scatter Plot',
    encodings: {
      x: { field: 'weight' },
      y: { field: 'mpg' },
      color: { field: 'origin' },
    },
    baseSize: { width: 500, height: 350 },
  },
};

步骤 3：通过 MCP 调用渲染

Agent 通过多步 MCP 调用完成整个流程：先用 validate_chart 验证 spec 合法性，然后用 compile_chart 编译为后端原生规范，再通过 create_chart_view 打开交互式图表视图供你实时调整。整个过程 Agent 不需要手动调任何 scales、axes、legends——Flint 的布局引擎自动处理了图例位置、轴标签字体、数据点透明度等细节。

注意事项

• Flint 不是渲染器——它编译输入为现有图表库的规范，不直接画图。你需要将输出传给 Vega-Lite、ECharts 或 Chart.js 的渲染器
• Python 包尚未发布：当前 Python 版是源码预览，正式 PyPI 包还在路上
• 样式定制有限：Flint 擅长自动布局和语义映射，但如果需要精确控制（参考线、阴影带、特定字体），需要通过 Vega-Lite 的 escape hatch 手动调整
• 数据预处理在前：Flint 不内置聚合/过滤/关联功能——需要先在代码中处理好数据，再传入 Flint

总结

Flint 解决了 AI 生成图表的一个根本矛盾：Agent 能读懂数据语义（价格、温度、国家），但必须用渲染库的坐标系语言（scales、axes、ticks）来表达。作为中间语言，Flint 让 Agent 专注于「数据在讲什么故事」，把「怎么把故事画好看」留给编译器。如果你在用 Claude Code、Cursor 或 Codex 处理数据类任务，装上 flint-chart-mcp 就能让 Agent 直接产出可用的图表——不需要手动调一句话。

相关链接：

• GitHub: microsoft/flint-chart
• Flint 项目主页
• npm: flint-chart
• Flint MCP 指南