這個一句話出架構圖的Skill，能撐起一篇文章的門面（附教程）
整理版優先睇
一句話描述系統架構，自動生成 SVG+PNG 圖表，開源免費，AI/Agent 架構圖必備
呢篇文章介紹嘅 fireworks-tech-graph，係一位喺 AI 文生圖同視頻領域好出名嘅創業者開發嘅開源 Skill。佢發現好多人畫架構圖要好麻煩：一係要學 Mermaid 語法，一係要開 draw.io 手動拖曳，仲要煩顏色形狀。佢就整咗呢個工具，令你可以用自然語言一句話描述系統，然後自動生成語義化嘅 SVG 同 1920px PNG 圖表。
文章整理咗呢個工具嘅核心功能：內置 7 種視覺風格、22 種圖表類型，特別係 AI/Agent 領域嘅 RAG、Multi-Agent、Mem0 呢啲高頻模式已經預設好標準佈局同形狀映射。安裝步驟簡單，只需要 clone 倉庫同裝一個 rsvg-convert 依賴。整體結論係：呢個工具大幅降低咗由腦入面構思到屏幕出圖嘅摩擦力，特別適合寫技術博客、做系統設計文件，同埋放上 GitHub README。但都要留意佢需要 AI 編程環境（例如 Claude Code 或 WorkBuddy）先運行到，Windows 用戶安裝 rsvg-convert 會多少少步驟。
- 用自然語言一句話即可出圖，支援中文，唔使學 Mermaid 或拖 draw.io。
- 內置語義化形狀：LLM 用六邊形、數據庫用圓柱體、向量庫用網格圓柱，箭頭用顏色編碼數據流方向（藍色主數據、橙色控制、綠色讀寫、灰色異步）。
- 提供 7 種視覺風格，包括默認 Flat、Dark Terminal、Blueprint、毛玻璃等，一鍵切換，適合博客、GitHub README 或簡報。
- 支援 22 種圖表類型，覆蓋架構圖、流程圖、時序圖、UML 等，尤其 RAG、Agentic Search、Mem0 等 AI 模式已預設行業標準佈局。
- 需要 AI 編程環境（如 Claude Code、WorkBuddy）同安裝 rsvg-convert 依賴；節點超過 15-20 個時可能需手動調整佈局。
fireworks-tech-graph GitHub 倉庫
開源項目，MIT 協議，一句話生成架構圖
一句話出圖，語義化係關鍵
呢個 Skill 嘅工作方式好簡單：你用 自然語言 描述系統（中文都得），佢就會識別圖表類型，自動分配語義化形狀同顏色編碼箭頭，最後輸出 SVG（可編輯）+ PNG（1920px），即開即用。
唔使學 Mermaid 語法，唔使開 draw.io 手動拖曳。你只需要 講人話，圖就出嚟。
7 種風格 + 22 種圖表，AI/Agent 架構殺手鐧
呢個工具內置 7 種視覺風格，覆蓋唔同場景嘅審美需求：
- Flat Icon（默認）：白底，適合博客同技術文件。
- Dark Terminal：#0f0f1a 深色，GitHub README 即刻高級曬。
- Blueprint：#0a1628 深藍底，架構設計文檔用。
- Notion Clean：白底極簡，Notion / Confluence 內嵌一流。
- Glassmorphism：深色漸變，產品官網或 PPT 配圖。
- Claude Official：#f8f6f3 暖奶油色，跟 Anthropic 風格。
- OpenAI Official：純白，OpenAI 風格。
圖表類型方面，佢支援 22 種，核心 8 種包括架構圖、數據流圖、流程圖、Agent 架構圖、記憶架構圖、時序圖、對比矩陣、思維導圖；仲有 UML 全家桶 14 種。不過 真正嘅殺手鐧係 AI/Agent 領域嘅內置模式——
五步上手，從零到出圖
- 1 安裝項目：git clone 倉庫到 AI 編程環境嘅 skills 目錄（例如 ~/.workbuddy/skills/），然後喺對話中講「幫我適配當前環境」即可。
- 2 安裝 rsvg-convert：macOS 用 brew install librsvg；Windows 用 MSYS2 安裝，或者直接叫 AI 幫手搞。
- 3 喺對話中用自然語言畫圖：例如「畫一張 RAG 架構圖，用戶輸入查詢...暗黑風格」。AI 會自動生成 SVG 同 PNG。
- 4 指定輸出路徑（可選）：預設輸出當前目錄，你可以指定任意路徑，例如 output to ~/Desktop/。
例句：
畫一張 RAG 架構圖：用戶輸入查詢，經過 Embedding 模型轉向量，存入向量數據庫，檢索時通過相似度匹配召回 Top-K 文檔，拼接到 Prompt 中送入 LLM 生成回答。暗黑風格。特別提醒：安裝依賴或者適配環境，你只需要喺對話中 用自然語言講 就得，AI 會自動執行。
同 Mermaid/draw.io 比較，有咩要注意
呢個工具同傳統方法比，有明顯優點，但都有啲 限制要留意：
- 優點：摩擦力極低，腦入面嘅架構快速落到屏幕；顏值高，7 種風格直接嵌入；內置行業標準形狀同配色，唔使你糾結。
- 缺點：需要 AI 編程環境（Claude Code、WorkBuddy 等），唔係獨立工具；Windows 裝 rsvg-convert 要 MSYS2 或 WSL；節點超過 15-20 個可能要手動調整 SVG；唔支援 UI、線框圖、插畫。
一日攞到 1.5k star，證明呢個需求好精確。開源 MIT 協議，值得一試。
fireworks-tech-graph：一句話描述系統架構，自動生成 SVG 同 1920px PNG。內置 7 種視覺風格、22 種圖表類型，AI/Agent 領域開箱即用。MIT 協議，琴日先開源。
寫技術博客、做系統設計、需要畫架構圖/流程圖/時序圖嘅人，值得裝。備註：呢位係一位喺AI文生圖、AI視頻領域由研究到B端變現能力超羣嘅創業者開發嘅skill，神一般存在，佢嘅AI視頻prompt令人淨係得copy嘅想法，連學習嘅想法都冇咗，一騎絕塵。
一句話講人話，圖就出咗嚟
fireworks-tech-graph 嘅工作方式得三步：
你用自然語言描述系統（中文就得） 佢識別圖類型，自動分配語義化形狀和顏色編碼箭頭 輸出 SVG（可編輯）+ PNG（1920px，直接用）
"語義化"係關鍵。LLM 用六邊形，數據庫用圓柱體，向量庫用帶網格線嘅圓柱體，API 網關用單邊六邊形。箭頭顏色編碼咗數據流方向：藍色 = 主數據流，橙色 = 控制觸發，綠色 = 讀寫記憶，灰色虛線 = 異步事件。
佢俾每個組件分配咗正確嘅形狀同顏色，令讀圖嘅人一眼睇出架構意圖。唔使學 Mermaid 語法，唔使開draw.io手動拖拽。講人話，出圖。
7 種風格，一張圖撐起一篇文章嘅門面
| Flat Icon | |||
| Dark Terminal | #0f0f1a | ||
| Blueprint | #0a1628 | ||
| Notion Clean | |||
| Glassmorphism | |||
| Claude Official | #f8f6f3 | ||
| OpenAI Official |
預設風格 1 通用性最強。暗色主題場景用風格 2，GitHub 上面嘅 README 一下就高級咗。
22種圖表類型，AI/Agent架構係殺手鐧
核心 8 種：架構圖、數據流圖、流程圖、Agent 架構圖、記憶架構圖、時序圖、對比矩陣、思維導圖
UML 全家桶 14 種：類圖、組件圖、部署圖、包圖、組合結構圖、對象圖、用例圖、活動圖、狀態機圖、序列圖、通信圖、時序圖、交互概覽圖、ER 圖
額外覆蓋：網絡拓撲圖、時間線/甘特圖
呢 22 種類型覆蓋咗技術文章同系統設計文檔入面 90% 嘅出圖需求。但真正嘅殺手鐧唔係數量，係 AI/Agent 領域嘅內置模式——RAG Pipeline、Agentic Search、Mem0 記憶架構、Multi-Agent 協作、Tool Call 流程呢啲高頻架構，佢已經預設好咗標準佈局同形狀映射。你話「畫一個 RAG」，佢唔使你解釋乜嘢係向量庫、乜嘢係檢索器，直接按行業標準排布。
五步上手，由零到出圖
Step 1：安裝
項目雖然原生面向 Claude Code，但適配到 WorkBuddy、Trae 等 AI 編程環境只需一句話——將倉庫克隆到你嘅 skills 目錄就得，腳本入面冇任何硬編碼路徑，直接用得：
git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.workbuddy/skills/fireworks-tech-graph
推薦方式：
下載項目壓縮文件到本地電腦； 解壓到類似呢啲目錄下~/.workbuddy/skills/
安裝完成後，喺對話中輸入 畫圖、畫一張架構圖、生成流程圖 就能觸發。
特別提醒：
要適配到你嘅AI客戶端環境，你可以喺對話中用自然語言話俾佢聽：幫我適配當前環境。
Step 2：安裝 rsvg-convert（唯一系統依賴）
SVG 轉 PNG 嘅工具，一張圖出兩個格式。
macOS：
brew install librsvg
Windows： 通過 MSYS2 安裝：
pacman -S mingw-w64-x86_64-librsvg
特別提醒：
直接喺對話中輸入：安裝rsvg-convert依賴，AI會幫你搞掂。
驗證：rsvg-convert --version
Step 3：直接畫
喺對話中用自然語言描述你要畫嘅系統。
示例 1：RAG 架構圖（暗黑風格）
畫一張 RAG 架構圖：用戶輸入查詢，經過 Embedding 模型轉向量，存入向量數據庫，檢索時通過相似度匹配召回 Top-K 文檔，拼接到 Prompt 中送入 LLM 生成回答。暗黑風格。
產出：rag-architecture.svg + rag-architecture.png。風格 2（Dark Terminal），藍色箭頭 = 數據流，紫色箭頭 = 嵌入變換，綠色箭頭 = 讀寫向量庫。
（呢個係我實測生成嘅架構效果圖）
示例 2：Multi-Agent 協作圖（毛玻璃風格）
畫一張 Multi-Agent 協作圖：Orchestrator 調度 3 個 SubAgent，分別負責搜索、計算和代碼執行，最後匯聚到 Aggregator 輸出結果，玻璃態風格
產出：Orchestrator 用六邊形（活躍控制器），SubAgent 用六邊形，Aggregator 用雙邊框圓角矩形。橙色箭頭 = 控制調度，藍色箭頭 = 數據匯聚。風格 5（Glassmorphism）。
（類似風格效果圖）
示例 3：API 調用時序圖
畫一個時序圖：客戶端 → API Gateway → Auth Service（鑑權）→ Backend Service → Database（查詢）→ 返回結果，寫明每一步的 HTTP 方法和狀態碼
產出：垂直生命線 + 水平消息箭頭，標註 POST /api/login、200 OK 等信息。
（類似風格效果圖）
Step 4：指定輸出路徑（可選）
Generate a Mem0 architecture diagram, output to ~/Desktop/
預設輸出當前目錄，可指定任意路徑。
點解唔直接用Mermaid或draw.io？
三個真實場景嘅對比：
寫技術博客——慳嘅係「由個腦到屏幕」嘅時間
Mermaid 要學語法：graph TD; A[用戶] --> B[API]。draw.io 要手動拖節點、連箭頭、調顏色。fireworks-tech-graph 只需要一句描述。個腦入面嘅架構快速落到屏幕上，呢個場景佢嘅摩擦力最低。
畫 AI 架構——內置咗行業標準嘅形狀同配色
Mermaid 唔會自動俾向量庫用圓柱體、俾 LLM 用漸變填充。fireworks-tech-graph 將 RAG、Mem0、Multi-Agent 呢啲高頻模式嘅形狀同配色都預設好曬。你唔使糾結「呢個組件應該畫成咩形狀」。
出圖顏值——7 種風格直接嵌入
Mermaid 產出嘅圖風格單一，嵌博客仲得，放 PPT 或產品文檔就寒酸咗。暗色、藍圖、毛玻璃，主流審美需求都覆蓋曬。
但有幾個坑要預先知道：
- 需要 AI 編程環境：
唔係獨立工具，依賴 Claude Code、WorkBuddy 等 AI 編程助手運行 - Windows 多一步：
rsvg-convert 唔可以直接 pip install，需要 MSYS2 或 WSL - 節點上限：
超過 15-20 個組件嘅複雜架構，佈局可能需要手動調整 SVG 或多輪迭代 - 唔畫 UI：
線框圖、原型圖、插畫類需求唔喺射程內
一日 1.5k 星，說明咗一個問題
fireworks-tech-graph 解決嘅需求好精確：將個腦入面已有嘅架構，用最低摩擦力變成一張可以直接用嘅圖。佢覆蓋咗「技術文章配圖」同「系統設計文檔」呢個中間地帶——而呢個地帶，之前確實冇一個夠好嘅方案。
GitHub項目地址：
https://github.com/yizhiyanhua-ai/fireworks-tech-graph
協議：MIT
相關資源：
fireworks-tech-graph：一句話描述系統架構，自動生成 SVG + 1920px PNG。內置 7 種視覺風格、22 種圖表類型，AI/Agent 領域開箱即用。MIT 協議，昨天剛開源。
寫技術博客、做系統設計、需要畫架構圖/流程圖/時序圖的人，值得裝。備註：這是一位在AI文生圖、AI視頻領域從研究到B端變現能力超羣的創業者開發的skill，神一般存在，它的AI視頻prompt讓人只有copy的想法，連學習的想法都沒有了，一騎絕塵。
一句話說人話，圖就出來了
fireworks-tech-graph 的工作方式就三步：
你用自然語言描述系統（中文就行） 它識別圖類型，自動分配語義化形狀和顏色編碼箭頭 輸出 SVG（可編輯）+ PNG（1920px，直接用）
"語義化"是關鍵。LLM 用六邊形，數據庫用圓柱體，向量庫用帶網格線的圓柱體，API 網關用單邊六邊形。箭頭顏色編碼了數據流方向：藍色 = 主數據流，橙色 = 控制觸發，綠色 = 讀寫記憶，灰色虛線 = 異步事件。
它給每個組件分配了正確的形狀和顏色，讓讀圖的人一眼看出架構意圖。不用學 Mermaid 語法，不用開draw.io手動拖拽。說人話，出圖。
7 種風格，一張圖撐起一篇文章的門面
| Flat Icon | |||
| Dark Terminal | #0f0f1a | ||
| Blueprint | #0a1628 | ||
| Notion Clean | |||
| Glassmorphism | |||
| Claude Official | #f8f6f3 | ||
| OpenAI Official |
默認風格 1 通用性最強。暗色主題場景用風格 2，GitHub 上的 README 一下就高級了。
22種圖表類型，AI/Agent架構是殺手鐧
核心 8 種：架構圖、數據流圖、流程圖、Agent 架構圖、記憶架構圖、時序圖、對比矩陣、思維導圖
UML 全家桶 14 種：類圖、組件圖、部署圖、包圖、組合結構圖、對象圖、用例圖、活動圖、狀態機圖、序列圖、通信圖、時序圖、交互概覽圖、ER 圖
額外覆蓋：網絡拓撲圖、時間線/甘特圖
這 22 種類型覆蓋了技術文章和系統設計文檔中 90% 的出圖需求。但真正的殺手鐧不是數量，是 AI/Agent 領域的內置模式——RAG Pipeline、Agentic Search、Mem0 記憶架構、Multi-Agent 協作、Tool Call 流程這些高頻架構，它已經預設好了標準佈局和形狀映射。你說"畫一個 RAG"，它不用你解釋什麼是向量庫、什麼是檢索器，直接按行業標準排布。
五步上手，從零到出圖
Step 1：安裝
項目雖然原生面向 Claude Code，但適配到 WorkBuddy、Trae 等 AI 編程環境只需一句話——把倉庫克隆到你的 skills 目錄即可，腳本里沒有任何硬編碼路徑，直接能用：
git clone https://github.com/yizhiyanhua-ai/fireworks-tech-graph.git ~/.workbuddy/skills/fireworks-tech-graph
推薦方式：
下載到項目壓縮文件到本地電腦； 解壓到類似這樣的目錄下~/.workbuddy/skills/
安裝完成後，在對話中輸入 畫圖、畫一張架構圖、生成流程圖 就能觸發。
特別提醒：
要適配到你的ai客戶端環境，你可以在對話中用自然語言告訴它：幫我適配當前環境。
Step 2：安裝 rsvg-convert（唯一系統依賴）
SVG 轉 PNG 的工具，一張圖出兩個格式。
macOS：
brew install librsvg
Windows： 通過 MSYS2 安裝：
pacman -S mingw-w64-x86_64-librsvg
特別提醒：
直接在對話中輸入：安裝rsvg-convert依賴，ai會幫你搞定。
驗證：rsvg-convert --version
Step 3：直接畫
在對話中用自然語言描述你要畫的系統。
示例 1：RAG 架構圖（暗黑風格）
畫一張 RAG 架構圖：用戶輸入查詢，經過 Embedding 模型轉向量，存入向量數據庫，檢索時通過相似度匹配召回 Top-K 文檔，拼接到 Prompt 中送入 LLM 生成回答。暗黑風格。
產出：rag-architecture.svg + rag-architecture.png。風格 2（Dark Terminal），藍色箭頭 = 數據流，紫色箭頭 = 嵌入變換，綠色箭頭 = 讀寫向量庫。
（這是我實測生成的架構效果圖）
示例 2：Multi-Agent 協作圖（毛玻璃風格）
畫一張 Multi-Agent 協作圖：Orchestrator 調度 3 個 SubAgent，分別負責搜索、計算和代碼執行，最後匯聚到 Aggregator 輸出結果，玻璃態風格
產出：Orchestrator 用六邊形（活躍控制器），SubAgent 用六邊形，Aggregator 用雙邊框圓角矩形。橙色箭頭 = 控制調度，藍色箭頭 = 數據匯聚。風格 5（Glassmorphism）。
（類似風格效果圖）
示例 3：API 調用時序圖
畫一個時序圖：客戶端 → API Gateway → Auth Service（鑑權）→ Backend Service → Database（查詢）→ 返回結果，寫明每一步的 HTTP 方法和狀態碼
產出：垂直生命線 + 水平消息箭頭，標註 POST /api/login、200 OK 等信息。
（類似風格效果圖）
Step 4：指定輸出路徑（可選）
Generate a Mem0 architecture diagram, output to ~/Desktop/
默認輸出當前目錄，可指定任意路徑。
為什麼不直接用Mermaid或draw.io？
三個真實場景的對比：
寫技術博客——省的是"從腦子到屏幕"的時間
Mermaid 要學語法：graph TD; A[用戶] --> B[API]。draw.io 要手動拖節點、連箭頭、調顏色。fireworks-tech-graph 只需要一句描述。腦子裏的架構快速落到屏幕上，這個場景它的摩擦力最低。
畫 AI 架構——內置了行業標準的形狀和配色
Mermaid 不會自動給向量庫用圓柱體、給 LLM 用漸變填充。fireworks-tech-graph 把 RAG、Mem0、Multi-Agent 這些高頻模式的形狀和配色都預設好了。你不用糾結"這個組件該畫成什麼形狀"。
出圖顏值——7 種風格直接嵌入
Mermaid 產出的圖風格單一，嵌博客還行，放 PPT 或產品文檔就寒酸了。暗色、藍圖、毛玻璃，主流審美需求都覆蓋了。
但有幾個坑要提前知道：
- 需要 AI 編程環境：
不是獨立工具，依賴 Claude Code、WorkBuddy 等 AI 編程助手運行 - Windows 多一步：
rsvg-convert 不能直接 pip install，需要 MSYS2 或 WSL - 節點上限：
超過 15-20 個組件的複雜架構，佈局可能需要手動調整 SVG 或多輪迭代 - 不畫 UI：
線框圖、原型圖、插畫類需求不在射程內
一天 1.5k 星，說明了一個問題
fireworks-tech-graph 解決的需求很精確：把腦子裏已有的架構，用最低摩擦力變成一張能直接用的圖。它覆蓋了"技術文章配圖"和"系統設計文檔"這個中間地帶——而這個地帶，之前確實沒有一個夠好的方案。
GitHub項目地址：
https://github.com/yizhiyanhua-ai/fireworks-tech-graph
協議：MIT
相關資源：