大家好，我是 Ai 學習的老章

　　今天分享一個讓我眼前一亮的小工具——用自然語言描述你的系統架構，Claude 自動幫你畫出專業級的架構圖。

　　簡介

　　Architecture Diagram Generator 是 Cocoon AI 團隊開源的一個 Claude Skill，GitHub 上已經快 2000 星了。

　　它做的事很簡單：你用自然語言描述你的系統架構，Claude 自動生成一張深色主題的專業架構圖，輸出為獨立的 HTML 文件，任意瀏覽器打開就能看。

　　零設計技能要求。不需要學 Mermaid 語法，不需要拖拽畫框，不需要調樣式。說人話就行。

　　來看效果：

　　
Web App 架構圖示例AWS Serverless 架構圖微服務架構圖

　　說實話，這個視覺效果比我手動用 draw.io 畫半天的強多了。深色背景 + 語義化配色，放到技術文檔和 PPT 里直接能用。

　　核心特點：

　　純自然語言驅動：用英文或中文描述架構即可，比如 "一個前端 React，后端 FastAPI，數據庫 PostgreSQL，用 Redis 做緩存"

　　語義化配色：前端用 Cyan，后端用 Emerald，數據庫用 Violet，云服務用 Amber，安全用 Rose——不用你操心配色

　　自包含輸出：單個 HTML 文件，內嵌 CSS + 內聯 SVG，零 JavaScript 依賴，拿到哪兒都能看

　　迭代式對話：生成后不滿意可以繼續改，"把數據庫換成 MongoDB"、"加一個消息隊列"

　　專業排版：JetBrains Mono 字體，Slate-950 背景 + 網格圖案

　　安裝

　　三種安裝方式：

　　方式一：Claude.ai Skill（推薦）

　　從 GitHub 下載architecture-diagram.zip，然后： Settings → Capabilities → Skills → 上傳 zip 包

　　
Claude Skills 設置

　　方式二：Claude Code CLI

　　unzip architecture-diagram.zip -d ~/.claude/skills/


　　方式三：Claude.ai Projects

　　直接上傳到 Project Knowledge 即可。

? ?? 需要 Claude Pro / Max / Team / Enterprise 付費計劃

　　三步走：

　　第一步：安裝好 Skill

　　第二步：準備架構描述?？梢允謱?，也可以讓 Claude 分析你的代碼自動生成

　　第三步：開聊

　　Use your architecture diagram skill to create an architecture diagram
from this description:

Frontend: React app with Next.js
Backend: FastAPI with Python
Database: PostgreSQL + Redis cache
Auth: Auth0
Deploy: AWS ECS + CloudFront


　　Claude 會直接輸出一個 HTML 文件，下載后瀏覽器打開就是成品架構圖。

　　不滿意？繼續對話："把部署換成 Kubernetes"、"加一個 Kafka 消息隊列"、"把字體改大一點"。每一輪都會重新生成完整的 HTML。

　　技術細節

　　圖片用的是純 SVG，viewBox 1000-1100px 寬，響應式縮放。背景色，40px 網格。箭頭先繪制然后被不透明背景遮擋，實現了組件在前、連線在后的層級效果。

　　整個方案沒有用任何 JavaScript，純 CSS + SVG。這意味著輸出文件極其輕量，打開速度飛快，也方便嵌入到靜態網站或文檔里。

　　總結

　　Architecture Diagram Generator 適合這幾類人：

　　寫技術文檔的人：快速生成配圖，不用再打開 draw.io 拖半天

　　做技術方案的人：和產品/領導溝通時，一句話生成架構圖，比 PPT 里畫方框高效十倍

　　寫博客的人：深色主題效果拉滿，直接截圖就是高質量配圖

　　局限也很明顯：

　　依賴 Claude 付費計劃，免費用戶用不了

　　深色主題是固定的，想要白色背景得自己改 CSS

　　復雜架構（幾十個組件）的布局可能不夠理想，需要多輪調整

　　但對于 80% 的架構圖需求來說，這個工具已經夠用了。我給它打個 85 分。

　　GitHub：https://github.com/Cocoon-AI/architecture-diagram-generator