[GitHub Global] Translate Vibe Coding 零基础教程/40 编程学习/05 AI 绘图指南.md to zh-TW

translations/zh-TW/Vibe Coding 零基础教程/40 编程学习/05 AI 绘图指南.md

@@ -0,0 +1,360 @@
+# 程式設計師 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）編程導航學習圈：[學習路線、編