flint-chart 是什么?

Flint Chart 是 Microsoft 开源的语义图表编译器。JavaScript/TypeScript 包用数据字段含义、图表意图和主题生成 Vega-Lite、ECharts、Chart.js、Plotly 或原生 Excel 图表;配套 MCP server 让代理校验、渲染和交互式调整同一份 Flint spec。项目采用 MIT 许可。

⭐ 1,345 Stars 🍴 56 Forks TypeScript MIT 作者: microsoft
来源:github.com/microsoft/flint-chart 查看 GitHub 仓库 → 📘 使用教程 →

为什么值得关注

代理直接写大型后端图表 spec 容易产生无效字段、脆弱布局和跨后端差异。Flint 增加语义类型、自动布局、模板和验证层,再编译到具体图表库。0.5.x 又加入正式主题规范、Plotly 主题和 Calendar Heatmap,覆盖从数据语义到视觉系统的更多环节。

来源:github.com/microsoft/flint-chart/blob/main/CHANGELOG.md

核心功能

语义图表输入

用 Rank、Temperature、Price、Country 等 70 多种语义类型补充字段含义,让模板和格式选择不只依赖原始数据类型。

来源:github.com/microsoft/flint-chart
多后端编译

同一 ChartAssemblyInput 可输出 Vega-Lite、ECharts、Chart.js、Plotly 和原生 Excel 图表结构。

来源:github.com/microsoft/flint-chart
自动布局与主题

编译器根据基数、画布和图表类型决定尺寸、标签和图例;ThemeSpec 可使用预设、继承或自定义视觉规则。

来源:github.com/microsoft/flint-chart/blob/main/docs/theme-spec.md
本地 MCP 渲染

flint-chart-mcp 提供图表发现、验证、静态渲染和交互视图;本地模式在进程内渲染,不上传数据。

来源:github.com/microsoft/flint-chart/blob/main/packages/flint-mcp/README.md

技术架构

Flint 输入先经过 schema 与语义类型检查,优化器再根据数据基数和画布计算轴范围、band step、facet grid 与纵横比,最后由各后端动态模板生成原生 spec。flint-chart 是核心 TypeScript 库,flint-chart-mcp 在其上增加 stdio/HTTP 传输、MCP App、PNG/SVG 渲染和本地文件解析。远程 data.url 被拒绝;本地 JSON/CSV/TSV 默认可读,并在工具处理前转为内联 rows。

来源:github.com/microsoft/flint-chart/blob/main/docs/architecture.md (1) · github.com/microsoft/flint-chart/blob/main/packages/flint-mcp/README.md (2)

项目知识图谱

知识图谱:项目核心节点(中心)+ 核心功能(内环六边形)+ 关键技术依赖(外环 chip) flint-chart 0.5.1flint-chart 0.… flint-chart-mcp 0.5.1flint-chart-mc… @napi-rs/canvas 与 @resvg/resvg-js 用于本地渲染@napi-rs/canva… MCP SDK 与 ext-apps 用于工具和交互视图MCP SDK 与 ext… 语义图表输入 多后端编译 自动布局与主题 本地 MCP 渲染 flint-chart 项目本体 核心功能 关键依赖

技术栈

语言TypeScript/JavaScript;Python 端仍是源码预览框架Node.js 18+、MCP SDK、Vega-Lite、ECharts、Chart.js、Plotly、Office.js,MIT
flint-chart 0.5.1flint-chart-mcp 0.5.1@napi-rs/canvas 与 @resvg/resvg-js 用于…MCP SDK 与 ext-apps 用于工具和交互视图
库可装入 Node 项目;MCP 推荐用本地 stdio。HTTP 模式默认监听 0.0.0.0,未加外部认证层时不应暴露到不可信网络
来源:github.com/microsoft/flint-chart/blob/main/packages/flint-js/package.… (1) · github.com/microsoft/flint-chart/blob/main/packages/flint-mcp/package… (2)

快速上手

在临时 Node 18+ 项目固定安装 flint-chart@0.5.1,先用内联 data.values 编译一张最小 Vega-Lite 柱状图并检查生成 spec。接入代理时固定 flint-chart-mcp@0.5.1,优先使用 stdio,并在处理不可信输入时加 --disable-file-reference;不要把含敏感数据的请求发到公共远程 MCP。确认 validate_chart 和静态 SVG 后,再启用交互视图或其他后端。
来源:github.com/microsoft/flint-chart/blob/main/docs/tutorials/getting-sta… (1) · github.com/microsoft/flint-chart/blob/main/docs/tutorials/setup-flint… (2)

使用场景

适合让代理从结构化数据生成可验证图表、在多个前端后端间复用同一语义输入、统一品牌主题,以及在 MCP 客户端中迭代图表。需要直接使用 Vega-Lite 全部底层语法、已有固定后端 spec,或在 Python 中只通过 PyPI 安装的场景,当前 Flint 可能增加不必要的抽象或尚未满足。

来源:github.com/microsoft/flint-chart/blob/main/docs/overview.md

优势与局限

优势

  • 语义类型、布局和主题从后端 spec 中抽离
  • 一个输入可编译到五类输出,包括可编辑 Excel 图表
  • MCP 本地渲染不需要上传数据,远程 URL 默认拒绝
  • 提供中文文档、编辑器、示例和后端参考

局限

  • Python 包尚未正式发布到 PyPI,当前只适合源码贡献者
  • 本地 MCP 默认允许代理读取任意可访问的 JSON/CSV/TSV,处理不可信任务必须关闭文件引用
  • HTTP transport 默认 0.0.0.0,直接暴露可能扩大访问面
  • 不同后端能力不完全相同,编译器可能近似或无法实现某些主题决定
  • 生成 spec 和图像仍需人工检查数据含义、单位、误导性尺度和无障碍信息
来源:github.com/microsoft/flint-chart (1) · github.com/microsoft/flint-chart/blob/main/packages/flint-mcp/README.md (2)

最新版本

当前包版本 0.5.1 于 2026-08-13 进入 CHANGELOG,主要把 ThemeSpec 支持扩展到 Plotly,并新增 Vega-Lite Calendar Heatmap;0.5.0 则引入正式主题系统、10 个预设、主题发现和 Theme Lab。

来源:github.com/microsoft/flint-chart/blob/main/CHANGELOG.md

实测与证据

status: official_source_checked_not_installed_or_rendered  |  checked_at: 2026-09-23  |  environment: 核对官方 README、0.5.1 changelog、两个 package.json、MCP 文档与实现,并浅克隆 main;未执行 npm install、npx、MCP server 或图表渲染  |  limitations: 未验证包完整性、安装、类型检查、任一后端输出、主题一致性、Excel 产物、MCP 客户端兼容、PNG/SVG 渲染、HTTP 暴露或公共远程 MCP 的数据处理  |  observed_output: flint-chart 与 flint-chart-mcp 的 package.json 均为 0.5.1,要求 Node >=18;CHANGELOG 标记 0.5.1 于 2026-08-13 发布;本地文件读取默认开启,--disable-file-reference 可关闭,远程 data.url 被拒绝

来源:github.com/microsoft/flint-chart/blob/main/CHANGELOG.md (1) · github.com/microsoft/flint-chart/blob/main/packages/flint-mcp/package… (2)

同类项目对比

相比 Vega-Lite,Flint 是更高一层的语义编译器:它根据字段意义、图表意图、自动布局和主题生成 Vega-Lite,也能生成 ECharts、Chart.js、Plotly 与 Excel;Vega-Lite 本身是成熟的声明式可视化语法,控制通道、变换、组合和交互更直接。只需要 Web 可视化并熟悉 grammar 时直接用 Vega-Lite;代理要跨后端稳定生成图表时,Flint 的中间层更有用。

来源:github.com/microsoft/flint-chart (1) · github.com/vega/vega-lite (2)

总结评价

Flint 适合需要代理生成图表并跨多个后端复用语义输入的团队。先固定 0.5.1,用内联小数据和 stdio 验证编译结果;接入真实文件前决定是否关闭本地文件引用,任何对外 HTTP 部署都应另加认证、网络限制和数据审查。

来源:github.com/microsoft/flint-chart/blob/main/docs/tutorials/setup-flint…

常见问题

Flint Chart 当前稳定版本是多少?

flint-chart 和 flint-chart-mcp 当前都为 0.5.1,要求 Node.js 18 或更高。官方 CHANGELOG 将 0.5.1 标为 2026-08-13;安装时应同时固定两个包的版本。

Flint 的 Python 包可以直接从 PyPI 安装吗?

目前不可以。官方 README 和教程明确说 Python package 尚未发布,仓库中的 flint-py 是源码预览。普通用户应使用 JavaScript/TypeScript 包或 MCP server。

本地 Flint MCP 会读取任意文件吗?

默认会读取当前进程权限可访问、由 data.url 指定的本地 JSON、CSV 或 TSV。面对不可信代理或服务部署时,应添加 --disable-file-reference,只接受内联 data.values。

Flint MCP 会把图表数据上传到远程渲染服务吗?

本地 stdio server 在进程内渲染,官方称不会远程上传,并拒绝远程 data.url。若改用官方公共 HTTP MCP,请把它当外部服务,敏感数据不要发送,先核对其当前隐私与服务条款。

资料与核验范围
本文依据项目公开资料整理。版本、安装命令和功能边界可能随上游更新,请以所列来源和项目当前版本为准。 资料核对时间: 2026-09-23 10:52.

参考材料:README、GitHub API、依赖文件