Flint 图表语言

这个 Agent 能做什么，适合哪些场景？

Flint 是面向 AI 代理的可视化中间语言，使用高层语义规范表达数据字段和图表意图。仓库的 flint-chart TypeScript 库接收统一的 ChartAssemblyInput，并生成 Vega-Lite、ECharts、Chart.js、Plotly 或原生 Excel 输出。其 flint-chart-mcp 服务器让支持 MCP 的聊天或编码客户端创建、校验和渲染图表，并可返回交互式视图、PNG、SVG 或后端原生规范。布局、坐标轴、标签、图例和标记等细节由数据、图表设计及可选主题共同推导，用户仍可编辑紧凑的输入规范。项目既提供托管 HTTP MCP 端点，也支持本地运行；Python 端口目前仅为源码预览，尚未发布为软件包。

Flint 从 ChartAssemblyInput 读取内嵌于 data.values 的数据，或在 MCP 工作流中通过 data.url 读取本地 JSON、CSV、TSV 文件。输入通过 semantic_types 标注 Rank、Temperature、Price、Country 等 70 多种语义类型，并由 chart_spec 指定图表类型、编码和尺寸。assembleVegaLite、assembleECharts、assembleChartjs、assemblePlotly 和 assembleExcel 将同一输入编译成各目标后端的原生对象；theme_spec 可以选用十个内置预设，或继承预设并覆盖品牌相关设置。flint-chart-mcp 向代理提供选择模板、校验规范和渲染图表的工具，可打开交互式图表视图、返回静态 PNG/SVG，或产生后端原生规范。

1. 使用支持远程 HTTP MCP 的 Claude 用户，希望在对话中查找数据后直接生成并调整图表。
2. TypeScript 开发者需要以一种输入格式生成 Vega-Lite、ECharts、Chart.js 或 Plotly 配置。
3. 分析团队希望把同一组数据导出为网页图表或可继续编辑的原生 Excel 图表。
4. 设计系统团队需要定义一次 ThemeSpec，再把排版、颜色、图例和坐标轴规则应用到一套图表中。
5. 处理大型本地数据集的用户，希望运行本地 MCP 服务器并从 JSON、CSV 或 TSV 文件读取数据。
6. 数据产品开发者需要让图表尺寸、间距、标签和图例随数据基数及画布约束自动调整。

如何安装或部署这个 Agent？

运行环境要求 Node.js 18+。在 JavaScript/TypeScript 项目中安装库：

npm install flint-chart

本地启动面向代理和 MCP 客户端的服务器：

npx -y flint-chart-mcp

若要参与仓库开发，可安装工作区依赖并运行检查：

git clone https://github.com/microsoft/flint-chart
cd flint-chart
npm install
npm run typecheck
npm run test
npm run build
npm run site

演示站点运行于 http://localhost:5274/。源码没有说明需要 API 密钥；使用托管 MCP 服务需要网络连接，而本地文件数据需要服务器具备相应文件访问权限。

如何使用这个 Agent？

在 TypeScript 中传入数据、语义类型和图表规范：

import { assembleVegaLite } from 'flint-chart';

const spec = assembleVegaLite({
  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 },
  },
});

若要更换输出后端而保持输入结构不变：

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

const echartsOption = assembleECharts(input);
const chartjsConfig = assembleChartjs(input);
const plotlyFigure = assemblePlotly(input);
const excelArtifact = assembleExcel(input);

也可以应用内置主题：

const themedSpec = assembleVegaLite({
  ...input,
  theme_spec: 'economist',
});

远程 MCP 客户端可连接以下 HTTP 地址，无需本地启动命令：

https://flint.data-formulator.ai/mcp

README 明确列出的远程客户端包括 Claude 的自定义连接器和 VS Code 中的 GitHub Copilot。大型数据集建议使用本地 MCP 服务器。

这个 Agent 有哪些优点和局限？

这个 Agent 与同类方案有什么区别？

与相关度最高的同类 agent 并排比较关键指标。

FollowAgents 如何评估这个 Agent？

最近版本

来自该项目 GitHub Releases 的最新发布记录，说明为上游原文摘录，未经本站改写或测试。

1. 0.5.1 2026-08-14
   发布说明摘录

   flint-chart 0.5.1 Added - Plotly theme support — theme_spec now realizes onto Plotly figures. - Calendar Heatmap chart type for Vega-Lite. Titles - Headlines *and* decks are fitted instead of widening the graphic, with or without a theme. - Axis titles lie flat at the head of their own ruler; units are stated once. Grid and scales - Gridded axes round so the plot edge lands on a grid line, and the grid runs out to its number. - A chart is never left with no way to read a value — where nothing is printed, the grid returns. …

   在 GitHub 查看 ↗
2. 0.5 Flint 0.5: ThemeSpec 2026-08-06
   发布说明摘录

   Flint 0.5 introduces ThemeSpec, a formal specification for applying a coherent design system across an entire chart library. Instead of requiring creators or agents to reproduce design guidance chart by chart, a ThemeSpec participates directly in compilation and adapts to the chart's semantics, data, cardinality, and available space. A ThemeSpec shapes compilation in three stages. Using resolved semantic information, it: - governs layout constraints and dynamics, including density, spacing, sizing, and stretch limits; …

   在 GitHub 查看 ↗
3. 0.4.0 Flint 0.4 2026-07-24
   发布说明摘录

   Update 1: new plotly backend <img width="1240" height="829" alt="image" src="https://github.com/user-attachments/assets/a3514130-ad06-48e8-8458-9e828f6e50f2" /> Update 2: dynamic widget for chart type switch in the mcp server <img width="1090" height="466" alt="image" src="https://github.com/user-attachments/assets/3039761c-6d6c-456b-b6ab-66cf94c8069f" /> Update 3: Research paper Read it here, maybe also share and cite.. [https://arxiv.org/abs/2607.20775](https://arxiv.org/abs/2607.20775) Update 4: new Excel backend …

   在 GitHub 查看 ↗

常见问题