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

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

簡介

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

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

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

來看效果：

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

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

核心特點(diǎn)：

• 純自然語言驅(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 付費(fèi)計劃

三步走：

第一步：安裝好 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 消息隊列"、"把字體改大一點(diǎn)"。每一輪都會重新生成完整的 HTML。

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

圖片用的是純 SVG，viewBox 1000-1100px 寬，響應(yīng)式縮放。背景色，40px 網(wǎng)格。箭頭先繪制然后被不透明背景遮擋，實(shí)現(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 付費(fèi)計劃，免費(fèi)用戶用不了

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

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

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

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

• MIT 開源協(xié)議

制作不易，如果這篇文章覺得對你有用，可否點(diǎn)個關(guān)注。給我個三連擊：點(diǎn)贊、轉(zhuǎn)發(fā)和在看。若可以再給我加個，謝謝你看我的文章，我們下篇再見！