推薦 3 個 GitHub 畫圖 Skill，一句話生成流程圖、架構圖。
整理版優先睇
推薦三個GitHub畫圖Skill，一句話生成流程圖、架構圖，各有特色
呢篇文章係由微信公眾號「逛逛GitHub」整理嘅，作者揾到三個好用嘅GitHub畫圖Skill，目的係解決技術圖表繪製麻煩嘅問題——好多時想畫流程圖、架構圖，但唔想手動拖元件，又想輸出格式方便分享或者後期修改。整體結論係呢三個Skill都好實用，分別針對「快速生成」「易於分享」「可手動編輯」三個場景，你可以按自己需要揀一個嚟用。
第一個Skill叫fireworks-tech-graph，係一個Claude Code Skill，你用白話講低想要嘅圖，佢就幫你生成SVG，再導出成高清PNG。佢支援14種圖表，包括UML全家桶同AI/Agent模板，例如RAG pipeline、多Agent協作流程呢類圖，特別適合寫AI相關內容嘅人。視覺風格有7種可以揀，暗黑終端風、科技線稿風、手繪風都有，同一張圖換個風格再生成就得，唔使自己改樣式。裝起嚟都好簡單，一行命令加一個系統依賴就得。
第二個Skill係architecture-diagram-generator，由Cocoon-AI開源。佢嘅輸出係一個獨立HTML文件，入面嵌咗SVG，雙擊就可以喺任何瀏覽器打開，丟去微信或者郵件唔會糊，分享畀老細或者客戶好方便。默認係深色主題，用JetBrains Mono字體，出嚟嘅圖自帶設計感。兼容Claude.ai同Claude Code，安裝都係放個文件就得。第三個Skill係GitHub官方出品嘅Excalidraw Diagra…
- 三個Skill都可以用自然語言一句話生成圖表，唔使手動畫，但輸出格式同後期編輯能力唔同
- fireworks-tech-graph支援14種圖表（UML、AI/Agent模板），一鍵生成SVG/PNG，風格可選，適合快速出圖
- architecture-diagram-generator輸出獨立HTML文件（嵌SVG），雙擊即開，分享方便，唔使收件人裝工具
- Excalidraw Diagram Generator生成可編輯嘅.excalidraw JSON，拖入Excalidraw即可修改，支援UML線型同雲服務圖標
- 按場景揀：需要快速出圖揀第一個；要分享畀老細或客戶揀第二個；需要後期反覆修改或協作揀第三個
fireworks-tech-graph
Claude Code Skill，用自然語言生成14種圖表（UML、AI模板），輸出SVG/PNG，支援7種風格
architecture-diagram-generator
生成獨立HTML文件（SVG嵌入），雙擊即可在瀏覽器打開，深色主題，適合分享
Excalidraw Diagram Generator
生成.excalidraw JSON，可拖入Excalidraw繼續編輯，支援UML線型同雲服務圖標
快速生成專業圖表：fireworks-tech-graph
呢個Skill係Claude Code嘅專用工具，你直接用白話講低想要嘅圖，佢就幫你生成SVG，再導出成高清PNG，可以直接放入博客或者PPT。佢嘅能力矩陣好全面，一共支援14種圖表類型，UML全家桶齊全，仲有AI/Agent模板，例如RAG pipeline、多Agent協作流程，寫AI相關內容超實用。
# 安裝Skill
npx skills add yizhiyanhua-ai/fireworks-tech-graph
# Mac上仲要安裝底層依賴（用嚟轉SVG做PNG）
brew install librsvg裝完之後，直接同Claude講「畀我畫一張RAG pipeline嘅流程圖，用暗黑終端風格」，幾秒鐘就出一張用得嘅圖。開源地址係https://github.com/yizhiyanhua-ai/fireworks-tech-graph 。
一鍵生成可分享HTML：architecture-diagram-generator
呢個Skill專註解決畫完圖之後點樣分享嘅問題——如果導出圖片清晰度唔夠，或者畀.drawio文件對方又要裝工具。Cocoon-AI開源嘅architecture-diagram-generator直接輸出一個獨立HTML文件，入面嵌咗SVG，雙擊就可以喺任何瀏覽器打開，丟去微信、郵件都唔會糊，分享起來好無腦。
默認風格係深色主題，字體用JetBrains Mono，出嚟嘅圖自帶設計感，唔使自己再調配色。佢兼容Claude.ai同Claude Code：如果用Claude.ai，去Settings → Capabilities → Skills上傳文件就得；Claude Code用戶就將文件放去~/.claude/skills/下面。
生成後仍可編輯：Excalidraw Diagram Generator
呢個係GitHub官方awesome-copilot倉庫收錄嘅Skill，最大賣點係輸出格式係.excalidraw JSON文件。將文件拖入excalidraw.com（一個120K Star嘅開源在線畫板），就可以繼續編輯：改顏色、挪位置、加箭頭、刪節點，全部都得。
支援嘅圖表種類有9種：流程圖、關係圖、思維導圖、架構圖、數據流圖、泳道圖、類圖、時序圖、ER圖，日常畫圖基本覆蓋。特別係對UML關係線做咗細緻區分：繼承、實現、關聯、依賴、聚合、組合，全部按規範，畫類圖好專業。
開源地址：https://github.com/github/awesome-copilot/tree/main/skills/excalidraw-diagram-generator 。
01
一句話畫出可以直接發佈嘅技術圖
最近喺 GitHub 上面見到一個畫圖嘅 Skill，叫 fireworks-tech-graph，而家已經有 3.6k Star。
呢個項目做嘅嘢簡單講就係：你用口語講低想要嘅圖，佢幫你生成 SVG，再導出成高清 PNG，直接就可以擺入博客或者 PPT 度。
我睇過佢嘅能力矩陣，都幾勁嚇。
總共支援 14 種圖表類型，UML 全家桶都有，仲專門做咗 AI/Agent 方向嘅模板。
好似 RAG pipeline、多 Agent 協作流程呢啲，喺國內寫 AI 相關內容嘅場景特別實用。
視覺風格都有 7 種可以揀，暗黑終端風、科技線稿風、手繪風都可以轉。
同一張圖換個風格再生成一次就得，唔使自己動手改樣式。
佢係一個 Claude Code 嘅 Skill，裝起嚟一行命令：
npx skills add yizhiyanhua-ai/fireworks-tech-graphMac 上仲要 brew install librsvg 裝一下底層依賴，用嚟將 SVG 轉做 PNG。
裝完之後，直接同 Claude 講畫一張 RAG pipeline 嘅流程圖，用暗黑終端風格，幾秒鐘就畀你一張可以直接用嘅圖。
開源地址：https://github.com/yizhiyanhua-ai/fireworks-tech-graph02
Architecture Diagram Generator
畫架構圖仲有一樣好煩嘅嘢，畫完之後點樣發畀人睇，如果導出圖片清晰度可能唔夠，發 draw.io 檔案對方仲要裝工具。
Cocoon-AI 開源嘅 architecture-diagram-generator 專門解決呢個問題，Star 都衝到 3.6k 呢個量級。
佢嘅輸出形態好得意，直接畀你一個獨立嘅 HTML 檔案，入面嵌住 SVG，雙擊就可以喺任何瀏覽器度開嚟睇。
擺落微信、電郵都唔會矇，分享起上嚟相當無腦。
預設風格行深色主題，字體用 JetBrains Mono，出嚟嘅圖自帶設計感，唔使自己再去調配色。
呢個 Skill 同時兼容 Claude.ai 同 Claude Code。
如果你用緊 Claude.ai，直接去 Settings → Capabilities → Skills 將檔案傳上去就得。Claude Code 用戶將檔案掉到 ~/.claude/skills/ 下都可以直接用。
幾適合嗰啲要畀老細或者客戶做系統方案匯報嘅場景，出嚟嘅效果睇落都幾專業。
開源地址：https://github.com/Cocoon-AI/architecture-diagram-generator03
Excalidraw Diagram Generator
GitHub 官方出品，畫完仲可以自己手動改
頭先兩個項目都係 AI 生成完就定稿，想微調只可以重新 prompt。如果你追求生成之後仲可以手動改，呢個更適合。
佢係 GitHub 官方 awesome-copilot 倉庫度收錄嘅一個 Skill，放喺 skills/excalidraw-diagram-generator 下面。
最大嘅爽點在於輸出格式，生成嘅係 .excalidraw JSON 檔案。
將檔案拖到 excalidraw.com 度就可以打開，然後所有元素都可以繼續編輯。
excalidraw 就係嗰個 120K Star 嘅開源在線畫板。
改顏色、移位置、加箭頭、刪節點，全部冇問題。
支援嘅圖表種類都好齊全，我睇過總共有 9 種：流程圖、關係圖、思維導圖、架構圖、數據流圖、泳道圖、類圖、時序圖、ER 圖，日常畫圖基本都覆蓋曬。
特別值得一提係佢對 UML 關係線做咗細緻區分，繼承、實現、關聯、依賴、聚合、組合呢幾種線型全部跟規範嚟，畫類圖顯得特別專業。
要畫雲架構仲可以調用 AWS、GCP、Azure 嘅官方圖標庫，唔使自己再去揾素材圖。
幾適合需要反覆打磨嘅場景，或者同同事協作編輯嘅時候用。
開源地址:https://github.com/github/awesome-copilot/tree/main/skills/excalidraw-diagram-generator04
點擊下面張卡，關注逛逛 GitHub
呢個公眾號歷史發佈過好多有趣嘅開源項目，如果你懶得翻文章一個一個咁揾，你直接關注微信公眾號：逛逛 GitHub，後台對話聊天就得喇。
01
一句話畫出能直接發佈的技術圖
最近在 GitHub 上翻到一個畫圖的 Skill，叫 fireworks-tech-graph，目前已經攢到了 3.6k Star。
這個項目乾的事情說白了就是：你用大白話描述一下想要的圖，它幫你生成 SVG，再導出成高清 PNG，直接就能塞到博客或者 PPT 裏。
我看了一下它的能力矩陣，還挺頂的。
一共支持 14 種圖表類型，UML 全家桶都有，還專門做了 AI/Agent 方向的模板。
比如 RAG pipeline、多 Agent 協作流程這種，在國內寫 AI 相關內容的場景特別實用。
視覺風格也有 7 種可選，暗黑終端風、科技線稿風、手繪風都能切。
同一張圖換個風格再生成一次就行，不用自己動手改樣式。
它是個 Claude Code 的 Skill，裝起來一行命令:
npx skills add yizhiyanhua-ai/fireworks-tech-graphMac 上還要 brew install librsvg 裝一下底層依賴，用來把 SVG 轉成 PNG。
裝完之後，直接跟 Claude 說給我畫一張 RAG pipeline 的流程圖，用暗黑終端風格，幾秒鐘就給你一張能直接用的圖。
開源地址：https://github.com/yizhiyanhua-ai/fireworks-tech-graph02
Architecture Diagram Generator
畫架構圖還有一個很煩人的事，畫完之後怎麼發給別人看，如果導出圖片清晰度可能不夠，發 draw.io 文件對方還得裝工具。
Cocoon-AI 開源的 architecture-diagram-generator 專門解決這個，Star 也衝到了 3.6k 這個量級。
它的輸出形態很有意思，直接給你一個獨立的 HTML 文件，裏面嵌的是 SVG，雙擊就能在任何瀏覽器裏打開看。
丟到微信、郵件都不會糊，分享起來相當無腦。
默認風格走的是深色主題，字體用的 JetBrains Mono，出來的圖自帶設計感，不用自己再去調配色。
這個 Skill 同時兼容 Claude.ai 和 Claude Code。
如果你在用 Claude.ai,直接去 Settings → Capabilities → Skills 把文件傳上去就行。Claude Code 用戶把文件扔到 ~/.claude/skills/ 下也能直接用。
挺適合那種要給老闆或者客戶做系統方案彙報的場景，出來的效果看着就挺專業。
開源地址：https://github.com/Cocoon-AI/architecture-diagram-generator03
Excalidraw Diagram Generator
GitHub 官方出品，畫完還能自己手動改
前面兩個項目都是 AI 生成完就定稿了，想微調只能重新 prompt。如果你追求生成之後還能手動改，這個更合適。
它是 GitHub 官方 awesome-copilot 倉庫裏收錄的一個 Skill，放在 skills/excalidraw-diagram-generator 下面。
最大的爽點在輸出格式，生成的是 .excalidraw JSON 文件。
把文件拖到 excalidraw.com 裏就能打開，然後所有元素都可以繼續編輯。
excalidraw 就是那個 120K Star 的開源在線畫板。
改顏色、挪位置、加箭頭、刪節點，全都沒問題。
支持的圖表種類也很全，我看了一下一共有 9 種：流程圖、關係圖、思維導圖、架構圖、數據流圖、泳道圖、類圖、時序圖、ER 圖，日常畫圖基本都覆蓋了。
特別值得一提的是它對 UML 關係線做了細緻區分，繼承、實現、關聯、依賴、聚合、組合這幾種線型全都按規範來，畫類圖顯得特別專業。
要畫雲架構還能調 AWS、GCP、Azure 的官方圖標庫,不用自己再去找素材圖。
挺適合需要反覆打磨的場景，或者跟同事協作編輯的時候用。
開源地址:https://github.com/github/awesome-copilot/tree/main/skills/excalidraw-diagram-generator04
點擊下方卡片，關注逛逛 GitHub
這個公眾號歷史發佈過很多有趣的開源項目，如果你懶得翻文章一個個找，你直接關注微信公眾號：逛逛 GitHub ，後台對話聊天就行了：