[GitHub Global] Translate Vibe Coding 零基础教程/40 编程学习/05 AI 绘图指南.md to zh-TW
This commit is contained in:
yupi-translate-app[bot]
committed by
GitHub
GitHub
parent
e3b8d65cf0
commit
774f5d3dea
@@ -0,0 +1,360 @@
|
||||
# 程式設計師 AI 繪圖完全指南
|
||||
|
||||
> 1 分鐘生成架構圖，告別手工畫圖
|
||||
|
||||
|
||||
|
||||
你好，我是程式設計師魚皮。
|
||||
|
||||
作為一名程式設計師，畫圖可以說是工作中的家常便飯了。無論是給主管匯報時畫架構圖、還是寫文件時畫流程圖、或者頭腦風暴時畫思維導圖，畫圖能力直接體現出我們的專業水平。
|
||||
|
||||
以前畫圖需要自己費時費力，一個複雜的架構圖可能要花幾個小時，還得反覆調整；現在喝杯水的功夫，AI 就幫你畫好了，而且效果還特別專業！
|
||||
|
||||
下面我將分享 **5 大類 AI 畫圖方法**，每一種都有詳細的保姆級教程。這些方法一個比一個猛，建議先點讚收藏。以後無論是生成原型圖、設計海報，還是程式設計師常畫的架構圖、流程圖、UML 類圖等等，都是灑灑水的事~
|
||||
|
||||
⭐️ 推薦觀看影片版，有更詳細的操作演示：https://bilibili.com/video/BV1DP7JzAE7k
|
||||
|
||||
|
||||
|
||||
## AI 畫圖的本質
|
||||
|
||||
在開始之前，我們先了解一下 AI 畫圖的本質：**其實就是讓 AI 生成各種繪圖工具能夠理解的文本程式碼**，然後將這些程式碼導入到對應的工具中進行渲染。
|
||||
|
||||
這樣就能夠借助 AI 的創意和工具的能力自由地生成圖片。
|
||||
|
||||
|
||||
|
||||
雖然目前主流的 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)。
|
||||
|
||||
|
||||
|
||||
很多 AI 聊天助手內置了 Mermaid 渲染工具，能直接看到效果並下載：
|
||||
|
||||
|
||||
|
||||
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/) 中，都可以看到效果。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 如何選擇？
|
||||
|
||||
| 特性 | **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 會生成完整的網站，包含各種圖表，還是挺炫酷的吧~
|
||||
|
||||
|
||||
|
||||
你可以直接按需截圖，得到圖片；還可以通過 [Codepen](https://codepen.io/) 等網站運行工具將生成的網站快速分享給其他人。
|
||||
|
||||
|
||||
|
||||
### SVG 矢量圖繪製
|
||||
|
||||
SVG 是可縮放的矢量圖形，可以無限縮放而不失真，非常適合繪製 UI 素材、Logo 圖標、圖形插畫、技術架構圖、流程圖等。
|
||||
|
||||
讓我們用 SVG 繪製一個系統架構圖：
|
||||
|
||||
```plain
|
||||
請生成一個 SVG 格式的系統架構圖，展示一個典型的三層架構：
|
||||
- 展示層：Web 前端、移動端 App
|
||||
- 業務層：API 伺服器集群（3個節點）
|
||||
- 數據層：主從資料庫、Redis 緩存
|
||||
要求：使用不同顏色區分各層，添加連接線表示數據流向
|
||||
```
|
||||
|
||||
AI 生成的 SVG 程式碼可以直接保存為 SVG 文件在瀏覽器內打開。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 三、專業繪圖工具 - 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！
|
||||
|
||||
|
||||
|
||||
這個項目支持在線體驗，你可以完全從 0 開始畫圖，比如畫一個流程圖，演示 RAG 的工作原理。AI 會自動生成 Draw.io 繪圖程式碼，很快精美的流程圖就搞定了！
|
||||
|
||||
⭐️ 建議觀看影片演示：https://bilibili.com/video/BV18NmnB4EeM
|
||||
|
||||
|
||||
|
||||
然後你可以利用 Draw.io 自身強大的繪圖能力手動修改任意元素、或者是改變風格樣式。也可以通過 AI 對話讓它幫你修改，比如改成動畫連接線，逼格一下子就上來了。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 生成各種技術圖
|
||||
|
||||
還有程式設計師工作涉及的架構圖：
|
||||
|
||||
```plain
|
||||
提示詞：繪製電商平台的微服務架構圖
|
||||
```
|
||||
|
||||
|
||||
|
||||
UML 類圖：
|
||||
|
||||
```plain
|
||||
提示詞：用 UML 類圖展示用戶管理模塊的設計
|
||||
```
|
||||
|
||||
|
||||
|
||||
ER 圖：
|
||||
|
||||
```plain
|
||||
提示詞：繪製在線教育平台的資料庫 ER 圖
|
||||
```
|
||||
|
||||
|
||||
|
||||
時序圖：
|
||||
|
||||
```plain
|
||||
提示詞：用時序圖展示用戶登錄的交互過程
|
||||
```
|
||||
|
||||
|
||||
|
||||
這些通通不在話下，幫你節省大把的時間和毛髮~
|
||||
|
||||
|
||||
|
||||
### 使用技巧
|
||||
|
||||
還有一些使用小技巧，比如配合免費的圖標庫，讓整個繪圖元素更豐富：
|
||||
|
||||
```plain
|
||||
提示詞：使用 AWS 圖標生成 CDN 架構圖
|
||||
```
|
||||
|
||||
|
||||
|
||||
可以使用原生 SVG 動畫標籤，給整個繪圖增加縮放和路徑動畫：
|
||||
|
||||
```plain
|
||||
提示詞：演示 DDOS 攻擊，使用 SVG 的 <animateMotion> 和 <animateTransform type="scale"> 增加縮放和路徑動畫
|
||||
```
|
||||
|
||||
|
||||
|
||||
還可以自己上傳一個草圖，比如我用文本模型生成的 Mermaid 流程圖，讓 AI 幫我替換為更美觀的樣式風格：
|
||||
|
||||
```plain
|
||||
提示詞：改為彩虹主題的配色、放大字體、使用加粗動畫連接線
|
||||
```
|
||||
|
||||
效果還不錯吧！
|
||||
|
||||
|
||||
|
||||
最後導出為各種圖片或文件格式，美滋滋~
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 本地部署
|
||||
|
||||
注意，官方提供的演示網站可能限量和不穩定，像我連續用了幾次就被拒絕了。
|
||||
|
||||
所以我建議下載開原始碼到本地，按照官方文件的說法 [配置自己的大模型](https://github.com/DayuanJiang/next-ai-draw-io/blob/main/docs/ai-providers.md) 來運行；或者用 Docker 一鍵啟動，想怎麼用就怎麼用。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 四、思維導圖
|
||||
|
||||
AI 可以幫我們快速生成精美的思維導圖，並且能夠導出為專業思維導圖軟件支持的格式。
|
||||
|
||||
我用的比較多的思維導圖軟件是 XMind，支持豐富的樣式和主題。
|
||||
|
||||
我更建議讓 AI 生成 **Markdown 格式的思維導圖**，因為 Markdown 格式更通用，方便在各種文件工具中使用：
|
||||
|
||||
```plain
|
||||
請幫我生成一個關於"微服務架構設計"的思維導圖，使用 Markdown 格式，用縮進表示層級關係
|
||||
```
|
||||
|
||||
AI 會生成這樣的 Markdown 格式：
|
||||
|
||||
```markdown
|
||||
# 微服務架構設計
|
||||
|
||||
## 服務拆分原則
|
||||
- 單一職責
|
||||
- 每個服務只負責一個業務功能
|
||||
- 高內聚低耦合
|
||||
- 服務自治
|
||||
- 獨立部署
|
||||
- 獨立技術選型
|
||||
```
|
||||
|
||||
將這個 Markdown 文件直接導入 XMind，就能生成結構清晰的思維導圖啦！
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 五、AI 繪圖技巧
|
||||
|
||||
|
||||
### 技巧 1、提供示例圖讓 AI 模仿
|
||||
|
||||
當你看到一個很棒的圖，想要繪製同款時，可以直接截圖給 AI，讓它生成類似的圖。
|
||||
|
||||
舉個例子，仿照我提供的系統架構圖進行生成：
|
||||
|
||||
```plain
|
||||
請根據我提供的系統架構圖，用 draw.io 格式生成類似風格和結構的圖，但內容改為：
|
||||
- 一個在線教育平台的架構
|
||||
- 保持原圖的配色方案和佈局風格
|
||||
```
|
||||
|
||||
生成結果如圖，是不是很像？
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 技巧 2、截圖標註，精準修改
|
||||
|
||||
如果你對 AI 生成的圖的有些地方不滿意，你可以截圖並在需要修改的地方畫紅圈標註，然後告訴 AI 如何修改。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### 技巧 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 知識和教程乾貨，希望對大家有幫助。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 推薦資源
|
||||
|
||||
1）魚皮 AI 導航網站：[AI 資源大全、最新 AI 資訊、免費 AI 教程](https://ai.codefather.cn)
|
||||
|
||||
2）編程導航學習圈：[學習路線、編
|
||||
Reference in New Issue
Block a user