claude code 畫圖skills，開源了，三大類場景，輕鬆應對
整理版優先睇
介紹三個開源Claude Code畫圖Skill，分別對應快速出圖、獨立HTML分享同可繼續編輯，幫開發者用自然語言生成技術圖表。
作者蒼一係一個做咗13年後端開發嘅人，而家專注探索AI編程。佢發現技術圖表係開發者日常必需，但傳統畫圖方法效率低。呢篇文章整合咗GitHub上三個基於自然語言描述自動生成圖表嘅開源項目，幫讀者瞭解每個項目嘅特點同適用場景。整體結論係：三個項目各有側重，可以根據實際需要搭配使用，唔係互相取代。
第一個項目fireworks-tech-graph可以一句話生成SVG，支援14種圖表類型同7種視覺風格，特別係有AI/Agent方向嘅專用模板。第二個architecture-diagram-generator輸出獨立HTML，內嵌SVG，雙擊瀏覽器就睇到，分享好方便，設計亦好專業。第三個excalidraw-diagram-generator輸出.excalidraw JSON文件，可以拖入excalidraw.com繼續編輯，支援多種圖表類型同UML規範，仲有雲架構圖標庫。
揀邊個好？如果你追求速度，描述完直接出圖分享，前兩個都適合；如果你生成之後仲需要調整細節或者同人協作，excalidraw-diagram-generator就係唯一選擇。三個項目互補，根據場景揀就冇問題。
- 三個開源Skill分別解決技術圖表生成嘅速度、分享同編輯三大痛點，用自然語言代替拖拽或語法。
- fireworks-tech-graph支援14種圖表類型同7種視覺風格，一句話生成SVG，特別適合快速出圖。
- architecture-diagram-generator輸出獨立HTML，內嵌SVG，方便分享，默認深色主題好專業。
- excalidraw-diagram-generator生成可編輯嘅.excalidraw文件，支援UML規範同雲架構圖標。
- 根據場景搭配使用：速度優先揀前兩個，需要後續編輯揀第三個，三者互補唔使二選一。
fireworks-tech-graph
一句話生成技術圖表，支援14種圖表類型同7種風格，可用作Claude Code Skill。
architecture-diagram-generator
輸出獨立HTML嘅架構圖工具，內嵌SVG，深色主題，兼容Claude.ai同Claude Code。
excalidraw-diagram-generator
生成可編輯嘅.excalidraw文件，支援9種圖表類型、UML規範同雲架構圖標，收錄喺awesome-copilot。
技術圖表生成，三個開源Skill一次過睇
技術圖表係開發者嘅日常剛需，系統架構、流程邏輯、數據模型都要畫。傳統做法用Draw.io拖拽或者手寫PlantUML，效率都唔高。最近GitHub出現咗幾個用自然語言描述自動生成圖表嘅開源項目，思路接近但側重點唔同。
技術圖表係開發者嘅日常剛需
用自然語言描述自動生成圖表
三個項目思路接近但側重點唔同
fireworks-tech-graph：一句話生成可發佈技術圖
呢個項目攞到3.6k Star，核心能力係將自然語言描述轉成SVG，再導出高清PNG，啱曬用喺技術博客或演示文檔。佢支援14種圖表類型，UML系列基本全覆蓋，仲有AI/Agent方向嘅專用模板，例如RAG pipeline流程、多Agent協作鏈路。
一句話生成SVG，再導出高清PNG
14種圖表類型
AI/Agent方向嘅專用模板
- 1 視覺風格：7種風格可選，暗黑終端、科技線稿、手繪風格都有。同一張圖換個風格重新生成就得。
- 2 安裝與使用：用Claude Code嘅Skill，一行命令安裝：npx skills add yizhiyanhua-ai/fireworks-tech-graph
npx skills add yizhiyanhua-ai/fireworks-tech-grapharchitecture-diagram-generator：輸出獨立HTML嘅架構圖
畫架構圖有個長期痛點：畫完點樣分享。呢個項目直接輸出一個獨立HTML文件，內嵌SVG，雙擊瀏覽器就睇到，經微信或電郵發送都唔會模糊。同樣攞到3.6k Star。
輸出獨立HTML文件，內嵌SVG
雙擊瀏覽器就睇到，分享方便
- 1 設計細節：默認深色主題，字體JetBrains Mono，效果專業。
- 2 兼容性：同時支援Claude.ai同Claude Code。Claude.ai用戶喺Settings上傳文件就得，Claude Code用戶放到~/.claude/skills/目錄下即可。
同時支援Claude.ai同Claude Code
excalidraw-diagram-generator：生成後仲可以手動編輯
前兩個項目生成完就係定稿，微調要重新描述再生成。呢個Skill嘅分別係輸出.excalidraw JSON文件，拖到excalidraw.com打開之後所有元素都可以繼續編輯。佢收錄喺GitHub官方嘅awesome-copilot倉庫入面。
輸出.excalidraw JSON文件
拖到excalidraw.com繼續編輯
收錄喺GitHub官方awesome-copilot
- 1 支援嘅圖表類型：9種，包括流程圖、關係圖、思維導圖、架構圖、數據流圖、泳道圖、類圖、時序圖、ER圖。
- 2 UML規範支持：對繼承、實現、關聯、依賴、聚合、組合等關係線做咗細緻區分，按規範處理。
- 3 雲架構圖標：可以調用AWS、GCP、Azure嘅官方圖標庫，唔使自己揾素材。
三個項目點樣揀？
追求速度、描述完直接出圖發出去，fireworks-tech-graph同architecture-diagram-generator都合適。前者風格選項更多，後者分享方式更方便。生成之後仲需要調整細節或協作編輯，excalidraw-diagram-generator就係唯一選擇。三個項目唔係互相替代，係互補，根據具體場景搭配使用就得。
追求速度、直接出圖
調整細節或協作編輯
根據場景搭配使用
- 快出即用：fireworks-tech-graph 或 architecture-diagram-generator
- 需要後續編輯：excalidraw-diagram-generator
- 可以同時裝幾個，唔使二選一
大家好，我係蒼一，一個做咗13年嘅後端開發，而家探索緊AI編程，由產品到開發嘅全生命週期最好嘅做法，如果你有興趣，歡迎留意👇，睇我點樣自我革新。
技術圖表係開發者嘅日常必要嘢。系統架構要畫、流程邏輯要畫、數據模型都要畫。傳統做法一係打開Draw.io拖嚟拖去搞半日，一係手寫PlantUML語法，效率都唔高。最近GitHub上有幾個基於自然語言描述自動生成圖表嘅開源項目，思路接近但重點唔同。
fireworks-tech-graph：一句話生成可以發佈嘅技術圖
GitHub上拿到3.6k Star，核心能力係將自然語言描述轉做SVG，再匯出高清PNG。生成嘅圖可以直接用喺技術博客或者演示文檔。
支援14種圖表類型，UML系列基本全部覆蓋，同時整咗AI/Agent方向嘅專用模板，例如RAG pipeline流程、多Agent協作鏈路。
1️⃣ 視覺風格
7種風格可以揀，暗黑終端、科技線稿、手繪風格都有。同一張圖換個風格重新生成就得。
2️⃣ 安裝同使用
Claude Code嘅Skill，安裝一行指令：
npx skills add yizhiyanhua-ai/fireworks-tech-graph
開源地址：https://github.com/yizhiyanhua-ai/fireworks-tech-graph
architecture-diagram-generator：輸出獨立HTML嘅架構圖工具
畫架構圖有個長期痛點：畫完點樣分享。呢個項目直接輸出一個獨立嘅HTML檔案，內嵌SVG，雙擊瀏覽器就睇到。經微信、電郵send都唔會矇。同樣拿到3.6k Star。
3️⃣ 設計細節
預設深色主題，字體用JetBrains Mono，出嚟嘅圖自帶設計感。對於要俾客戶或者上司做系統方案匯報嘅場景，效果比較專業。
4️⃣ 兼容性
同時支援Claude.ai同Claude Code。用Claude.ai嘅話喺Settings度上傳檔案就得，Claude Code用戶就放喺~/.claude/skills/目錄下就得。
開源地址：https://github.com/Cocoon-AI/architecture-diagram-generator
excalidraw-diagram-generator：生成之後仲可以手動編輯
前面兩個項目生成完就係定稿，微調淨係可以重新描述再生成一次。呢個Skill嘅唔同之處在於輸出.excalidraw JSON檔案，拖去excalidraw.com打開之後所有元素都仲可以繼續編輯。收錄咗喺GitHub官方嘅awesome-copilot倉庫入面。
5️⃣ 支援嘅圖表類型
9種：流程圖、關係圖、心智圖、架構圖、數據流圖、泳道圖、類圖、時序圖、ER圖。
6️⃣ UML規範支援
對UML關係線做咗細緻區分。繼承、實現、關聯、依賴、聚合、組合呢幾種線型都按規範處理。
7️⃣ 雲端架構圖標
畫雲端架構圖可以call AWS、GCP、Azure嘅官方圖標庫，唔使自己揾素材。
開源地址：https://github.com/github/awesome-copilot/tree/main/skills/excalidraw-diagram-generator
三個項目點樣揀
追求速度、描述完直接出圖send出去，fireworks-tech-graph同architecture-diagram-generator都啱。前者風格選項多啲，後者分享方式方便啲。
生成之後仲需要調整細節或者協作編輯嘅話，excalidraw-diagram-generator係唯一嘅選擇。
三個項目唔係互相替代嘅關係，根據具體場景配搭使用就得。
如果嫌文章太長、怕之後揾唔返，可以留意下面嘅ima知識號，等呢篇文章成為你嘅知識顧問，隨時隨地等你問問題。
知識號入面嘅內容會以筆記形式分享，可以根據大家嘅反饋同實測情況，即時更新，保證最新方案嘅穩定同可用。
【ima知識庫】蒼一AI編程
大家好，我是蒼一，一個幹了13年的後端開發，正在探索AI編程，從產品到開發的全生命週期最佳實踐，如果您感興趣，歡迎關注👇，看我如何自我革命。
技術圖表是開發者的日常剛需。系統架構要畫、流程邏輯要畫、數據模型也要畫。傳統做法要麼打開Draw.io拖拽半天，要麼手寫PlantUML語法，效率都不高。最近GitHub上出現了幾個基於自然語言描述自動生成圖表的開源項目，思路接近但側重點不同。
fireworks-tech-graph：一句話生成可發佈的技術圖
GitHub上拿到3.6k Star，核心能力是把自然語言描述轉成SVG，再導出高清PNG。生成的圖可以直接用於技術博客或者演示文檔。
支持14種圖表類型，UML系列基本全覆蓋，同時做了AI/Agent方向的專用模板，比如RAG pipeline流程、多Agent協作鏈路。
1️⃣ 視覺風格
7種風格可選，暗黑終端、科技線稿、手繪風格都有。同一張圖換個風格重新生成就行。
2️⃣ 安裝與使用
Claude Code的Skill，安裝一行命令：
npx skills add yizhiyanhua-ai/fireworks-tech-graph
開源地址：https://github.com/yizhiyanhua-ai/fireworks-tech-graph
architecture-diagram-generator：輸出獨立HTML的架構圖工具
畫架構圖有個長期痛點：畫完怎麼分享。這個項目直接輸出一個獨立的HTML文件，內嵌SVG，雙擊瀏覽器就能看。通過微信、郵件發都不會糊。同樣拿到3.6k Star。
3️⃣ 設計細節
默認深色主題，字體用的JetBrains Mono，出來的圖自帶設計感。對於需要給客戶或上級做系統方案彙報的場景，效果比較專業。
4️⃣ 兼容性
同時支持Claude.ai和Claude Code。用Claude.ai在Settings裏上傳文件就行，Claude Code用戶放到~/.claude/skills/目錄下即可。
開源地址：https://github.com/Cocoon-AI/architecture-diagram-generator
excalidraw-diagram-generator：生成後還能手動編輯
前面兩個項目生成完就是定稿了，微調只能重新描述再生成一遍。這個Skill的不同之處在於輸出.excalidraw JSON文件，拖到excalidraw.com打開之後所有元素都可以繼續編輯。收錄在GitHub官方的awesome-copilot倉庫裏。
5️⃣ 支持的圖表類型
9種：流程圖、關係圖、思維導圖、架構圖、數據流圖、泳道圖、類圖、時序圖、ER圖。
6️⃣ UML規範支持
對UML關係線做了細緻區分。繼承、實現、關聯、依賴、聚合、組合這幾種線型都按規範處理。
7️⃣ 雲架構圖標
畫雲架構圖可以調用AWS、GCP、Azure的官方圖標庫，不用自己找素材。
開源地址：https://github.com/github/awesome-copilot/tree/main/skills/excalidraw-diagram-generator
三個項目怎麼選
追求速度、描述完直接出圖發出去，fireworks-tech-graph和architecture-diagram-generator都合適。前者風格選項更多，後者分享方式更方便。
生成之後還需要調整細節或協作編輯，excalidraw-diagram-generator是唯一的選擇。
三個項目不是互相替代的關係，根據具體場景搭配使用就好。
如果嫌文章太長、怕後面走丟，可以關注下面的ima知識號，讓這篇文章成為你的知識顧問，隨時隨地等候你的提問。
知識號中內容會以筆記形式分享，可以根據大家反饋和實測情況，實時更新，保證最新方案的穩定、可用。
【ima知識庫】蒼一AI編程