一句話生成 SVG 圖表的 skill 在開發者社羣流傳：svg-diagram 的用法輪廓與訊源整理

開發者論壇 V2EX 近日出現一篇標題為「一語成美圖的 SKILL」的貼文，介紹名為 svg-diagram 的開源工具。根據貼文內容，這套工具的定位是讓 AI 代理（agent）依使用者的口頭描述，直接手寫出一份 SVG 格式的圖表，產出後可放進 README 或文件站直接使用。貼文發布約 18 小時後累積約 2070 次瀏覽。

它想解決什麼問題

貼文作者列舉了文件配圖的三種現況。手寫 SVG 耗時；畫圖工具匯出的檔案難以進入 git 版本管理；Mermaid 雖然以文字描述圖表，但排版結果由引擎決定，使用者對最終呈現的控制有限。

svg-diagram 採取的路徑是第四種：使用者用一句話說明要什麼圖，AI 代理自行撰寫 SVG 原始碼。由於輸出是純文字的 SVG，可以進 git、可以直接嵌入文件，圖內標籤也能以中文呈現，不需額外配置字型。

安裝方式與相容範圍

依貼文所述，安裝指令為：

npx skills add bybit-exchange/svg-diagram -g

專案位於 GitHub，隸屬 bybit-exchange 帳號。安裝程式會偵測本機已安裝的 AI 代理工具，並依各家的目錄約定寫入路徑。貼文列出的相容對象包括 Claude Code（寫入 ~/.claude/skills/）、Codex、Cursor、Gemini CLI、Copilot、opencode、Antigravity（共用 ~/.agents/skills/），以及其他四十餘種代理工具。加上 -g 參數為全域安裝，去掉則僅裝進當前專案。

安裝後須開啟新會話，並以「畫一張某某架構圖」的方式下指令。貼文提醒，若代理沒有主動說明它正在使用 svg-diagram，代表 skill 未被觸發，重開會話再試即可。

提問時要說清的五件事

貼文用相當篇幅說明，圖畫得歪，多數情況是資訊給得不夠。作者整理出五個關鍵欄位：圖的種類（架構圖、流程圖、泳道圖、時序圖，骨架各異）、有哪些框以及彼此的並列或上下遊關係、方向（自上而下或從左到右）、顏色要用來區分什麼（按層、按角色、按成功失敗），以及最終寬度（進 README 建議 700 至 800，窄欄文件建議 500 至 600）。

作者並附上一段可直接修改套用的模板句式，包含圖種類、分組清單、方向、虛線分組框、顏色對應與寬度等欄位。

四種圖型的實例

貼文以四個實例說明用法。

架構圖方面，示範句描述一個混合檢索記憶系統的分層架構，區分檢索層、儲存層與索引層。作者指出一個細節：兩路並行搜尋（向量搜尋與 BM25）會被畫成左右分叉再匯合，而非排成一列，只要說「兩路並行」，代理就會這樣處理，不必描述分叉形狀。

漏鬥圖方面，示範推薦系統的四層漏鬥，從候選池約一千萬逐級收窄到 Top N。作者說明，漏鬥形狀不必自己計算寬度，說「逐級收窄」即可；量級數字建議以小字放在框的右側，避免把框撐高。

泳道圖方面，示範一個需求從提出到上線的跨職能流程，產品、研發、測試、運維四條橫向泳道，主流程由左至右推進，另加一條紫色虛線回退箭頭。作者提醒，泳道名應使用職能而非人名，回退線須單獨提出，否則代理只會畫順流程。

時序圖方面，示範一次帶工具呼叫的 agent 會話，參與者為開發者、編碼 Agent、MCP 資料工具與 LiteLLM 閘道，訊息自上而下呈現提出問題、載入 Skill、查詢指標、回傳資料等步驟。

訊源邊界與後續觀察

目前關於此工具的可核實資訊，主要來自 V2EX 貼文與 GitHub 專案頁。貼文中的效能描述（如「第一版基本就能直接用」）屬作者個人使用經驗，未附獨立驗證數據。支援的代理清單、安裝路徑與指令格式，均以專案文件為準，實際行為可能隨版本更新變動。

此類 skill 的出現，對應的是 AI 輔助開發工作流程中文件產出環節的工具化需求：讓圖表回到純文字、可版本控制的形態。至於其生成 SVG 的品質是否穩定、在不同代理上的觸發率如何，尚需更多使用者的公開回報才能判斷。有興趣的讀者可前往該 GitHub 專案頁查閱最新文件。