📌 本文重點
- Flint 讓 LLM 用簡單 JSON 就能畫出專業圖表
- 透過中介視覺語言,把美觀與排版細節交給 Flint
- 搭配 Data Formulator/MCP,可在多種場景自動出圖
多數 LLM 雖然會「描述圖」,卻很難畫出乾淨、專業、可維護的圖表,Flint 就是專門幫 AI 接手這段「從文字到好圖」的工作。
為什麼一般 LLM 畫圖總是歪掉?
如果你用過 LLM 直接輸出 Vega-Lite、ECharts、Matplotlib,大概遇過這些情況:
- 圖是畫出來了,但:
- 顏色、比例亂選,看起來很業餘
- 標軸標籤打錯、重疊、或被擠出畫面
- 圖例、格線沒有依照人類習慣排版
- 為了避免出錯,只敢給 LLM 很簡單的設定 → 圖表品質又退回系統預設
- 一旦你說「把折線圖改成雙軸圖,多加一條移動平均」,整段 spec 幾乎要重寫
Flint 的切入點是:不是 LLM 太笨,而是現有圖表語言太「底層」,逼模型做太多視覺細節決策。Flint 改成「中介視覺語言 + 自動排版引擎」,讓 LLM 只說高階意圖,低階美觀細節交給 Flint。
💡 關鍵: Flint 把圖表設計拆成高階意圖與低階排版,讓 LLM 專心決策「畫什麼」,而 Flint 負責「怎麼畫得好看」。
核心功能:Flint 幫 AI 補完「設計力」
1. 中介視覺語言:LLM 只需要說人話版的圖表需求
Flint 把圖表拆成幾個高階概念:
data: 用哪些欄位mapping: 哪個欄位對應到 x、y、顏色、大小mark: 用折線、長條、區域等標記layout & style: 留給 Flint 自動排版與預設樣式
LLM 只要輸出一份簡潔的 JSON,Flint 會負責:
- 均衡配色
- 合理的軸刻度、標籤格式
- 避免文字重疊、圖例遮擋
你可以做的事:在自己的 LLM 工具裡,把「請幫我生出完整 ECharts/Vega spec」改成「請輸出 Flint JSON」,再由後端把 Flint JSON 丟給 Flint 編譯成最終圖表。
2. 與 Data Formulator 深度整合:圖表可以點一點改
Data Formulator 是微軟另一個開源專案,可以視覺化地編輯 Flint 圖表:
- 左邊是資料表
- 中間是圖表
- 右邊是 Flint 規格(JSON)
你可以:
- 讓 LLM 先產出 Flint 規格
- 使用者在 Data Formulator 裡微調(拖拉欄位、改顏色)
- 再把調整後的 Flint JSON 存回系統 → 變成可持久化的「報表模版」
你可以做的事:把 Data Formulator 部署在內網,給資料分析團隊當「AI 生成初版圖表,人手最後調整」的工作台。
3. MCP 伺服器:任何 Agent 都能叫 Flint 畫圖
Flint 官方提供了符合 Model Context Protocol (MCP) 的伺服器,意思是:
- 你用哪一家的 LLM / Agent 幾乎都不重要
- 只要支援 MCP,就能把 Flint 當成「畫圖工具」來呼叫
流程通常是:
- Agent 讀取你給的資料
- Agent 生成 Flint JSON
- 呼叫 Flint MCP 伺服器 → 回傳可嵌入網頁的圖表(或
Vegaspec 等)
你可以做的事:在自家 Agent(如 OpenAI, Claude, 自建 Llama)中,註冊 Flint MCP 工具,讓 Agent 回答問題時順手出圖,而不是只給一長段文字分析。
適合誰用?三個具體場景
1. 資料分析報告自動出圖
情境:你每週要交「流量報告」、「營收報表」,但每次調整維度、時間區間都得重畫圖。
用法:
- 把數據放在資料庫或
CSV - 讓 LLM 讀取後,產出 Flint JSON
- Flint 編譯成固定風格的圖,嵌入到報告模板(Notion、Confluence、內部系統)
可行操作:
- 建立一個簡單的 HTTP 服務
/generate-chart: - 輸入:分析問題 + 資料表名稱
- 中間:LLM → Flint JSON → Flint 編譯
- 輸出:圖表 URL 或 HTML Snippet
💡 關鍵: 用
/generate-chart這類服務,把「問問題 → 自動出圖」變成標準流程,可大幅減少手動報表製作時間。
2. 內部 BI 助理
情境:同事問「上個月付費轉換率怎麼樣?」,你不想每次都打開 Power BI 重拉圖。
用法:
- 建立一個聊天機器人(Slack / Teams / Line)
- 後端讓 Bot 可以:
- 查詢資料庫
- 呼叫 LLM 產生 Flint JSON
- 用 Flint 生成圖,回傳為圖片或互動式圖表連結
可行操作:
- 在 Bot 指令中加入:
/chart 近三個月 活躍用戶 與 付費人數 - Bot 回覆一張趨勢折線圖,並附上描述文字
3. 技術文件中的動態圖表
情境:你寫 SDK / API 文件,需要展示效能、流量、版本差異,數據常更新。
用法:
- 文檔系統只存「Flint JSON + 資料來源」
- 每次讀者開啟頁面,後端動態用 Flint 產生最新圖表
可行操作:
- 在 docs 中嵌入一個
<iframe src="/docs/charts/latency"> - 這個 endpoint 背後:查資料 → Flint render → 回傳
SVG/PNG
實際長什麼樣?Flint JSON 範例
以下是一個最小可用的 Flint 規格,畫出「每月營收折線圖」:
{
"data": {
"fields": [
{ "name": "month", "type": "temporal" },
{ "name": "revenue", "type": "quantitative" }
],
"values": [
{ "month": "2024-01", "revenue": 120000 },
{ "month": "2024-02", "revenue": 135000 },
{ "month": "2024-03", "revenue": 128000 }
]
},
"mark": "line",
"encoding": {
"x": { "field": "month", "type": "temporal" },
"y": { "field": "revenue", "type": "quantitative" }
},
"title": "2024 Q1 每月營收"
}
LLM 只要穩定產出這樣結構清楚、語意正確的 JSON,Flint 就會幫你做出排版乾淨的圖,之後你想改顏色、字型、軸設定,都可以在 Data Formulator 介面上調整。
怎麼開始?30 分鐘內畫出第一張 AI 圖
1. 部署 Flint:本機或雲端
官方文件與 Demo:https://microsoft.github.io/flint-chart/#/
本機(開發測試)
- 安裝 Node.js(建議
18+) - Clone 專案:
bash
git clone https://github.com/microsoft/flint-chart.git
cd flint-chart - 安裝依賴並啟動示例:
bash
npm install
npm run dev - 瀏覽器打開
http://localhost:5173,可以看到範例圖表與 Flint Spec。
雲端部署(給團隊用)
- 打包為 Docker image(視官方 repo 指引)
- 部署在自家 Kubernetes / VM 上,對外提供 REST API:
POST /render→ 輸入 Flint JSON,回傳圖表
2. 使用現成範例,串接任一主流 LLM / Agent
基本流程:
- 在後端寫一個函式
askLLMForFlintSpec(prompt, data_schema) - 提示詞約束:
- 請只輸出 JSON,不要加解釋文字
- JSON 結構遵守 Flint Spec(可把官方 schema 一併塞進 system prompt)
- 把 LLM 回傳的 Flint JSON 送到 Flint API:
import requests, json
flint_spec = llm_generate_flint_spec(user_query, data_schema)
res = requests.post(
"http://localhost:8000/render",
json={"spec": flint_spec}
)
with open("chart.svg", "wb") as f:
f.write(res.content)
- 前端直接顯示
chart.svg,或轉PNG給報告系統使用。
3. MCP 整合:丟給你的 Agent 用
若你使用支援 MCP 的 Agent(例如部分新一代 IDE 助理、Agent Framework),步驟大致是:
- 啟動 Flint MCP server(依官方 repo 指示)
- 在 Agent 設定檔中註冊 Flint MCP endpoint
- 在系統提示詞中說清楚:
- 何時該呼叫 Flint(遇到需要圖表的問題)
- 如何構造 Flint JSON
完成後,你就可以在對話中自然問:「幫我畫一張 2024 各季度營收與毛利率的組合圖」,讓 Agent 自行決定查數據、生成 Flint JSON、再回傳圖表。
Flint 與其他「讓 AI 變強」工具怎麼搭配?
下面用一個表快速對比本文提到的工具角色:
| 名稱 | 核心功能 | 免費方案 | 適合誰 |
|---|---|---|---|
| Flint | 中介視覺語言,幫 LLM 生高品質圖表 | 開源 | 需要報表 / 圖表自動化的開發者 |
| Data Formulator | 可視化編輯 Flint 圖表的前端工具 | 開源 | 想在瀏覽器調整 AI 圖表的資料分析師 |
| VisionBridge1 | 讓純文字 LLM 具備視覺理解能力的代理 | 開源 | 想給本地 LLM 加上看圖能力的開發者 |
你可以把它們組成一條完整流水線:VisionBridge 提供「看圖」能力、LLM 做推理與產生 Flint JSON、Flint+Data Formulator 負責「畫好圖」與人類微調。
結語:先讓 AI「畫得出像樣的圖」再談自動化報表
如果你已經在用 LLM 做資料分析、寫 BI 查詢,下一步就是讓結果不是只停在文字。Flint 幫你用很低的開發成本,把「專業圖表」變成 AI 回答的一部分,而且保留 JSON 規格,後續要改樣式、改資料源,都能持續演進。
最實際的建議:花 30 分鐘跑起官方 Demo,拿文中的範例 JSON 改成自己的資料,先做出第一張「AI 自動生成、你看得順眼、同事也改得動」的圖表,再來思考要怎麼把它嵌進你的報表、內部工具或 Agent 流程裡。
🚀 你現在可以做的事
- 打開 https://microsoft.github.io/flint-chart/#/,跑起官方 Demo 並試著改用自己的資料
- 在後端實作一個簡單的
/generate-chart服務,讓 LLM 產生 Flint JSON 再交給 Flint 渲染- 部署 Data Formulator,讓資料分析同事用瀏覽器微調 LLM 生成的 Flint 圖表並存成報表模版










