AntV Infographic：用一段文字描述，換一張可編輯的 SVG 資訊圖表
🦋 An Infographic Generation and Rendering Framework, bring words to life with AI!
秒懂
- 它是什麼？
- AntV 團隊推出的宣告式資訊圖表引擎，主打讓 AI 直接生成語法並串流渲染。本文從安裝、語法、串流機制到技能整合，拆解它解決了什麼問題，以及哪些場景其實不適合它。
- 適合誰用？
- 適合需要把 LLM 輸出直接變成視覺化素材的團隊，尤其是那些已經在串接 Claude Code 或 Codex、希望跳過中間 JSON 結構、直接用 DSL 驅動渲染的開發者。內建編輯器與 SVG 輸出讓非工程師也能事後微調，這是多數模板引擎做不到的。
- 可以商用嗎？
- 可以。MIT 是寬鬆授權：你可以使用、修改並販售以它為基礎的軟體，只需保留著作權與授權聲明。
- 還在維護嗎？
- 有在維護。儲存庫最近一次提交在 25 天前。
- 用什麼語言寫的？
- 主要是 TypeScript（依據 GitHub 的語言統計）。
以上回答依據專案的 GitHub 資料（最近同步於 2026年9月15日）與我們的分析，不構成法律意見。
開源專案深度解析
它解決的不是畫圖問題，是「讓 AI 畫圖」的問題
它解決的不是畫圖問題，是「讓 AI 畫圖」的問題。一般圖表庫要你寫資料結構與配置，例如把陣列餵給 scatter plot 或指定軸的刻度。AntV Infographic 換了一條路，它定義了一種接近自然語言的 DSL，範例中直接寫下 infographic list-row-simple-horizontal-arrow 加上 data 區塊，裡面用縮排與 label、desc 描述步驟。引擎把這段文字轉成視覺。這個設計的目標對象很清楚，是 AI Agent。LLM 輸出 JSON 再對映到圖表配置，中間容易出錯，欄位名稱對不上、巢狀結構多一層就壞。Infographic 把介面壓成一段扁平文字，模型犯錯的空間變小。對工程師來說，這也改變了除錯方式，你不再看 console 裡的物件結構，而是直接讀那段描述文字。
從安裝到第一張圖，程式碼比想像中短
安裝指令只有一行，npm install @antv/infographic。使用方式也直接，new Infographic 帶上 container 與寬高，然後呼叫 render 傳入 DSL 字串。範例中把 editable 設為 true，代表渲染結果可以進內建編輯器繼續改。這裡有個值得注意的點，render 吃的是純文字，不是物件，所以你可以把這段文字存在資料庫、寫在 Markdown 檔案裡、甚至讓使用者用 textarea 貼上。官方文件稱這個語法為 infographic syntax，並提供專門的參考頁面。對於已經在用 AntV 其他產品的團隊，學習曲線不會太陡，但對於完全沒碰過宣告式圖表的人，第一次看到 template 名稱 list-row-simple-horizontal-arrow 可能會愣一下，這不是你能憑直覺記住的 API，需要查表。
串流渲染的容錯設計，是給 LLM 的保險絲
README 示範了串流渲染的寫法，把 chunks 逐段累加進 buffer，每次累加後就呼叫一次 infographic.render(buffer)。這代表引擎必須能處理不完整的語法，例如模型還在輸出 label 的內容，句子只寫到一半。多數圖表庫面對這種輸入會直接拋錯，但 Infographic 宣稱語法本身有高度容錯性。這個設計取捨很實際，LLM 的輸出本質上就是逐步生成的，與其等完整結果再渲染，不如邊出邊畫，使用者體驗會好很多。但反過來想，容錯意味著語法解析器必須對缺漏段落有預設行為，這可能導致某些錯誤被靜默吞掉。例如 label 少了結尾引號，引擎可能自動補上，但你不知道它補在哪裡。如果你的 AI 流程需要嚴格驗證輸出內容，這種寬鬆可能反而是麻煩。
Skills 整合：把框架變成 Agent 的工具箱
除了當作前端套件，Infographic 也提供 skills 目錄，裡面有 infographic-creator、infographic-syntax-creator、infographic-structure-creator 等五個技能。這些技能不是程式庫，而是給 AI Agent 用的操作手冊。例如 infographic-creator 會指示模型建立一個 HTML 檔案來渲染資訊圖表，infographic-syntax-creator 則負責把使用者描述轉成 DSL。安裝方式分成兩派，Claude Code 可以直接從 marketplace 安裝，或手動下載 skills.zip 解壓到 .claude/skills。Codex 則是用 $skill-installer install 指定 GitHub 路徑。這個架構的意義在於，框架不只在瀏覽器裡運作，它還定義了 AI 與程式之間的協定。你的 Agent 不需要知道 SVG 怎麼畫，只需要學會輸出 DSL。這讓 Infographic 有機會成為 AI 生成簡報或文章配圖的中間層。
生態圈的樣貌，以及它透露的定位
README 列了一批第三方專案，包括 Alma 這個桌面 AI 編排工具、Markdown Viewer、InfographicAI 用於生成 PPT 投影片、還有 WeChat 文章編輯器。從這些案例可以看出採用者的共通點，他們都想在 AI 生成內容的流程末端加上視覺化。沒有一個案例是傳統的商業智慧儀表板。這不是巧合，Infographic 的 DSL 與模板設計明顯偏向敘事型圖表，流程圖、步驟說明、列表式資訊圖，而不是資料密集的統計圖。如果你要做即時監控的折線圖，這裡的模板庫大概幫不上忙。反觀通用圖表庫如 ECharts，它們的強項是資料系列與座標軸的細緻控制，但若要描述一個行銷活動的階段流程，ECharts 沒有對應的抽象。兩者的差異不在畫圖能力，而在描述語言的層次。
限制與誤用場景：不是所有圖表都該用 DSL
文件沒有明說，但從範例可以推斷幾個限制。首先，預設輸出是 SVG，這保證了視覺品質與可編輯性，但也代表複雜度高的圖形在瀏覽器裡的效能會比 Canvas 差。其次，DSL 的模板名稱是固定的，約兩百個內建模板，如果你要的版型不在裡面，就得靠 infographic-structure-creator 這類技能去生成自訂結構，這條路顯然是給有開發能力的人走的。另一個誤用場景是資料頻繁更新的即時圖表，每次更新都要重新 render 整段 DSL，串流範例雖然展示了漸進式渲染，但那是針對文字累加，不是針對資料點增量。若你的資料每秒變動，這個框架不是合適的載體。最後，editable 模式開啟後，使用者可以手動改圖，這對協作是優點，但如果你要的是完全不允許變更的唯讀輸出，記得把這個選項關掉。
維護成本與授權：活躍開發中的 MIT 專案
授權是 MIT，商用沒有障礙。版本節奏方面，最近三次釋出分別是 2026 年 3 月的 0.2.16、4 月的 0.2.17 與 5 月的 0.2.19，間隔約一個月，顯示專案仍在活躍迭代。版本號停在 0.2.x，代表 API 還沒有進入穩定承諾階段，每次升級都有可能出現破壞性變更。README 的 Claude 手動安裝範例特別提醒要把 VERSION 換成最新 tag，例如 0.2.14，這暗示 skills.zip 的下載連結綁定版本號，升級框架時也要記得同步更新技能檔案。對於把 Infographic 嵌入自家產品的團隊，建議鎖定版本並在升級前查看 changelog，因為 0.x 版本的語法調整頻率通常不低。文件與範例集中在 infographic.antv.vision，gallery 頁面提供了模板預覽，這對評估模板是否符合需求很有幫助。
編輯結論
適合需要把 LLM 輸出直接變成視覺化素材的團隊，尤其是那些已經在串接 Claude Code 或 Codex、希望跳過中間 JSON 結構、直接用 DSL 驅動渲染的開發者。內建編輯器與 SVG 輸出讓非工程師也能事後微調，這是多數模板引擎做不到的。不適合的對象是只需要長條圖或折線圖的傳統儀表板，那類需求用 ECharts 或 G2 更輕。也不適合對渲染效能極度敏感、需要 Canvas 大規模繪製的場景，因為預設輸出是 SVG。採用前應先確認三件事：你願意接受 DSL 的學習成本、你的 AI 模型能否穩定輸出符合語法的片段、以及你對「容錯語法」的容忍界線在哪裡。此框架的價值建立在 AI 生成與 DSL 的搭配上，若你的流程是人工撰寫圖表，它不會比既有工具省力。
社群筆記