一句話生成專業(yè)架構(gòu)圖，Claude Skill新玩法

　　大家好，我是 Ai 學(xué)習(xí)的老章

　　今天分享一個讓我眼前一亮的小工具——用自然語言描述你的系統(tǒng)架構(gòu)，Claude 自動幫你畫出專業(yè)級的架構(gòu)圖。

　　簡介

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

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

　　零設(shè)計技能要求。不需要學(xué) Mermaid 語法，不需要拖拽畫框，不需要調(diào)樣式。說人話就行。

　　來看效果：

　　
Web App 架構(gòu)圖示例AWS Serverless 架構(gòu)圖微服務(wù)架構(gòu)圖

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

　　核心特點：

　　純自然語言驅(qū)動：用英文或中文描述架構(gòu)即可，比如 "一個前端 React，后端 FastAPI，數(shù)據(jù)庫 PostgreSQL，用 Redis 做緩存"

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

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

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

　　專業(yè)排版：JetBrains Mono 字體，Slate-950 背景 + 網(wǎng)格圖案

　　安裝

　　三種安裝方式：

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

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

　　
Claude Skills 設(shè)置

　　方式二：Claude Code CLI

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


　　方式三：Claude.ai Projects

　　直接上傳到 Project Knowledge 即可。

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

　　三步走：

　　第一步：安裝好 Skill

　　第二步：準(zhǔn)備架構(gòu)描述。可以手寫，也可以讓 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 文件，下載后瀏覽器打開就是成品架構(gòu)圖。

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

　　技術(shù)細節(jié)

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

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

　　總結(jié)

　　Architecture Diagram Generator 適合這幾類人：

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

　　做技術(shù)方案的人：和產(chǎn)品/領(lǐng)導(dǎo)溝通時，一句話生成架構(gòu)圖，比 PPT 里畫方框高效十倍

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

　　局限也很明顯：

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

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

　　復(fù)雜架構(gòu)（幾十個組件）的布局可能不夠理想，需要多輪調(diào)整

　　但對于 80% 的架構(gòu)圖需求來說，這個工具已經(jīng)夠用了。我給它打個 85 分。

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