北京
大家好，我是 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
特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
