# 程式設計師 AI 繪圖完全指南

> 1 分鐘生成架構圖，告別手工畫圖



你好，我是程式設計師魚皮。

作為一名程式設計師，畫圖可以說是工作中的家常便飯了。無論是給主管匯報時畫架構圖、還是寫文件時畫流程圖、或者頭腦風暴時畫思維導圖，畫圖能力直接體現出我們的專業水平。

以前畫圖需要自己費時費力，一個複雜的架構圖可能要花幾個小時，還得反覆調整；現在喝杯水的功夫，AI 就幫你畫好了，而且效果還特別專業！

下面我將分享 **5 大類 AI 畫圖方法**，每一種都有詳細的保姆級教程。這些方法一個比一個猛，建議先點讚收藏。以後無論是生成原型圖、設計海報，還是程式設計師常畫的架構圖、流程圖、UML 類圖等等，都是灑灑水的事~

⭐️ 推薦觀看影片版，有更詳細的操作演示：https://bilibili.com/video/BV1DP7JzAE7k



## AI 畫圖的本質

在開始之前，我們先了解一下 AI 畫圖的本質：**其實就是讓 AI 生成各種繪圖工具能夠理解的文本程式碼**，然後將這些程式碼導入到對應的工具中進行渲染。

這樣就能夠借助 AI 的創意和工具的能力自由地生成圖片。

![AI 畫圖原理](https://pic.yupi.icu/1/1748414656182-9580e13e-97bd-4013-8361-ee19b200c0f7.png)

雖然目前主流的 AI 大模型和工具都能實現畫圖功能，但我強烈建議使用 **Cursor 工具搭配 Claude 4 大模型**，效果最佳。

下面來介紹幾類 AI 畫圖方法：



## 一、文本繪圖

文本繪圖是最受高級程式設計師歡迎的畫圖方式，通過簡單的文本描述就能生成專業的技術圖。主流的文本繪圖語言包括 **Mermaid** 和 **PlantUML**。



### Mermaid - 最流行的文本繪圖工具

Mermaid 是目前最流行的文本繪圖工具，語法簡單直觀，被 GitHub、語雀等大平台原生支持。無論你是要畫軟體架構圖、業務流程圖，還是資料庫 ER 圖、Git 分支圖，Mermaid 都能輕鬆搞定。

讓我們先來畫一個用戶登錄流程圖，只需要給 AI 這樣的提示詞：

```plain
請用 Mermaid 語法幫我畫一個用戶登錄流程圖，包含以下步驟：
1. 用戶輸入帳號密碼
2. 前端校驗格式
3. 發送請求到後端
4. 後端驗證用戶信息
5. 如果驗證成功，生成 token 返回
6. 如果失敗，返回錯誤信息
7. 前端根據結果跳轉頁面或顯示錯誤
```

放到 Cursor 等 AI 工具中執行，AI 會生成 Mermaid 程式碼。然後你可以把程式碼複製到支持 Mermaid 的工具中查看效果，比如語雀、Typora、或者在線的 [Mermaid 渲染網站](https://mermaid-live.nodejs.cn/edit)。

![Mermaid 流程圖](https://pic.yupi.icu/1/1748414916480-1151faa7-a03d-49b0-82b0-ba321211456e.png)

很多 AI 聊天助手內置了 Mermaid 渲染工具，能直接看到效果並下載：

![AI 內置渲染](https://pic.yupi.icu/1/1748415298510-f1389787-6859-4cf6-b0c7-fe6712acf57a.png)

Mermaid 還支持多種圖表類型，比如時序圖、甘特圖、餅圖、Git 分支圖、架構圖等。



### PlantUML - 專業的 UML 繪圖工具

PlantUML 是另一個強大的文本繪圖工具，特別擅長繪製 UML 圖、時序圖和系統架構圖。它的語法相對 Mermaid 更加專業和規範，生成的圖表也更加精美。

讓我們用 AI + PlantUML 畫一個經典的訂單系統類圖：

```plain
請用 PlantUML 語法幫我畫一個訂單系統的類圖，包含：
- Order 類：訂單ID、用戶ID、總金額、狀態、創建時間
- OrderItem 類：商品ID、數量、單價
- User 類：用戶ID、用戶名、郵箱
- Product 類：商品ID、名稱、價格、庫存
展示它們之間的關聯關係
```

AI 會生成專業的 PlantUML 程式碼，同樣放到語雀的文本繪圖、或者 [PlantUML 渲染網站](https://www.plantuml.com/plantuml/uml/) 中，都可以看到效果。

![PlantUML 類圖](https://pic.yupi.icu/1/image-20250530125534018.png)



### 如何選擇？

| 特性         | **Mermaid**              | **PlantUML**      | **Graphviz**       |
| ------------ | ------------------------ | ----------------- | ------------------ |
| **圖表類型** | 流程圖、時序圖、甘特圖等 | UML全系列、架構圖 | 各類圖表，極其靈活 |
| **語法難度** | 簡單直觀                 | 中等，UML規範     | 較複雜             |
| **生態支持** | GitHub/GitLab原生支持    | 需要插件支持      | 廣泛支持           |
| **適用場景** | 日常文件配圖             | 專業架構設計      | 複雜網絡拓撲       |

我的建議是，日常使用選 Mermaid，因為它語法簡單、平台支持好；如果要畫專業的 UML 圖，就選 PlantUML。



## 二、網頁繪圖

網頁繪圖是一種非常自由靈活的繪圖方式。本質上是 "圖片即網站" —— 通過生成包含可視化元素的網頁程式碼，在瀏覽器中渲染出各種圖片。



### 原生網頁繪圖

利用網站開發的核心技術（HTML + CSS + JavaScript），我們可以生成各種類型的圖表。還可以借助各種第三方可視化庫（如 ECharts、D3.js 等）來增強效果。

舉個例子，當需要展示數據時，AI 可以利用 Apache ECharts 等可視化庫生成專業的數據大屏：

```plain
請生成一個數據可視化大屏頁面，展示電商平台的實時數據：
1. 頁面佈局：深色背景的大屏風格
2. 包含以下圖表：實時銷售額、各品類銷售佔比、24小時銷售趨勢、熱銷商品TOP10、用戶地域分佈
3. 使用 ECharts 實現，要有動畫效果
```

AI 會生成完整的網站，包含各種圖表，還是挺炫酷的吧~

![數據大屏](https://pic.yupi.icu/1/1748417511003-49c81cc8-618e-4810-b94d-ebcfbb48885d.png)

你可以直接按需截圖，得到圖片；還可以通過 [Codepen](https://codepen.io/) 等網站運行工具將生成的網站快速分享給其他人。



### SVG 矢量圖繪製

SVG 是可縮放的矢量圖形，可以無限縮放而不失真，非常適合繪製 UI 素材、Logo 圖標、圖形插畫、技術架構圖、流程圖等。

讓我們用 SVG 繪製一個系統架構圖：

```plain
請生成一個 SVG 格式的系統架構圖，展示一個典型的三層架構：
- 展示層：Web 前端、移動端 App
- 業務層：API 伺服器集群（3個節點）
- 數據層：主從資料庫、Redis 緩存
要求：使用不同顏色區分各層，添加連接線表示數據流向
```

AI 生成的 SVG 程式碼可以直接保存為 SVG 文件在瀏覽器內打開。

![SVG 架構圖](https://pic.yupi.icu/1/1748419703308-c3e3ab06-bfd0-4d3e-8bd9-6315fe9e3dde.png)



## 三、專業繪圖工具 - Draw.io

如果將 AI 與專業繪圖工具結合，可以實現 1+1 > 2 的效果。

我用的比較多的繪圖工具是免費開源的 **draw.io**，它的優點是自由度極高，支持導入導出多種格式，擁有豐富的圖形庫和模板。

還有個大火的開源項目 [next-ai-draw-io](https://github.com/DayuanJiang/next-ai-draw-io)，可以直接通過 AI 對話來生成和編輯 draw.io 圖片，短短幾天就漲了 6k star！

![AI Draw.io](https://pic.yupi.icu/1/1765425690148-db18c63c-6666-4a0b-a681-0ad4a5c061c3.png)

這個項目支持在線體驗，你可以完全從 0 開始畫圖，比如畫一個流程圖，演示 RAG 的工作原理。AI 會自動生成 Draw.io 繪圖程式碼，很快精美的流程圖就搞定了！

⭐️ 建議觀看影片演示：https://bilibili.com/video/BV18NmnB4EeM

![RAG 流程圖](https://pic.yupi.icu/1/1765425750546-988f6dd9-552b-403f-a1ea-f8866c309663.png)

然後你可以利用 Draw.io 自身強大的繪圖能力手動修改任意元素、或者是改變風格樣式。也可以通過 AI 對話讓它幫你修改，比如改成動畫連接線，逼格一下子就上來了。

![動畫連接線](https://pic.yupi.icu/1/1765425815484-e879ea8a-d40a-4857-baab-4124c3eedcee.png)



### 生成各種技術圖

還有程式設計師工作涉及的架構圖：

```plain
提示詞：繪製電商平台的微服務架構圖
```

![微服務架構圖](https://pic.yupi.icu/1/1765425829760-5337eb51-a51a-4327-a1e0-66b6f4ce2176.png)

UML 類圖：

```plain
提示詞：用 UML 類圖展示用戶管理模塊的設計
```

![UML 類圖](https://pic.yupi.icu/1/1765425843465-53ebe0d1-0df4-46b1-8b27-1bdd98333f5d.png)

ER 圖：

```plain
提示詞：繪製在線教育平台的資料庫 ER 圖
```

![ER 圖](https://pic.yupi.icu/1/1765425852509-4685b9ff-9c86-430c-9e7e-fd1f75877c51.png)

時序圖：

```plain
提示詞：用時序圖展示用戶登錄的交互過程
```

![時序圖](https://pic.yupi.icu/1/1765425862905-cab2301b-77c2-47e4-adc1-6d7c617cd33b.png)

這些通通不在話下，幫你節省大把的時間和毛髮~



### 使用技巧

還有一些使用小技巧，比如配合免費的圖標庫，讓整個繪圖元素更豐富：

```plain
提示詞：使用 AWS 圖標生成 CDN 架構圖
```

![AWS 架構圖](https://pic.yupi.icu/1/1765426030861-27a70a15-559b-4540-9177-5e5f66d120b0.png)

可以使用原生 SVG 動畫標籤，給整個繪圖增加縮放和路徑動畫：

```plain
提示詞：演示 DDOS 攻擊，使用 SVG 的 <animateMotion> 和 <animateTransform type="scale"> 增加縮放和路徑動畫
```

![動畫效果](https://pic.yupi.icu/1/1765425981962-4a730008-8a64-4805-adfc-a63a983e4fde.png)

還可以自己上傳一個草圖，比如我用文本模型生成的 Mermaid 流程圖，讓 AI 幫我替換為更美觀的樣式風格：

```plain
提示詞：改為彩虹主題的配色、放大字體、使用加粗動畫連接線
```

效果還不錯吧！

![優化後的圖](https://pic.yupi.icu/1/1765426075534-26f6f2a7-8ee9-421f-ad10-4910b2b7df34.png)

最後導出為各種圖片或文件格式，美滋滋~

![導出格式](https://pic.yupi.icu/1/1765268527840-a3717305-7bba-4533-8595-c92c21bcd021.png)



### 本地部署

注意，官方提供的演示網站可能限量和不穩定，像我連續用了幾次就被拒絕了。

所以我建議下載開原始碼到本地，按照官方文件的說法 [配置自己的大模型](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/docs/ai-providers.md) 來運行；或者用 Docker 一鍵啟動，想怎麼用就怎麼用。

![Docker 部署](https://pic.yupi.icu/1/1765426188076-914514ec-c5cd-4ac5-8ca7-e09f0808801e.png)



## 四、思維導圖

AI 可以幫我們快速生成精美的思維導圖，並且能夠導出為專業思維導圖軟件支持的格式。

我用的比較多的思維導圖軟件是 XMind，支持豐富的樣式和主題。

我更建議讓 AI 生成 **Markdown 格式的思維導圖**，因為 Markdown 格式更通用，方便在各種文件工具中使用：

```plain
請幫我生成一個關於"微服務架構設計"的思維導圖，使用 Markdown 格式，用縮進表示層級關係
```

AI 會生成這樣的 Markdown 格式：

```markdown
# 微服務架構設計

## 服務拆分原則
- 單一職責
  - 每個服務只負責一個業務功能
  - 高內聚低耦合
- 服務自治
  - 獨立部署
  - 獨立技術選型
```

將這個 Markdown 文件直接導入 XMind，就能生成結構清晰的思維導圖啦！

![思維導圖](https://pic.yupi.icu/1/1748422118001-752df2f4-d369-46b8-8e16-cd96191d554f.png)



## 五、AI 繪圖技巧


### 技巧 1、提供示例圖讓 AI 模仿

當你看到一個很棒的圖，想要繪製同款時，可以直接截圖給 AI，讓它生成類似的圖。

舉個例子，仿照我提供的系統架構圖進行生成：

```plain
請根據我提供的系統架構圖，用 draw.io 格式生成類似風格和結構的圖，但內容改為：
- 一個在線教育平台的架構
- 保持原圖的配色方案和佈局風格
```

生成結果如圖，是不是很像？

![仿照生成](https://pic.yupi.icu/1/1748424880583-92c573bc-fdb2-45d0-b4e0-d2590ea069c5.png)



### 技巧 2、截圖標註，精準修改

如果你對 AI 生成的圖的有些地方不滿意，你可以截圖並在需要修改的地方畫紅圈標註，然後告訴 AI 如何修改。

![標註修改](https://pic.yupi.icu/1/1748424987920-e61af63a-b688-4cf8-8cd5-e05df1d412c9.png)



### 技巧 3、配置專業的系統預設

AI 生成的效果很大程度上取決於輸入的提示詞，所以要讓 AI 畫出更專業的圖，配置一個好的系統提示詞至關重要。

在 Cursor 中，我們可以設置項目級別的 Rules 規則，讓 AI 始終遵循你的繪圖規範。

給大家一個專業的架構圖繪製預設，僅供參考：

```plain
# 技術架構圖繪製專家

你是一名資深的系統架構師和技術圖表設計專家。

## 繪圖原則
1. 所有文字必須使用簡體中文
2. 保持圖表簡潔清晰，避免過度複雜
3. 使用標準的技術圖標和符號
4. 配色專業，層次分明

## 配色方案
- 展示層：藍色系 (#3498db)
- 業務層：綠色系 (#2ecc71)
- 數據層：橙色系 (#e67e22)
```

將這個預設配置到 Cursor Rules 中，AI 就會按照規則來生成圖片，確保輸出的一致性和專業性。



## 寫在最後

看到這裡，相信你已經掌握了 AI 畫圖的各種姿勢了！從簡單的文本繪圖到複雜的動態圖表，AI 都能輕鬆搞定。

不僅能幫我們節省大量時間，而且媽媽再也不用擔心我的圖畫得醜了！

如果你覺得本期內容對你有幫助，別忘了點讚收藏。學編程、對 AI 感興趣的朋友歡迎關注魚皮，在我免費開源的 [AI 知識庫](https://ai.codefather.cn) 中也匯總了大量 AI 知識和教程乾貨，希望對大家有幫助。

![](https://pic.yupi.icu/1/image-20260109121412266-20260113153648943.png)




## 推薦資源

1）魚皮 AI 導航網站：[AI 資源大全、最新 AI 資訊、免費 AI 教程](https://ai.codefather.cn)

2）編程導航學習圈：[學習路線、編