微软发布Flint：面向AI智能体的可视化语言
阅读原文· microsoft.github.io微软这个 Flint 用语义类型代替了低层图表参数，是给 AI 代理装上了一双会画图的手，开发者现在就能装 MCP server 跑起来，做数据可视化代理的不用再跟 Vega-Lite 的细节搏斗了。
微软研究院推出Flint，一种可视化中间语言，让AI智能体通过简洁的人类可编辑spec自动生成美观图表。用户只需提供数据、语义类型和图表类型，Flint编译器即可推导坐标轴、配色、布局等底层参数。支持46种图表类型，可渲染到Vega-Lite、ECharts和Chart.js三个后端。项目通过npm安装（TypeScript/JavaScript），并提供MCP服务器用于智能体工作流集成。采用弹性布局模型自动优化图表尺寸与间距，已开源。
Flint：面向 AI 时代的可视化语言
微软研究院项目
Flint 是一种可视化中间语言，能让 AI 智能体根据简单、可人工编辑的图表描述，可靠地生成富有表现力、美观的图表。Flint 编译器无需 scale、坐标轴、间距、布局等冗长的底层参数，而是从数据、语义类型、图表类型和编码方式中推导出优化的图表设置。Flint 支持 46 种图表类型，并可渲染为 Vega-Lite、ECharts 和 Chart.js 格式。
通过 npm 安装 Flint（TypeScript / JavaScript）。
要在智能体工作流中使用 Flint，请查阅 MCP 服务器。
在示例库中探索 46 种图表类型和 83 个示例。
浏览示例库 获取 MCP 服务器 访问 GitHub
Flint 规范 在编辑器中打开 →
{ "data": {...}, "semantic_types": { "period": "YearMonth", "totalUsers": "Quantity", "gameType": "Category", "region": "Category" }, "chart_spec": { "chartType": "Line Chart", "encodings": { "column": "region", "x": "period", "y": "totalUsers", "color": "gameType" }, "baseSize": { "width": 300, "height": 600 } } }
编译后的图表
Vega-Lite ECharts Chart.js
分面折线图。各地区月度活跃用户数，按时间以小多图方式排列。
工作原理
Flint 从一个紧凑的规范开始：数据、语义类型和图表规范。编译器从中生成完整的后端原生规范（此处以 Vega-Lite 展示），填充所需的底层细节，并渲染出美观的图表。
阅读文档
Flint 规范
{ "data": {...}, "semantic_types": { "game": "Category", "period": "YearMonth", "newUsers": "Profit" }, "chart_spec": { "chartType": "Heatmap", "encodings": { "x": "period", "y": "game", "color": "newUsers" }, "chartProperties": { "colorScheme": "redblue" } } }
编译后的规范（Vega-Lite）
{ "data": {...}, "mark": { "type": "rect", "width": 47 }, "height": { "step": 29 }, "encoding": { "x": { "field": "period", "type": "temporal", "scale": { "nice": false, "domain": [ "2024-12-16T19:38:10.909Z", "2025-12-16T04:21:49.090Z" ] } }, "y": { "field": "game", "type": "nominal", "sort": null }, "color": { "field": "newUsers", "type": "quantitative", "scale": { "scheme": "redblue", "domain": [ -84108, 84108 ], "domainMid": 0 } ... // 剩余 16 行
可视化
Flint 规范
{ "data": {...}, "semantic_types": { "game": "Category", "period": "YearMonth", "newUsers": "Profit" }, "chart_spec": { "chartType": "Heatmap", "encodings": { "x": "period", "y": "game", "color": "newUsers" }, "chartProperties": { "colorScheme": "redblue" } } }
编译后的规范（Vega-Lite）
{ "data": {...}, "mark": { "type": "rect", "width": 47 }, "height": { "step": 29 }, "encoding": { "x": { "field": "period", "type": "temporal", "scale": { "nice": false, "domain": [ "2024-12-16T19:38:10.909Z", "2025-12-16T04:21:49.090Z" ] } }, "y": { "field": "game", ... // 剩余 30 行
可视化
1. 用语义类型指定
Flint 使用语义类型来捕获数据字段的含义（例如，排名、年月、差值、温度），并利用它们推断底层的图表配置，如解析、比例、坐标轴、格式化和配色方案。
编译后的图表
Flint 规范
{
"semantic_types": {
"game": "Category",
"period": "YearMonth",
"newUsers": "Profit"
},
"chart_spec": {
"chartType": "Heatmap",
"encodings": {
"x": "period",
"y": "game",
"color": "newUsers"
},
"chartProperties": {
"colorScheme": "redblue"
}
}
}
对于这张按游戏和月份展示净新增用户的热力图，Flint 根据字段的语义类型来确定时间值解析器、坐标轴格式化、以及发散配色方案和中间点。
2. 自动布局优化
Flint 基于弹性布局模型和倾斜原则优化图表布局。编译器动态管理尺寸、间距和排列，使图表完美适配画布。
密集 · 22 × 3
稀疏 · 5 × 3
随着分组条形图数量的增加，Flint 会拉长画布并缩小条带宽度，使密集版本依然能很好地适配画布，其原理类似于弹簧在可伸缩容器内自动压缩调整。
3. 易于生成和适配
无需依赖脆弱的底层参数，用户可以轻松生成和适配 Flint 规范。要更改图表设计，只需切换图表类型并重新绑定视觉编码，编译器会将新的编码选择级联应用到底层设置中。
人口金字塔图
分面条形图
用户只需切换图表类型，即可将 2000 年美国人口普查按性别和年龄分布的分面条形图轻松转换为人口金字塔图。其余工作由编译器处理。
4. 支持不同后端渲染
Flint 支持 Vega-Lite、ECharts 和 Chart.js 共 46 种图表类型，画廊中提供了 83 个特定后端的示例。尽管这些后端的 API 和编程模型各不相同，但 Flint 通过统一接口将其隐藏起来。用户可以轻松切换到不同后端，并利用其独特功能。
ECharts 旭日图
Vega-Lite 分面条形图
Vega-Lite 本身不支持旭日图，但用户可以轻松切换到 ECharts。对于可视化地区 × 游戏类型 × 游戏的层级结构，旭日图是比分组条形图更好的选择。
开始使用 Flint 构建图表。
开源且即开即用。从 GitHub 入手，或在画廊中浏览示例。
在 GitHub 上查看 · 浏览画廊
Flint 由微软研究院与中国人民大学 IDEAS 实验室合作开发。