Home AIFlint: A visualization language for the AI ​​age

Flint: A visualization language for the AI ​​age

by OmarAli
Flint: A visualization language for the AI ​​age

Flint Blog | three white line icons on an abstract green background; Bar chart icon, connected node icon, flowchart icon

At a glance

  • Polished diagrams from simple specifications. Flint allows AI agents to reliably create expressive, visually sophisticated diagrams from simple, human-editable specifications.
  • Semantic Type Design Guide. Flint uses semantic data types to express the meaning of data. They help the compiler choose appropriate scales, baselines, formatting and color schemes.
  • Layouts adapt to the data. Flint automatically manages size, spacing, labels, and layout so charts remain readable as cardinality and density change without explicit user configurations.
  • A specification can target multiple backends. A single Flint specification can be compiled to Vega-Lite, Apache ECharts, or Chart.js without having to rewrite the chart from scratch.
  • Designed for agent workflows. The open source project includes the Flint Card Library and the Flint Chart MCP Serverallowing agents to create, validate, and render diagrams directly in chat or coding environments.

A dense grid displaying a diverse gallery of data visualizations. The collection displays over twenty different chart types, including stacked area charts, line charts, sunburst charts, stacked bar charts, treemaps, radar charts, Sankey charts, dense heatmaps, diverging bar charts, candlestick charts, violin charts, a choropleth map of the United States, scatter charts, clustered bar charts, waterfall charts, and parallel coordinate charts.Figure 1. Flint’s simple specification supports a diverse collection of visualizations that can be rendered using visualization libraries such as Vega-Lite, Echarts, and Chart.js.

Creating a good chart requires many design decisions: how to parse dates, whether to start a scale at zero, how to format values, how many space labels are required, and what colors make the data more readable. Modern visualization libraries such as Vega-Lite, Apache ECharts, and Chart.js make these controls available, but there is a trade-off: short specifications based on system standards often produce uninspiring charts, while sophisticated visualizations require detailed specifications with deliberately chosen parameters that are often verbose, fragile, and error-prone.

This trade-off becomes more acute as large language models (LLMs) and AI agents take on more visualization work. Agents are particularly prone to errors when they have to manage complex, low-level specification details, and the resulting fragile code can be difficult for employees to inspect, repair, or reuse. Ideally, we need something in between: a compact specification that agents can build reliably, that people can edit directly, and that a system can assemble into a well-designed diagram.

To meet this challenge, we introduce Flint (opens in new tab)a visualization intermediate language for AI-driven chart creation. Flint helps AI agents create expressive, attractive diagrams from simple, human-editable diagram specifications. Instead of requiring verbose low-level parameters for scales, axes, spacing, and layout, the Flint compiler derives optimized chart settings from the data, semantic types, chart types, and encodings. The same Flint specification can be rendered across multiple backends, including Vega-Lite, Apache ECharts and Chart.js.

A three-step diagram illustrating the Flint workflow from left to right. It starts with a short JSON code snippet called Figure 2. Flint compiles a compact, human-editable graph specification into a complete backend native specification and rendered visualization. In this heatmap example, the Flint specification names semantic types (period as YearMonth, newUsers as Profit) and maps fields to visual channels. The compiler derives the Vega-Lite details including temporal analysis, axis formatting, color scale, cell size, legend configuration and layout.

How Flint works

Figure 2 shows how the Flint compiler converts a compact graph specification into a refined heatmap.

Traditionally, to create a high-quality heatmap, we have to explicitly tell the system using low-level chart properties how to process the period field, how to properly label MonthYear values, how to size each heatmap cell, and how to choose a color scale that appropriately represents positive and negative newUsers values. Without these configurations, visualization libraries have to guess based on field names and raw values, which can result in charts that are technically valid but potentially misleading. Although important, hard coding these details can be difficult and error-prone, and they make the specification fragile and difficult for users to understand or adapt.

In Flint, these low-level details are managed systematically, with the compiler inferring them from high-level data and graph specifications. Here, the Data specification captures semantic types and optional metadata and theDiagram specification Defines the chart type and maps fields to visual channels such as X, Y, color, size, or facet. From this information, the compiler derives the parsing rules, scales, axes, aggregations, formatting, color schemes, and layout and generates the backend native specification used to render the final, sophisticated visualization. This frees users from having to explicitly specify fragile and error-prone low-level details.

Additionally, because the intermediate representation is separate from each individual rendering library, Flint can address backends with very different APIs and programming models. Users can maintain the same compact chart intent when compiling in Vega-Lite, ECharts, or Chart.js and choose the backend whose features best suit the visualization.

Video series

Second thought

A video series with Sinead Bovell about the questions everyone asks about AI. With expert voices from across Microsoft, we break down the excitement and promise of this rapidly changing technology and explore what’s evolving and what’s possible.

Flint for AI-powered visualization

Flint is well suited for LLM-based diagram generation because semantic types for models are often easier to derive than the entire set of low-level visualization parameters. Field names, value patterns, and general data knowledge can help an agent identify whether a column represents a date, price, percentage, country, ranking, or correlation. Once these meanings are explicit, the compiler can make many design decisions that would otherwise appear as brittle, library-specific code.

In our research study, we compared Flint with DirectVL, a baseline that asks the model to directly generate full (more complex) Vega-Lite specifications in an LLM self-assessment pipeline. Across three models tested based on Tidy Tuesdays test data, Flint received higher LLM judge scores overall: 16.27 vs. 15.91 with GPT-5.1, 16.16 vs. 15.60 with GPT-5-mini, and 15.91 vs. 15.34 with GPT-4.1. In fact, Flint was so powerful and reliable that it is now used to power Data Formulator (opens in new tab)a Microsoft Research project on AI-powered data analysis and visualization.

To make it easier for your agents to access Flint, we also publish flint-chart-mcpa Model Context Protocol (MCP) server that allows agents to create, validate, and display diagrams within a chat or coding environment. MCP calls can embed data inline or read configured local files, and the server can open an interactive graph view for users to review and refine the results.

A model of a chat interface for AI agents. A user sends the message, Figure 3. Once you set up flint-chart-mcp with your preferred AI client, the agent can generate interactive visualizations of Flint to answer your data exploration questions.

Try Flint

Flint is open source and ready to use:

Flint points to a common semantic layer for visualization where humans and AI agents can work with compact graph intent while a compiler processes the careful low-level details. We invite the community to explore and build on the project.



https://www.microsoft.com/en-us/research/blog/flint-a-visualization-language-for-the-ai-era/

Viral Trends

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More