5.1K+ Stars 的架構圖生成 Skill，複雜系統也能一圖看懂
整理版優先睇
一個 5.1K+ Stars 嘅架構圖生成 Skill，畀 Agent 一套規則，輸出深色風格 HTML+SVG 圖
呢篇文章係介紹一個 GitHub 開源項目 architecture-diagram-generator，目前有 5.1K+ Stars。作者發現平時畫架構圖好麻煩：手動畫好費時間，AI 直接生成又風格亂、層級亂，搞到要重新整理。呢個 Skill 嘅定位係將架構圖生成標準化，透過清晰嘅規則、配色系統、SVG 模板同導出邏輯，令 Agent 可以穩定輸出一份深色風格嘅獨立 HTML 架構圖，瀏覽器打開就睇得，仲可以導出 PNG/PDF。
整體結論係：呢個 Skill 令 AI 生成架構圖變得更加可控，有固定模板、統一風格，仲可以直接導出，適合寫文檔、源碼分析同方案溝通。文章仲用一個開源商城項目 mall4j 做測試，證明可以清楚睇到系統邊界同模塊關係。
如果你成日要用 AI 做技術文檔、源碼解讀或者架構圖，呢個工具值得一試。
- 呢個 Skill 嘅核心係畀 Agent 一套明確嘅架構圖規則，生成結果穩定，接近技術文檔風格。
- 輸出係獨立 HTML 文件，內嵌 CSS 同 SVG，唔使依賴外部畫圖軟件，打開就睇得。
- 預設深色技術主題（Slate 背景、網格底紋、JetBrains Mono 字體），各模塊有固定配色。
- 支援對話式調整：初版唔滿意可以繼續叫 Agent 加組件、改連線、換佈局。
- 適合項目文檔、源碼分析同方案溝通，尤其係幫手快速建立整體認識。
architecture-diagram-generator Skill
一個標準化 Agent Skill，包含生成規則、配色系統、SVG 模板同導出邏輯，可生成深色風格嘅 HTML+SVG 架構圖。
內容片段
Create an architecture diagram for a web application with:
- React frontend- Node.js/Express API- PostgreSQL database- Redis cache- JWT authentication項目定位同核心亮點
呢個項目本質上係一個 Agent Skill，裡面有生成規則、配色系統、SVG 模板同導出邏輯。你可以直接畀系統描述，或者叫 Agent 先分析倉庫代碼結構，再生成一份完整嘅 HTML 架構圖。
獨立 HTML 輸出，瀏覽器打開就睇得，可以直接放落文檔、靜態頁面或者知識庫。
- SVG 架構圖：節點、連線、分組、說明都喺 SVG 裡面，唔使依賴外部畫圖軟件。
- 深色技術風格：預設 Slate 深色背景、網格底紋、JetBrains Mono 字體，前端、後端、數據庫、雲服務、安全模塊有固定配色。
- 內置導出工具欄：v1.1 以後，生成圖右上角有 Copy / PNG / PDF 按鈕，打開 HTML 就可以導出。
- 可以對話式調整：初版唔滿意，可以繼續叫 Agent 加組件、調整連線、換佈局、補說明。
安裝同使用方法
項目提供三種安裝方式。方法一係直接叫 Agent 代執行，複製指定語句畀 Agent 就得。方法二手動下載 zip 解壓到本地 skills 目錄。方法三針對 Claude.ai 用家，下載 zip 後去 Customize -> Skills 上傳啓用，記住要開啓 Code Execution。
使用時直接畀系統描述，例如「Create an architecture diagram for a web application with React frontend, Node.js/Express API, PostgreSQL database, Redis cache, JWT authentication」
項目文檔仲有個示例 prompt，你可以直接用嚟生成常見嘅 Web App 架構圖。
實際測試：用 mall4j 生成架構圖
為咗測試真實代碼庫嘅效果，作者揀咗開源商城項目 mall4j。呢個項目體量唔細，有後台管理同用戶端 API，仲有 Vue 後台、小程序、uni-app 等多端前端；後端用 Spring Boot、Sa-Token、MyBatis-Plus、Redis、MySQL 等技術棧。
用指令「mall4j-master 分析呢個項目，並生成架構圖」，生成嘅圖可以好快睇清主體邊界：前端入口、後端應用、業務模塊、認證、緩存、數據庫同外部服務嘅位置。
對第一次接觸呢個項目嘅人嚟講，呢張圖比直接翻目錄更容易建立整體認識。
適合咩場景？
作者覺得呢個 Skill 最適合三類場景。第一係 項目文檔，將前端、後端、數據庫、緩存、網關、外部服務呢啲模塊梳理成一張圖。
第二係 源碼分析，面對複雜代碼庫時，先用架構圖睇清模塊分層同調用關係，再進入具體源碼。第三係 方案溝通，同同事討論系統設計時，叫 AI 生成一版，再喺對話入面改佈局、改節點、改說明。
🌟星標+👆關注，帶畀你更多有意思嘅github項目
如果平時要寫技術方案、項目覆盤、源碼分析，架構圖基本避唔開。手動畫圖好嘥時間，AI 直接生成又容易風格亂、層級亂，之後仲要重新整理過。
最近見到一個 GitHub 項目：architecture-diagram-generator，目前有 5.1K+ Stars。
佢將架構圖生成整理成一個標準化 Agent Skill，只要輸入系統描述，就可以生成一份深色風格嘅 HTML + SVG 架構圖，瀏覽器打開就睇到，亦可以直接導出 PNG / PDF。
GitHub：https://github.com/Cocoon-AI/architecture-diagram-generator
項目定位
佢本質上係一個 Skill。裏麪包含生成規則、配色系統、SVG 模板同導出邏輯。你可以直接給出系統描述，也可以讓 Agent 先分析倉庫代碼結構，再生成一份完整的 HTML 架構圖文件。
生成出嚟嘅文件係一份獨立 HTML，裏麪包含 CSS 同 SVG，擺喺本地瀏覽器就打得開。對於寫文檔、做方案、補 README 圖嘅人嚟講，呢個形態比較方便。
核心亮點
呢個 Skill 嘅重點，係畀 Agent 一套明確嘅架構圖規則。咁樣生成結果會更穩定，亦更接近可以直接放落技術文檔嘅架構圖。
獨立 HTML 輸出：生成結果可以直接傳畀人，亦可以放入文檔、靜態頁面或者知識庫。 SVG 架構圖：節點、連線、分組、說明都喺 SVG 裏面，唔使靠外部畫圖軟件。 深色技術風格：預設係 Slate 深色背景、網格底紋、JetBrains Mono 字體，前端、後端、數據庫、雲服務、安全模塊有固定配色。 內置導出工具欄：v1.1 之後，生成圖右上角有 Copy / PNG / PDF 掣，打開 HTML 就可以導出。 可以對話式調整：初版唔滿意，可以繼續叫 Agent 加組件、調整連線、換佈局、補說明。
安裝方法
方法一：Agent 代執行
複製下面呢段話畀你嘅 Agent，叫佢幫你完成安裝。
安裝這個skill，github：
https://github.com/Cocoon-AI/architecture-diagram-generator
方法二：手動安裝
先下載 architecture-diagram.zip，然後將入面嘅 Skill 解壓到本地 skills 目錄。
方法三：Claude.ai
如果你係用 Claude.ai，項目推薦嘅方式係下載 architecture-diagram.zip，然後去 Claude 嘅 Customize -> Skills 度上傳並啟用。項目文檔亦提咗：需要先開啓 Code Execution。
使用方法
項目俾咗具體示例：
web app
Create an architecture diagram for a web application with:
- React frontend
- Node.js/Express API
- PostgreSQL database
- Redis cache
- JWT authentication
自測
為咗測試真實代碼庫嘅生成效果，我揀咗 GitHub 上嘅開源商城項目 mall4j。呢個項目體量唔細，既有後台管理同用戶端 API，亦包含 Vue 後台、小程序、uni-app 等多端前端；後端就基於 Spring Boot、Sa-Token、MyBatis-Plus、Redis、MySQL 等技術棧實現。
mall4j-master 分析這個項目，並生成架構圖。中文輸出
透過呢張圖，可以好快睇清 mall4j 嘅主體邊界：邊啲係前端入口，邊啲係後端應用，業務模塊、認證、緩存、數據庫同外部服務分別喺咩位置。對第一次接觸呢個項目嘅人嚟講，佢比直接翻目錄更容易建立整體認識。
適合咩場景
我覺得佢最適合三類場景。
項目文檔：將前端、後端、數據庫、緩存、網關、外部服務呢啲模塊梳理成一張圖。 源碼分析：面對複雜代碼庫時，先用架構圖睇清模塊分層同調用關係，再進入具體源碼。 方案溝通：同同事討論系統設計時，先叫 AI 生成一版，再喺對話入面繼續改佈局、改節點、改說明。
如果只係畫一張好精細嘅品牌級設計圖，佢未必係最好嘅選擇。佢比較偏向技術文檔風格，重點係將組件關係、數據流同邊界表達清楚。
寫喺最後
呢個項目最得意嘅地方，係將 AI 生成架構圖呢件事做得更加可控：有固定模板，有統一風格，亦可以直接導出。
如果你都係用 AI 做技術文檔、源碼解讀或者架構圖，歡迎留言講下你用過邊啲工具，或者你更希望佢支援邊啲場景。
往期回顧
🌟星標+👆關注，帶給你更多有意思的github項目
如果平時要寫技術方案、項目覆盤、源碼分析，架構圖基本繞不開。手動畫圖很費時間，AI 直接生成又容易風格亂、層級亂，後面還要重新整理一遍。
最近看到一個 GitHub 項目：architecture-diagram-generator，目前有 5.1K+ Stars。
它把架構圖生成整理成一個標準化 Agent Skill，只要輸入系統描述，就能生成一份深色風格的 HTML + SVG 架構圖，瀏覽器打開就能看，也能直接導出 PNG / PDF。
GitHub：https://github.com/Cocoon-AI/architecture-diagram-generator
項目定位
它本質上是一個 Skill。裏面包含生成規則、配色系統、SVG 模板和導出邏輯。你可以直接給出系統描述，也可以讓 Agent 先分析倉庫代碼結構，再生成一份完整的 HTML 架構圖文件。
生成出來的文件是一份獨立 HTML，裏面包含 CSS 和 SVG，放到本地瀏覽器就能打開。對於寫文檔、做方案、補 README 圖的人來說，這個形態比較方便。
核心亮點
這個 Skill 的重點，是給 Agent 一套明確的架構圖規則。這樣生成結果會更穩定，也更接近可以直接放進技術文檔的架構圖。
獨立 HTML 輸出：生成結果可以直接發給別人，也可以放進文檔、靜態頁面或知識庫。 SVG 架構圖：節點、連線、分組、說明都在 SVG 裏，不依賴外部畫圖軟件。 深色技術風格：默認是 Slate 深色背景、網格底紋、JetBrains Mono 字體，前端、後端、數據庫、雲服務、安全模塊有固定配色。 內置導出工具欄：v1.1 以後，生成圖右上角帶 Copy / PNG / PDF 按鈕，打開 HTML 就能導出。 可以對話式調整：初版不滿意，可以繼續讓 Agent 增加組件、調整連線、換佈局、補說明。
安裝方法
方法一：Agent 代執行
複製下面這段話給你的 Agent，讓它幫你完成安裝。
安裝這個skill，github：
https://github.com/Cocoon-AI/architecture-diagram-generator
方法二：手動安裝
先下載 architecture-diagram.zip，然後把其中的 Skill 解壓到本地 skills 目錄。
方法三：Claude.ai
如果你用的是 Claude.ai，項目推薦的方式是下載 architecture-diagram.zip，然後到 Claude 的 Customize -> Skills 裏上傳並啓用。項目文檔也提醒：需要先開啓 Code Execution。
使用方法
項目給出了具體示例：
web app
Create an architecture diagram for a web application with:
- React frontend
- Node.js/Express API
- PostgreSQL database
- Redis cache
- JWT authentication
自測
為了測試真實代碼庫的生成效果，我選了 GitHub 上的開源商城項目 mall4j。這個項目體量不小，既有後台管理和用戶端 API，也包含 Vue 後台、小程序、uni-app 等多端前端；後端則基於 Spring Boot、Sa-Token、MyBatis-Plus、Redis、MySQL 等技術棧實現。
mall4j-master 分析這個項目，並生成架構圖。中文輸出
通過這張圖，可以很快看清 mall4j 的主體邊界：哪些是前端入口，哪些是後端應用，業務模塊、認證、緩存、數據庫和外部服務分別處在什麼位置。對第一次接觸這個項目的人來說，它比直接翻目錄更容易建立整體認識。
適合什麼場景
我覺得它最適合三類場景。
項目文檔：把前端、後端、數據庫、緩存、網關、外部服務這些模塊梳理成一張圖。 源碼分析：面對複雜代碼庫時，先用架構圖看清模塊分層和調用關係，再進入具體源碼。 方案溝通：和同事討論系統設計時，先讓 AI 生成一版，再在對話裏繼續改佈局、改節點、改說明。
如果只是畫一張很精細的品牌級設計圖，它未必是最好的選擇。它更偏技術文檔風格，重點是把組件關係、數據流和邊界表達清楚。
寫在最後
這個項目最有意思的地方，是把 AI 生成架構圖這件事做得更可控：有固定模板，有統一風格，也能直接導出。
如果你也在用 AI 做技術文檔、源碼解讀或架構圖，歡迎留言聊聊你用過哪些工具，或者你更希望它支持哪些場景。
往期回顧