強烈推薦！這個 Skill 畫架構圖質量超高，一句話出圖
整理版優先睇
一個 Claude Skill 幫你快速生成高質量架構圖，一句話出圖
作者係技術人，成日覺得畫架構圖好麻煩，拖 draw.io 或寫 Mermaid 語法都費時，效果仲未必好。佢發現咗一個 GitHub 倉庫 Cocoon-AI/architecture-diagram-generator 提供嘅 Claude Skill，可以好快生成靚仔架構圖，仲輸出獨立 HTML 檔案，唔使靠任何第三方工具。文章詳細介紹咗呢個 Skill 嘅效果、核心機制、安裝方法同使用方式，結論係：呢個 Skill 大幅降低畫架構圖嘅時間成本，1 分鐘內出到高質量圖表，而且支援迭代修改，非常值得一試。
呢個 Skill 嘅核心係一套完整嘅設計系統，定義喺 SKILL.md 入面，包括語義色彩分層（前端用青色、後端用翠綠、數據庫用紫色等）、箭頭渲染順序（先畫箭頭再畫組件框，避免遮住文字）、圖例位置約束等細節。AI 根據呢套規則生成 HTML + 內聯 SVG 代碼，打開即用，字體用 JetBrains Mono，風格偏工程審美。
安裝有兩種方式：手動下載 zip 上傳到 Claude，或者透過 Skills Hub 一鍵安裝。使用最推薦嘅場景係分析代碼倉庫，AI 會自動輸出完整 HTML 圖表；亦可以直接描述架構讓佢生成。生成之後可以繼續對話調整，例如「將 Redis 移去左邊」「改數據庫層做藍色」，唔使重新生成整張圖。
- 呢個 Skill 專為 Claude 設計，由 Cocoon-AI/architecture-diagram-generator 提供，透過 SKILL.md 定義設計系統，生成獨立 HTML + 內聯 SVG 架構圖。
- 效果方面：輸出深色主題、色彩分層清晰嘅圖表，層級同連接箭頭乾淨，底部仲有信息卡片補充，唔靠任何第三方工具。
- 核心機制係 SKILL.md 入面嘅設計規則，例如語義色彩（Cyan 代表 Frontend、Emerald 代表 Backend 等）、箭頭渲染順序、圖例位置約束，確保 AI 穩定輸出高質量圖。
- 安裝有手動（下載 zip 上傳至 Claude）或透過 Skills Hub（桌面應用，一鍵安裝同步到多個工具）兩種方式。
- 使用最推薦讓 AI 分析代碼倉庫生成架構圖，之後可以對話迭代修改（例如移動組件、改顏色），唔使重頭生成。
Cocoon-AI/architecture-diagram-generator
GitHub 倉庫，包含 SKILL.md 同安裝文件
Skills Hub
桌面應用，用嚟統一管理 AI 編程工具嘅 Skill 文件
結構示例
# 全局安裝unzip architecture-diagram.zip -d ~/.claude/skills/# 項目級安裝（只對當前項目生效）unzip architecture-diagram.zip -d ./.claude/skills/呢個 Skill 畫出嚟嘅圖有幾靚？
作者親測，用呢個 Skill 幫 Skills Hub 項目生成嘅架構圖係深色主題，組件按前端、後端、數據庫、外部服務分顏色標註，層級關係清晰，箭頭乾淨。底部仲有三欄信息卡片補充說明，整體風格偏工程審美，用 JetBrains Mono 字體，比糖果色 UI 圖耐看。
佢順手叫個 Skill 畫一幅微服務架構圖，提示詞就係「微服務應用的典型架構係咩？」唔夠 1 分鐘出圖，涵蓋接入層、安全層、治理層、業務層、數據層、消息層、下游服務、基礎設施八個層次，Kafka/RabbitMQ 消息總線、Service Mesh（Istio/Envoy）全部有，一字唔使改。
輸出係完整 HTML 檔案，瀏覽器直接打開，唔依賴任何第三方工具
核心機制：SKILL.md 設計系統
呢個 Skill 嚟自 GitHub 倉庫 Cocoon-AI/architecture-diagram-generator，核心係 SKILL.md 定義咗一套完整設計系統，包括顏色規範、組件樣式、排版規則、SVG 佈局約定。AI 跟住呢套系統生成 HTML + 內聯 SVG 代碼，打開即用。
語義色彩分層：Frontend 用 Cyan，Backend 用 Emerald，Database 用 Violet，Cloud 用 Amber，安全相關用 Rose
箭頭渲染順序：連接線先於組件框繪製，確保箭頭喺視覺上位於組件之後，唔會蓋住文字
組件框半透明色塊下面畫純色遮罩層，防止箭頭「透過」半透明區域
圖例放喺所有邊界框外面，計算最低邊界再加 20px 距離，防止標註被遮住
呢啲細節平時用 draw.io 要手動搞，呢個 Skill 直接內置咗。作者強調，呢啲約定係「應該有」，但真正令 AI 穩定執行嘅係 SKILL.md 非常明確嘅規則描述，亦係點解佢比直接叫 AI「畫個架構圖」效果好好多。
安裝方法：手動或者一鍵搞掂
安裝有兩種方式，你可以按自己習慣揀。
- 手動安裝：去倉庫下載 architecture-diagram.zip，Claude.ai 去 Settings → Capabilities → Skills → + Add 上傳；或者用 Claude Code CLI command unzip 去 ~/.claude/skills/ 或 ./.claude/skills/。
- 透過 Skills Hub 安裝：下載 Skills Hub 桌面應用（https://github.com/qufei1993/skills-hub），開 Explore 頁面搜尋 architecture-diagram，揾到 cocoon-ai/architecture-diagram-generator 點安裝；或者右上角手動添加 GitHub 倉庫地址。
作者自己用 Skills Hub，話一鍵搞定，仲可以自動同步到 Cursor、Claude Code、Codex 等工具，好方便。
Skills Hub 可以統一管理各 AI 編程工具嘅 Skill 文件，裝一次自動同步
點樣用？最推薦分析代碼倉庫
裝好之後，最推薦嘅用法係：用 Cursor、Claude Code 或 Windsurf 打開你嘅項目，輸入呢句提示詞："Analyze this codebase and describe the architecture. Include all major components, how they connect, what technologies they use, and any cloud services or integrations. Format as a list for an architecture diagram."
AI 會輸出完整 HTML 文件，瀏覽器打開即睇
生成之後唔滿意可以直接對話改，例如「將 Redis 移去左邊」「改數據庫層做藍色」「加一個消息隊列節點」，Claude 會更新 HTML 文件，唔使重新生成整張圖。呢個特性好實用，幾輪對話就調整到位。
支援迭代修改：唔使重頭生成，直接話畀 AI 改邊度就得
其他場景：如果唔需要分析現有代碼，直接描述一個架構都得，例如俾個清單佢畫；或者叫佢畫一個「典型 SaaS 架構」當模板，再按需求改。
總結：值得一試嘅生產力工具
畫架構圖以前成日拖住唔做，因為太花時間。呢個 Skill 可以喺 1 分鐘內出一張質素唔錯嘅圖，係 HTML 形式，修改又方便，有唔啱地方就話畀 AI 改。如果你嘅項目文檔仲欠架構圖，真係值得試下。
1 分鐘內出一張質量唔錯嘅圖，係 HTML 形式，改起嚟都方便
Skill 地址：https://github.com/Cocoon-AI/architecture-diagram-generator
做技術呢行，總有啲嘢係真心唔想做的，畫架構圖算一個。
唔係唔重要，係太麻煩。一係打開 draw.io 由頭拖組件，一係用 Mermaid 寫一大堆語法又要不停調位，最後搞出嚟嘅效果麻麻地，send俾人睇，佢話「就咁咋？」。好多時索性 skip 咗呢步，直接喺文件度寫「架構如下圖所示」，但係圖係空白嘅。
最近發現一個 Skill 搞掂咗呢件事，效果出乎意料咁好，順便寫篇文章同大家推介下。
先睇效果
呢個係我用佢幫 Skills Hub 項目生成嘅架構圖：
整體係深色主題，組件按前端、後端、數據庫、外部服務分顏色標註，層級關係清晰，連接箭頭乾淨，底部仲有三欄信息卡片做補充說明。最重要係，佢輸出嘅係一個獨立嘅 HTML 檔案，瀏覽器直接開到，唔使靠任何第三方工具。
用嘅字體係 JetBrains Mono，整體風格偏工程美學，我個人比較鍾意呢種調調，比嗰啲糖果色嘅 UI 圖更耐睇。
順便又叫佢畫咗張微服務架構圖，用嘅提示詞係「微服務應用嘅典型架構係咩？」，唔使1分鐘出圖：
圖入面涵蓋咗接入層、安全層、治理層、業務層、數據層、消息層、下游服務、基礎設施完整嘅八個層次，Kafka/RabbitMQ 消息總線、Service Mesh（Istio/Envoy）、每個微服務獨享數據庫，應有嘅細節全部都有。呢張圖我一個字都冇改過，就係俾咗一句話，直接生成嘅。
呢個 Skill 係咩
Skill 嚟自 GitHub 倉庫 Cocoon-AI/architecture-diagram-generator，係一個專門用嚟生成架構圖嘅 Claude Skill。
核心機制唔複雜：SKILL.md 定義咗一套完整嘅設計系統，包括顏色規範、組件樣式、排版規則、SVG 佈局約定，然後叫 AI 跟呢套系統生成 HTML + 內嵌 SVG 碼。AI 輸出嘅唔係一張圖片，而係完整嘅 HTML 檔案，入面嘅 SVG 全部內嵌，樣式全部嵌入，打開即用。
設計系統入面嘅細節都幾多，舉幾個例子：
語義色彩分層：Frontend 用 Cyan（青色），Backend 用 Emerald（翠綠），Database 用 Violet（紫色），Cloud 用 Amber（琥珀），安全相關用 Rose（玫瑰紅）。顏色有相應嘅語義，唔係是但揀嘅。
箭頭渲染順序：連接線先於組件框繪製，保證箭頭喺視覺上喺組件之後，避免箭頭遮住文字。組件框仲會喺半透明色塊下面額外畫一個純色遮罩層，防止箭頭「穿過」半透明區域。呢種細節喺 draw.io 入面要手動處理，呢度 Skill 直接內置咗。
圖例位置約束：Legend 一定要放喺所有邊界框嘅外面，並計最低邊界再加 20px 距離，防止標註被區域框遮住。
呢啲約定講起嚟都係「應該嘅」，但真正要 AI 穩定執行，靠嘅係 SKILL.md 入面非常明確嘅規則描述，呢個都係點解佢比起直接叫 AI「畫個架構圖」效果要好好多。
點樣安裝
有兩種方式，跟返自己習慣揀。
方式一：手動安裝
去倉庫下載 architecture-diagram.zip，然後：
Claude.ai：Settings → Capabilities → Skills → + Add，上傳 zip 檔案，開啟就得 Claude Code CLI：
# 全局安裝
unzip architecture-diagram.zip -d ~/.claude/skills/
# 項目級安裝（只對當前項目生效）
unzip architecture-diagram.zip -d ./.claude/skills/
方式二：經 Skills Hub 安裝
我用嘅係呢種方式，一鍵搞掂。Skills Hub 係之前介紹過嘅桌面應用，用嚟統一管理各 AI 編程工具嘅 Skill 檔案，裝一次自動同步到 Cursor、Claude Code、Codex 等一大堆工具入面。
https://github.com/qufei1993/skills-hub 下載
打開 Skills Hub，轉到 Explore 頁面，搜 architecture-diagram，找到 cocoon-ai/architecture-diagram-generator 嗰條，㩒安裝就得。或者㩒右上角嘅 手動添加，直接貼 GitHub 倉庫地址安裝。
安裝完喺 My Skills 頁睇到呢個 Skill 已經同步到對應嘅工具喇：
怎麼用
裝好之後，用法好簡單，唔需要複雜嘅提示詞。
最推介嘅用法：叫 AI 分析碼倉庫，然後生成架構圖。
用 Cursor、Claude Code 或 Windsurf 打開你嘅項目，輸入：
Analyze this codebase and describe the architecture. Include all major
components, how they connect, what technologies they use, and any cloud
services or integrations. Format as a list for an architecture diagram.
AI 會輸出一個完整嘅 HTML 檔案，喺瀏覽器打開就得。
仲支援迭代：生成之後唔滿意，直接喺聊天框講「將 Redis 移去左邊」、「將數據庫層轉成藍色」、「加一個消息隊列節點」，Claude 會跟住你嘅要求更新 HTML 檔案，唔使重新生成成張圖。呢個功能都幾實用，一次過出唔到滿意嘅圖好正常，幾輪對話就可以調整好。
其他場景：如果唔係要分析現有碼，直接描述一個架構都得，例如：
Create an architecture diagram for:
- React frontend
- Node.js/Express API
- PostgreSQL database
- Redis cache
- JWT authentication
或者叫佢畫一個「典型嘅 SaaS 架構」做範本，再按需要修改。
畫架構圖呢樣嘢，以前係拖得就拖，因為太浪費時間。有咗呢個 Skill 之後，1 分鐘內可以出一張質素唔錯嘅圖，係 HTML 形式，改起嚟都好方便，有唔啱嘅就叫 AI 直接改囉。如果你嘅項目文件入面啱啱好欠呢樣嘢，值得試下。
Skill 地址：https://github.com/Cocoon-AI/architecture-diagram-generator
做技術這行，總有些事是真心懶得做的，畫架構圖算一個。
不是不重要，是太麻煩。要麼打開 draw.io 從頭拖組件，要麼用 Mermaid 寫一堆語法還要反覆調位置，最後搞出來的效果差強人意，發給別人一看，"就這？"。更多時候乾脆跳過這一步，直接在文檔裏寫"架構如下圖所示"，然後圖是空白的。
最近發現一個 Skill 把這件事解決了，效果出乎意料地好，順手寫篇文章給大家也安利一下。
先看效果
這是我用它幫 Skills Hub 項目生成的架構圖：
整體是深色主題，組件按前端、後端、數據庫、外部服務分顏色標註，層級關係清晰，連接箭頭乾淨，底部還有三欄信息卡片做補充說明。最重要的是，它輸出的是一個獨立的 HTML 文件，瀏覽器直接打開，不依賴任何第三方工具。
用的字體是 JetBrains Mono，整體風格偏工程審美，我個人比較喜歡這種調性，比那種糖果色的 UI 圖要耐看。
順手又讓它畫了一張微服務架構圖，用的提示詞是"微服務應用的典型架構是什麼？"，不到 1 分鐘出圖：
圖裏涵蓋了接入層、安全層、治理層、業務層、數據層、消息層、下游服務、基礎設施完整的八個層次，Kafka/RabbitMQ 消息總線、Service Mesh（Istio/Envoy）、每個微服務獨享數據庫，該有的細節全在。這張圖我一字沒改，就是給了一句話，直接生成的。
這個 Skill 是什麼
Skill 來自 GitHub 倉庫 Cocoon-AI/architecture-diagram-generator，是一個專門用於生成架構圖的 Claude Skill。
核心機制不復雜：SKILL.md 定義了一套完整的設計系統，包括顏色規範、組件樣式、排版規則、SVG 佈局約定，然後讓 AI 按這套系統生成 HTML + 內聯 SVG 代碼。AI 輸出的不是一張圖片，而是完整的 HTML 文件，裏面的 SVG 全部內聯，樣式全部嵌入，打開即用。
設計系統裏的細節挺多，舉幾個例子：
語義色彩分層：Frontend 用 Cyan（青色），Backend 用 Emerald（翠綠），Database 用 Violet（紫色），Cloud 用 Amber（琥珀），安全相關用 Rose（玫瑰紅）。顏色有對應的語義，不是隨便選的。
箭頭渲染順序：連接線先於組件框繪製，保證箭頭在視覺上位於組件之後，避免箭頭蓋住文字。組件框還會在半透明色塊下面額外畫一個純色遮罩層，防止箭頭"透過"半透明區域。這種細節在 draw.io 裏需要手動處理，這裏 Skill 直接內置了。
圖例位置約束：Legend 必須放在所有邊界框的外面，並計算最低邊界再加 20px 距離，防止標註被區域框遮住。
這些約定說起來都是"應該的"，但真正讓 AI 穩定執行，靠的是 SKILL.md 裏非常明確的規則描述，這也是為什麼它比直接讓 AI "畫個架構圖"效果要好很多。
怎麼安裝
有兩種方式，按自己習慣選。
方式一：手動安裝
去倉庫下載 architecture-diagram.zip，然後：
Claude.ai：Settings → Capabilities → Skills → + Add，上傳 zip 文件，開啓即可 Claude Code CLI：
# 全局安裝
unzip architecture-diagram.zip -d ~/.claude/skills/
# 項目級安裝（只對當前項目生效）
unzip architecture-diagram.zip -d ./.claude/skills/
方式二：通過 Skills Hub 安裝
我用的是這種方式，一鍵搞定。Skills Hub 是之前介紹過的桌面應用，用來統一管理各 AI 編程工具的 Skill 文件，裝一次自動同步到 Cursor、Claude Code、Codex 等一堆工具裏。
https://github.com/qufei1993/skills-hub 下載
打開 Skills Hub，切到 Explore 頁面，搜索 architecture-diagram，找到 cocoon-ai/architecture-diagram-generator 那條，點安裝就行。或者點右上角的 手動添加，直接粘貼 GitHub 倉庫地址安裝。
安裝完在 My Skills 頁能看到這個 Skill 已經同步到對應工具了：
怎麼用
裝好之後，使用方式很簡單，不需要複雜的提示詞。
最推薦的用法：讓 AI 分析代碼倉庫，然後生成架構圖。
用 Cursor、Claude Code 或 Windsurf 打開你的項目，輸入：
Analyze this codebase and describe the architecture. Include all major
components, how they connect, what technologies they use, and any cloud
services or integrations. Format as a list for an architecture diagram.
AI 會輸出一個完整的 HTML 文件，在瀏覽器打開就行。
還支持迭代：生成之後不滿意，直接在聊天框說"把 Redis 移到左邊"、"把數據庫層換成藍色"、"加一個消息隊列節點"，Claude 會按你的要求更新 HTML 文件，不用重新生成整張圖。這個特性挺實用的，一次出不了滿意的圖很正常，幾輪對話就能調整到位。
其他場景：如果不是要分析現有代碼，直接描述一個架構也行，比如：
Create an architecture diagram for:
- React frontend
- Node.js/Express API
- PostgreSQL database
- Redis cache
- JWT authentication
或者讓它畫一個"典型的 SaaS 架構"當模板，再按需修改。
畫架構圖這件事，以前是能拖就拖，因為太費時間。有了這個 Skill 之後，1 分鐘內能出一張質量不錯的圖，是 HTML 形式，改起來也方便，有不合適的就讓 AI 直接改嘍。如果你的項目文檔里正好缺這塊，值得試一下。
Skill 地址：https://github.com/Cocoon-AI/architecture-diagram-generator