Technology · Microsoft Research

Flint: A Visualization Language for the AI Era

Flint is a visualization intermediate language from Microsoft Research that lets AI agents create charts from simple, human-editable specs.

News AutomationCompiled 08:27 UTC · 1 min read

A sample Flint chart specification and the compiler's output shown in the project documentation. · Photo by Deng Xiang on Unsplash

1 sources

Pipeline ingest

3 reads

Positive / Neutral / Negative

1 countries

Related coverage

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 50 chart types across 5 rendering backends through one unified interface.

Install Flint with npm (TypeScript / JavaScript).

For agents, use the MCP server; see the Agent Skill for standalone guidance.

Explore 50 chart types and 121 examples in the gallery.

Flint spec:

{
 "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": 800,
 "height": 400
 },
 "chartProperties": {
 "facetColumns": 2
 }
 }
}

Faceted line chart. Monthly active users by region, laid out as small multiples over time.

Updates

July 24, 2026

Flint 0.4.0 adds 38 Plotly chart types and 18 native, editable Excel chart templates.

v0.4.0

July 19, 2026

Flint 0.3.0 adds dynamic chart widgets that switch chart types and edit chart properties in place.

v0.3.0

July 15, 2026

Flint 0.2.2 added compact dodge modes and grouped violin layouts.

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.

Read the docs

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
 }
 ... // 18 more lines

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.

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 50 chart types across Vega-Lite, ECharts, Chart.js, and Plotly, with 121 backend-specific examples in the gallery, and can emit native Excel charts through Office.js. Despite their different APIs and programming models, Flint hides them behind a unified interface.

ECharts sunburst

Vega-Lite faceted bar

Switch backends to use their native strengths: ECharts for hierarchical sunbursts, Plotly for statistical and analytical traces, or Excel for editable charts embedded in a workbook.