Flint 圖表教學：讓 LLM 畫出專業圖表的開源工具

📌 本文重點

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 伺服器 → 回傳可嵌入網頁的圖表（或 Vega spec 等）

你可以做的事：在自家 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 圖表的資料分析師
VisionBridge¹	讓純文字 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 圖表並存成報表模版

VisionBridge 介紹：https://www.reddit.com/r/LocalLLaMA/comments/1uq5qqs/i_built_a_tiny_proxy_that_gives_glm_52_vision_or/ ↩

Flint：讓 AI 也畫得出專業圖表

為什麼一般 LLM 畫圖總是歪掉？

核心功能：Flint 幫 AI 補完「設計力」

1. 中介視覺語言：LLM 只需要說人話版的圖表需求

2. 與 Data Formulator 深度整合：圖表可以點一點改

3. MCP 伺服器：任何 Agent 都能叫 Flint 畫圖

適合誰用？三個具體場景

1. 資料分析報告自動出圖

2. 內部 BI 助理

3. 技術文件中的動態圖表

實際長什麼樣？Flint JSON 範例

怎麼開始？30 分鐘內畫出第一張 AI 圖

1. 部署 Flint：本機或雲端

2. 使用現成範例，串接任一主流 LLM / Agent

3. MCP 整合：丟給你的 Agent 用

Flint 與其他「讓 AI 變強」工具怎麼搭配？

結語：先讓 AI「畫得出像樣的圖」再談自動化報表

留言

發佈留言 取消回覆

更多文章

Qwen3.8-Max 長任務實戰與部署攻略

用 loopx＋Cloudflare computer 組一支 AI 遠端團隊

用手機跑 128K AI 小助手：LFM2.5 實戰

Google 把手機交給 Gemini，是升級還是賭博？

發佈留言取消回覆