Flint Chart 是什麼？讓 AI Agent 用語意規格可靠產生圖表

by Rain Chu | 7 月 28, 2026 | AI, skills, Tool, 圖型處理

AI Agent 很會理解「月份、營收、百分比變化」代表什麼，卻不一定能穩定處理座標軸、刻度、色階、標籤間距與版面配置，直接要求模型輸出完整 Vega-Lite 或 ECharts 規格，常見結果不是設定冗長，就是參數彼此衝突，甚至渲染後只得到空白畫布。

Flint Chart 的做法，是讓 AI 只負責描述資料的意義與圖表意圖，再由確定性的編譯器完成幾何與渲染細節，這不只是圖表工具的改良，也是一種值得用在 AI Agent 系統的架構。模型產生小型、可驗證的中介格式，程式再負責執行可重現的工作。

如果你正在用 Codex 製作視覺內容，可以先參考站內的Codex 動態圖表與短影音工作流程，Flint 則更專注在資料圖表的語意、驗證與多後端輸出。

Flint Chart 是什麼

Flint 是微軟研究院與中國人民大學 IDEAS Lab 合作開發的開源視覺化中介語言，它不是另一套直接把圖畫到畫布上的函式庫，而是位在 AI Agent 與 Vega-Lite、Apache ECharts、Chart.js、Plotly、Excel 之間的語意層。

• AI Agent 判斷欄位代表月份、價格、利潤、國家、排名或百分比變化
• Flint 規格 保存資料、語意型別、圖表種類與欄位映射
• Flint 編譯器 推導日期解析、聚合、刻度、色彩、標籤與版面
• 繪圖後端 接收原生規格並渲染互動圖表、PNG、SVG 或 Excel 原生圖表

截至 2026 年 7 月 28 日，官方 GitHub 顯示 JavaScript 與 TypeScript 函式庫已能輸出 Vega-Lite、ECharts、Chart.js、Plotly 與 Office.js 使用的 Excel 原生圖表。7 月 11 日的 iThome 報導只列出前三種，是因為後續 0.4.0 版才加入 38 種 Plotly 圖表與 18 種可編輯 Excel 範本。

為什麼 AI 直接產生圖表容易失敗

製作圖表其實包含兩種不同工作。第一種是理解語意，例如 revenue 是金額，month 是年月，growth 是百分比變化。第二種是安排幾何，例如軸的範圍、刻度密度、文字旋轉、圖例位置與色彩映射。

語言模型擅長第一種工作，第二種工作卻牽涉許多互相依賴的數值與規則。Flint 把兩者拆開後，AI 不必一次猜完所有低階設定。規格也從難以檢查的大段設定，縮成可閱讀、可修改、可在渲染前驗證的小型 JSON。

模型負責意義，編譯器負責數學。真正的價值不是少寫幾行，而是讓每一步都能被驗證與重現。

Flint 規格的三個核心部分

一份 Flint 輸入主要由資料、semantic_types 與 chart_spec 組成。下面用季度營收長條圖示範最小結構。

{
  "data": {
    "values": [
      { "quarter": "Q1", "revenue": 1200 },
      { "quarter": "Q2", "revenue": 1450 },
      { "quarter": "Q3", "revenue": 980 },
      { "quarter": "Q4", "revenue": 1800 }
    ]
  },
  "semantic_types": {
    "quarter": "Quarter",
    "revenue": "Price"
  },
  "chart_spec": {
    "chartType": "Bar Chart",
    "encodings": {
      "x": { "field": "quarter" },
      "y": { "field": "revenue" }
    },
    "baseSize": { "width": 480, "height": 320 }
  }
}

data 可以直接放入列資料，也能在本機 MCP 模式下引用 JSON、CSV 或 TSV 檔案。semantic_types 告訴編譯器每個欄位的實際意義。chart_spec 則決定圖表種類，以及欄位要放在 x、y、color、size、shape、column、row、group 或 detail 等通道。

語意型別可以重複使用。探索同一份資料時，多半只要更換 chart_spec。例如把 Quantity 改成 PercentageChange，編譯器就能改用適合正負變化的發散色階、百分比格式與對應的軸設定。這比每次都讓模型重新生成完整圖表設定更穩定。

在 Codex 安裝 Flint MCP

本機版本需要 Node.js 18 以上。Codex 可以用一行命令加入 stdio MCP 伺服器。

codex mcp add flint -- npx -y flint-chart-mcp

接著確認伺服器是否已經出現在清單。

codex mcp list

如果資料不需要從本機檔案讀取，可以關閉檔案引用。這個設定要求代理把資料列直接放進 data.values，能縮小不受信任工作流程的檔案存取範圍。

codex mcp add flint-safe -- npx -y flint-chart-mcp --disable-file-reference

官方也提供遠端 MCP 端點，適合只能連接 HTTP MCP 的客戶端。處理私有資料時，仍建議優先選擇本機 stdio 版本。

codex mcp add flint-remote --url https://flint.data-formulator.ai/mcp

第一次使用的提示詞

安裝後不要只下「幫我畫圖」。把資料來源、語意、圖表目的、驗證方式與輸出格式一起交代，結果會更可靠。

請載入 flint://agent-skill，並呼叫 list_chart_types 檢查 vegalite 後端是否可用。讀取目前資料夾的 sales.csv，把 month 判定為 YearMonth，revenue 判定為 Price，growth 判定為 PercentageChange。先用 validate_chart 驗證，再建立每月營收折線圖，並用顏色標示成長率。若支援 MCP Apps 就使用 create_chart_view，否則用 render_chart 輸出 SVG。最後列出所有警告與被截斷的資料。

Flint MCP 提供五個主要工具。create_chart_view 適合互動調整，validate_chart 用來檢查規格與警告，render_chart 產生 PNG 或 SVG，compile_chart 回傳後端原生 JSON，list_chart_types 則用來確認可用的圖表與通道。

這套做法和讓 Codex 用 Playwright CLI 操作瀏覽器有相同精神。模型不必自己模擬每個底層步驟，而是呼叫邊界清楚、結果可檢查的工具。

在 JavaScript 與 TypeScript 專案使用

若你正在開發產品，而不是只在對話中產生圖表，可以直接安裝函式庫。

npm install flint-chart

import { assembleVegaLite } from "flint-chart"

const input = {
  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 }
  }
}

const spec = assembleVegaLite(input)

相同輸入可以交給 assembleECharts、assembleChartjs、assemblePlotly 或 assembleExcel。後端若不支援指定圖表，組裝器會在渲染前拋出錯誤，因此產品端應先查詢範本支援狀態，再把錯誤與警告顯示給使用者。

Excel 原生圖表特別適合需要後續人工編輯的報表工作。如果工作流程還包含 Word、PowerPoint 或試算表處理，可以延伸閱讀OfficeCLI 與 AI Agent 的 Office 自動化教學。

Flint、Vega-Lite、Mermaid 與一般 Chart MCP 的差異

Flint 並不是 Vega-Lite 的替代品，因為它可以直接編譯成 Vega-Lite 規格。它處理的是更前面的一層，讓模型先表達「這些資料是什麼」，再由編譯器決定「如何正確畫出來」。

目前限制與使用前要知道的事

• 仍是研究專案　官方論文尚未正式公開，產品決策不能只靠宣傳數字
• Python 套件尚未發布　目前只有原始碼預覽，正式套件仍以 JavaScript 與 TypeScript 為主
• 後端支援並不完全相同　同一圖表不一定能在所有後端輸出，MCP 指南目前列出的編譯後端仍以 Vega-Lite、ECharts 與 Chart.js 為主
• Flint 不負責完整資料整理　聚合、過濾、關聯、樞紐與衍生欄位最好先在上游完成
• 自動版面可能截斷資料　離散項目超過空間預算時會套用保留策略，整合端必須顯示 _warnings
• 本機渲染仍要管理權限　預設會讀取代理指定的本機檔案，不受信任的環境應啟用 –disable-file-reference

iThome 整理的測試顯示，Flint 在 GPT-5.1、GPT-5-mini 與 GPT-4.1 三組 LLM 評分中，都優於直接產生完整 Vega-Lite 規格的 DirectVL。不過官方仍標示研究論文即將公開，因此比較結果適合視為早期證據，不能取代自己的資料集與視覺驗收。

真正值得帶走的是代理系統的分工方式

Flint 最值得學習的不只是圖表規格，而是代理系統的分工。讓模型輸出小型、結構化、可以先驗證的意圖，再讓確定性程式負責計算、渲染與錯誤處理。這個模式也能延伸到 UI 元件、文件排版、測試流程與自動化操作。

但「成功回傳 JSON」不等於任務完成。視覺工作必須真的渲染，再檢查畫布是否空白、文字是否重疊、顏色是否誤導、資料是否被截斷。AI Agent 的可靠性，來自可驗證的中介格式與最後一哩的實際驗收，而不是更長的提示詞。

常見問題

Flint 可以取代 ECharts 或 Vega-Lite 嗎

不會。Flint 是位在 AI 與繪圖函式庫之間的中介語言，最後仍會輸出 ECharts、Vega-Lite 等後端可使用的原生規格。

Flint MCP 會把資料上傳到外部服務嗎

本機 stdio 版本會在主機上執行，內嵌資料與本機檔案不會送到遠端渲染服務。若改用官方 HTTP 端點，資料會透過遠端連線處理，因此敏感資料仍應優先採用本機版本。

Codex 看不到互動圖表怎麼辦

create_chart_view 需要客戶端支援 MCP Apps。若目前介面不支援，可以要求 Flint 使用 render_chart 輸出 SVG 或 PNG，再直接檢查成品。

Flint 適合什麼工作

它適合需要大量產生資料圖表、希望規格可被人工修改、需要切換不同後端，或不能接受偶發空白與錯誤圖表的 Agent 工作流程。若只是一次性的簡單圖表，現有大型模型或熟悉的圖表函式庫可能已經足夠。

參考資料

• Flint 官方網站
• microsoft/flint-chart GitHub
• Flint MCP 官方安裝指南
• Flint API 參考
• iThome：微軟打造 AI 視覺化中介語言 Flint
• 影音來源