Flint Chart Skill：让 AI Agent 一句话出可编辑图表的微软可视化中间层

Skill超级捕获手技术创作者 2026-07-29 12 阅读

AI Agent 做图表这件事，到 2026 年 7 月终于有了一套「不靠 prompt 玄学」的标准答案。微软开源的 Flint Chart 用一种可视化中间语言，把「让 LLM 写图表」从猜字段、调配色、对齐轴线这些脏活里彻底解放出来——agent 只管告诉它「这是散点图，x 是重量、y 是油耗、颜色是产地」，Flint 编译器自动派生刻度、零基线、配色、数字格式、排序方式。今天它登上 GitHub Trending TypeScript 日榜，仅一日就新增 115 星。

功能与原则

Flint 是一套面向 AI 时代的可视化中间语言，核心由两个包组成：

flint-chart：JS/TS 编译器库。同一份 Flint 输入可一键编译为 Vega-Lite、ECharts、Chart.js、Plotly 四种前端生态的原生 spec，也可输出 Office.js 可编辑的 Excel 原生图表。
flint-chart-mcp：Model Context Protocol 服务器，让 Agent 在对话中直接创建、校验、渲染图表，支持交互式视图与 PNG/SVG 静态导出。

设计原则是「语义优先，自动派生样式」：Flint 内置 70+ 语义类型（Rank、Temperature、Price、Country、Date…），agent 只需把字段标注成对应类型，剩余样式决策（sizing、spacing、labels、marks、legends）由编译器根据数据基数、图表类型、画布约束自动推导。

认可度

GitHub Stars：2,440 颗（截至 2026-07-29）
Forks：134
今日新增：115 stars（GitHub Trending TypeScript 日榜在榜）
NPM 周下载量：14,103 次（统计周期 2026-07-22 至 2026-07-28）
发布节奏密集：v0.2.1（7/13）→ v0.2.2（7/15）→ v0.3.0（7/19）→ v0.4.0（7/24），平均不到一周一个版本
学术背书：arXiv 论文 2607.20775
维护主体：微软官方仓库 @microsoft

链接

GitHub：https://github.com/microsoft/flint-chart
Agent Skill 定义文件：https://github.com/microsoft/flint-chart/blob/main/agent-skills/flint-chart-author/SKILL.md
项目站：https://microsoft.github.io/flint-chart/

原作者

核心维护者：@Chenglong-MS、@zl190、@IAMkecheng（微软数据可视化团队）
贡献者：仓库 Built by 列表里还能看到 @claude（即 Anthropic Claude Code 的提交账号），说明该项目本身就是「Agent 协作开发」的真实样本

介绍

Flint 解决的是 LLM 生成图表的「最后一公里」难题。过去让 Agent 写图表，要么直接吐 Vega-Lite JSON（容易翻车：字段名拼错、零基线丢失、配色冲突），要么用 Matplotlib 跑代码（用户得装 Python 环境）。Flint 把这两条路压成一份人可读、Agent 可写、机器可编译的中间表示。

ChartAssemblyInput 是 Flint 的统一输入结构，包含三块：data（行数据或 URL）、semantic_types（字段→语义类型映射）、chart_spec（图表类型与通道编码）。Agent 不需要关心目标后端的样式细节，编译器会按语义类型推导最优呈现。

仓库里还附带了一份完整的 flint-chart-author Agent Skill——SKILL.md 详细说明了 Agent 应在什么场景下使用纯 spec 模式、MCP 渲染模式或工程集成模式，并配了一张完整的「校验清单」。这意味着任何支持 Skills 协议的客户端（Claude Code、Cursor、Codex 等）都可以直接加载这份 skill。

特点

70+ 语义类型：Rank、Temperature、Price、Country、Date 等，覆盖绝大多数业务场景
5 大后端：Vega-Lite、ECharts、Chart.js、Plotly、Excel 原生图表，一份输入五种输出
自动布局：根据数据基数、画布尺寸自动调整 sizing、spacing、labels、legends
MCP 一等公民：flint-chart-mcp 让 Agent 在对话窗口里直接出交互式图表视图（create_chart_view）或 PNG/SVG（render_chart）
可编辑 Excel 输出：v0.4.0 新增 18 种 Excel 原生模板，输出后用户可在 Excel 里继续手工调整

使用方法

场景一：纯 Spec 模式（Agent 直接给输入，不渲染）

{
  "data": { "values": [{"weight":3000,"mpg":18,"origin":"USA"}, ...] },
  "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}
  }
}

场景二：MCP 渲染模式

npx -y flint-chart-mcp

启动后，Agent 工具面板会出现 create_chart_view、render_chart、validate_chart、compile_chart、list_chart_types 五个工具，默认走 create_chart_view 拿到交互式图表。

场景三：JS/TS 工程集成

npm install flint-chart
npm install vega vega-lite vega-embed   # Vega-Lite 渲染
npm install echarts                     # 或 ECharts
npm install chart.js                    # 或 Chart.js

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

const vegaLiteSpec = assembleVegaLite(input);
const echartsOption = assembleECharts(input);
const chartjsConfig = assembleChartjs(input);

Python 包计划在后续版本发布，目前仓库里有 source-only 预览。

使用场景与人群

AI 编程助手/Agent 产品：让 Claude Code、Cursor、Codex 等 Agent 在对话中直接出可编辑图表，无需用户自己打开 Excel 或写 Matplotlib
数据分析 notebook：Jupyter 用户把 Flint 当可视化层，先用 pandas 做数据变换，再让 Flint 渲染
报表自动化平台：BI 工具接入 flint-chart-mcp，用户用自然语言要图，平台自动产出可嵌入网页的图表组件
企业内部 Agent：周报、月报 Agent 调 flint-chart-mcp 自动渲染关键指标图

目标用户：前端工程师、数据分析师、Agent 应用开发者、需要把「自然语言→图表」做成产品的团队。

输入与输出案例

案例 1：销量趋势折线图

输入（语义 spec）：

{
  "data": {
    "values": [
      {"month":"2026-01","revenue":120000,"region":"华东"},
      {"month":"2026-02","revenue":135000,"region":"华东"},
      {"month":"2026-01","revenue":85000,"region":"华南"},
      {"month":"2026-02","revenue":92000,"region":"华南"}
    ]
  },
  "semantic_types": {"month":"Date","revenue":"Price","region":"Country"},
  "chart_spec": {
    "chartType": "Line",
    "encodings": {"x":{"field":"month"},"y":{"field":"revenue"},"color":{"field":"region"}}
  }
}

输出：自动生成的 Vega-Lite spec，含双线对比、按区域着色、Y 轴人民币千分位、零基线锁定、X 轴按时间排序——agent 完全没写这些样式。

案例 2：Bump Chart（v0.4.0 新增模板）

输入：字段包含 rank（语义 Rank 类型）、date、brand。Flint 编译器识别 Rank 类型后自动选择 Bump Chart 模板，输出 Chart.js 原生 spec，渲染出排名随时间变化的折线图。

如果你的 Agent 还在为「画一张能看的图」反复纠结字段映射、刻度范围、配色对齐，直接装上 Flint Chart——让 spec 写起来像在描述意图，让图表自己决定样式。开源、MIT、微软官方维护，这套「可视化中间层」思路很可能成为 Agent 出图的事实标准。

GitHub: https://github.com/microsoft/flint-chart

评论区

0 条评论

登录后可评论。