microsoft/flint-chart

# Flint：面向 AI 时代的可视化语言 [](https://www.npmjs.com/package/flint-chart) [](https://www.npmjs.com/package/flint-chart-mcp) [](https://github.com/microsoft/flint-chart/actions/workflows/ci.yml) [](LICENSE) **请访问：** [**Flint 项目站点**](https://microsoft.github.io/flint-chart/) | [**MCP Server 指南**](https://microsoft.github.io/flint-chart/#/mcp) Flint 是一种可视化中间语言，它允许 **AI agent 通过简单、易于人工编辑的图表规格，创建富有表现力且精美的可视化效果**。 Flint 编译器不再要求 agent 或开发者去调整诸如比例尺、坐标轴、间距、标签和布局等冗长的图表配置细节，而是直接从数据、语义类型、图表类型和编码中推导出优化的图表设置。其结果是一个紧凑的图表规格：agent 可以可靠地生成它，人们可以直接编辑它，并且多个后端可以将其渲染为原生的 [Vega-Lite](https://vega.github.io/vega-lite/)、 [ECharts](https://echarts.apache.org/) 或 [Chart.js](https://www.chartjs.org/) 规格。 此代码库包含两个主要组件： - **`flint-chart`**：一个 JavaScript/TypeScript 库，可将相同的 Flint 输入编译为 Vega-Lite、ECharts 或 Chart.js 规格。 - **`flint-chart-mcp`**：一个 MCP server，可让 agent 直接在聊天或编码环境中创建、验证和渲染图表。

## 功能特性 - **语义图表规格。** Flint 使用 70 多种语义类型（例如 `Rank`、`Temperature`、`Price` 或 `Country`）来捕获每个字段的含义。 - **自动布局。** Flint 会根据数据基数、图表设计和画布约束，自适应调整大小、间距、标签、标记和图例。 - **多个后端。** 将一种输入编译为跨 [Vega-Lite](https://vega.github.io/vega-lite/)、 [ECharts](https://echarts.apache.org/) 和 [Chart.js](https://www.chartjs.org/) 的 30 多种图表类型，未来还将支持更多。 - **Agent 就绪的图表创作。** MCP server 为 agent 提供了 Flint 工具和图表指南，以便它们选择模板、进行验证，并在支持 MCP 的客户端中打开交互式图表视图。

_{Flint turns compact chart specs into backend-native specs and rendered visualizations.}

## 安装 ``` # 在你的 JavaScript/TypeScript codebase 中使用 Flint npm install flint-chart # 针对 agents 和 MCP clients npx -y flint-chart-mcp ```

_{Python 包：即将发布。当前的 Python 移植版本仅为本代码库中的源码预览版。}

## 将 Flint 作为库使用 每个后端都接受相同的 `ChartAssemblyInput` 并返回目标库的原生 spec 对象。 ``` 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 }, }, }); // → a ready-to-render Vega-Lite spec ``` 无需更改输入结构即可切换后端： ``` import { assembleECharts, assembleChartjs } from 'flint-chart'; const echartsOption = assembleECharts(input); const chartjsConfig = assembleChartjs(input); ``` 请参阅 [API 参考](docs/api-reference.md)、[后端参考](docs/reference-vegalite.md)和[在线编辑器](https://microsoft.github.io/flint-chart/#/editor)以获取更多库示例。 ## 将 Flint 作为 MCP Server 使用 当你希望 agent 在问题发起的同一对话中创建图表时，请将 `flint-chart-mcp` 安装为 [Model Context Protocol](https://modelcontextprotocol.io/) server。它可以打开交互式图表视图、返回静态 PNG/SVG 输出，或者生成后端原生的图表 spec。 要进行设置，请从 [Flint MCP 项目页面](https://microsoft.github.io/flint-chart/#/mcp)开始。其中包含客户端配置、使用示例以及深入参考资料的链接。

MCP 调用允许 agent 直接将数据行作为 `data.values` 嵌入，或者通过 `data.url` 读取本地 JSON、CSV 或 TSV 文件。对于不使用 MCP 的 agent 工作流，请使用独立的 [agent skill](agent-skills/flint-chart-author/SKILL.md)。 ## 代码库概览 ``` flint-chart/ ├── packages/ │ ├── flint-js/ npm package `flint-chart` (TypeScript) │ │ └── src/ │ │ ├── core/ semantics, layout, decisions, shared types │ │ ├── vegalite/ Vega-Lite backend │ │ ├── echarts/ ECharts backend │ │ ├── chartjs/ Chart.js backend │ │ └── test-data/ fixtures + generators (drive tests and the gallery) │ ├── flint-py/ Python port preview (package to be released) │ └── flint-mcp/ npm package `flint-chart-mcp` (MCP render server) ├── site/ Vite + React demo: landing, gallery, editor, docs ├── agent-skills/ fallback copy of the MCP-served agent skill ├── shared/test-data/ JSON fixtures shared across JS + Python └── docs/ architecture and design documents ``` ### 文档 [项目站点](https://microsoft.github.io/flint-chart/)是获取示例、在线编辑器和概念文档的主要入口。有关源代码级别的参考，请从 [API 参考](docs/api-reference.md)、[Flint MCP 项目页面](https://microsoft.github.io/flint-chart/#/mcp)或[开发指南](docs/DEVELOPMENT.md)开始。 ## 贡献者 Flint 由 [Microsoft Research](https://www.microsoft.com/en-us/research/) 与中国人民大学 [IDEAS Lab](https://ideas-lab.net/) 合作构建。我们欢迎您的加入——请参阅[贡献指南](#contributing)参与进来。 一篇描述 Flint 的研究论文即将发布。 ## 商标 本项目可能包含项目、产品或服务的商标或徽标。Microsoft 商标或徽标的授权使用受 [Microsoft 商标与品牌指南](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general)的约束并必须遵循该指南。 在修改后的本项目中使用 Microsoft 商标或徽标时，不得引起混淆或暗示 Microsoft 的赞助。任何第三方商标或徽标的使用均受这些第三方政策的约束。 ## 许可证 [MIT](LICENSE) © Microsoft Corporation

标签：数据可视化, 自动化攻击