微软发布Flint：面向AI智能体的可视化语言
Show HN: 微软发布了Flint，一种用于人工智能代理的可视化语言
微软研究院推出Flint，一种可视化中间语言，让AI智能体通过简洁的人类可编辑spec自动生成美观图表。用户只需提供数据、语义类型和图表类型，Flint编译器即可推导坐标轴、配色、布局等底层参数。支持46种图表类型，可渲染到Vega-Lite、ECharts和Chart.js三个后端。项目通过npm安装（TypeScript/JavaScript），并提供MCP服务器用于智能体工作流集成。采用弹性布局模型自动优化图表尺寸与间距，已开源。
微软这个 Flint 用语义类型代替了低层图表参数，是给 AI 代理装上了一双会画图的手，开发者现在就能装 MCP server 跑起来，做数据可视化代理的不用再跟 Vega-Lite 的细节搏斗了。
Flint: A Visualization Language for the AI Era
A Microsoft Research project
Flint is a visualization intermediate language that lets AI agents reliably create expressive, good-looking charts from simple, human-editable chart specs. Instead of requiring verbose low-level parameters such as scales, axes, spacing, and layout, the Flint compiler derives optimized chart settings from the data, semantic types, chart type, and encodings. Flint supports 46 chart types, and it supports rendering in Vega-Lite, ECharts, and Chart.js.
Install Flint with npm (TypeScript / JavaScript).
To use Flint in agent workflows, check the MCP server.
Explore 46 chart types and 83 examples in the gallery.
Flint specOpen in editor →
{ "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 } } }
Compiled chart
Vega-Lite ECharts Chart.js
Faceted line chart. Monthly active users by region, laid out as small multiples over time.
How it works?
Flint starts with a compact spec: the data, semantic types, and the chart spec. From there, the compiler produces a complete backend-native spec (shown here in Vega-Lite) filling with the necessary low-level details and renders a good-looking chart.
Flint spec
{ "data": {...}, "semantic_types": { "game": "Category", "period": "YearMonth", "newUsers": "Profit" }, "chart_spec": { "chartType": "Heatmap", "encodings": { "x": "period", "y": "game", "color": "newUsers" }, "chartProperties": { "colorScheme": "redblue" } } }
Compiled spec (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 more lines
Visualization
Flint spec
{ "data": {...}, "semantic_types": { "game": "Category", "period": "YearMonth", "newUsers": "Profit" }, "chart_spec": { "chartType": "Heatmap", "encodings": { "x": "period", "y": "game", "color": "newUsers" }, "chartProperties": { "colorScheme": "redblue" } } }
Compiled spec (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 more lines
Visualization
1.Specify with semantic types
Flint uses semantic types to capture meanings of data fields (e.g., Rank, YearMonth, Delta, Temperature), and uses them to infer the low-level chart configuration like parsing, scale, axes, formatting and color schemes.
Compiled chart
Flint spec
{
"semantic_types": {
"game": "Category",
"period": "YearMonth",
"newUsers": "Profit"
},
"chart_spec": {
"chartType": "Heatmap",
"encodings": {
"x": "period",
"y": "game",
"color": "newUsers"
},
"chartProperties": {
"colorScheme": "redblue"
}
}
}
For this heatmap of net new users gains by game and month, Flint determines the temporal value parser, axis formatting, and diverging color scheme and midpoint based on the semantic types of the fields.
2.Automatic layout optimization
Flint optimizes the chart layout based on an elastic layout model and banking principles. The compiler dynamically manages sizing, spacing, and arrangement so the chart nicely fits into the canvas.
Dense · 22 × 3
Sparse · 5 × 3
As the grouped bar chart number increases, Flint stretches the canvas and reduces the band width so the dense version still fits the canvas nicely, similar to how springs settle into an expandable container.
3.Easy to generate and adapt
Without fragile low-level parameters, Flint specs can be easily generated and adapted by users. Changing a chart design requires only switching the chart type and rebinding visual encodings, and the compiler cascades the new encoding choices to the low-level settings.
Pyramid
Faceted bar
The user can easily turn a faceted bar chart of the 2000 U.S. Census population distribution by gender and age into a pyramid chart by switching the chart type. The compiler handles the rest.
4.Render with different backends
Flint supports 46 chart types across Vega-Lite, ECharts, and Chart.js, with 83 backend-specific examples in the gallery. Despite their different APIs and programming models, Flint hides them behind a unified interface. The user can easily switch to different backends and leverage their unique features.
ECharts sunburst
Vega-Lite faceted bar
Vega-Lite has no native sunburst, but the user can easily switch to ECharts. The sunburst chart is a better alternative than the grouped bar chart for visualizing the hierarchy of region × gameType × game.
Open source and ready to use. Start from GitHub or browse examples in the gallery.
Flint is built by Microsoft Research in collaboration with the IDEAS Lab, Renmin University of China.
来源：Hacker News 热门（buzzing.cc 中文翻译） · microsoft.github.io