91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

在開始之前，我們先了解一下 AI 畫圖的本質：其實就是讓 AI 生成各種繪圖工具能夠理解的文本代碼，然后將這些代碼導入到對應的工具中進行渲染。這樣就能夠借助 AI 的創意和工具的能力自由地生成圖片。

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

一、文本繪圖

文本繪圖是最受高級程序員歡迎的畫圖方式，通過簡單的文本描述就能生成專業的技術圖。主流的文本繪圖語言包括 Mermaid 和 PlantUML，它們各有特色，適用于不同的場景。

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

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

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

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

放到 Cursor 等 AI 工具中執行：

AI 會生成這樣的代碼：

flowchart TD
  A[用戶輸入賬號密碼] --> B{前端格式校驗}
  B -->|格式正確| C[發送登錄請求到后端]
  B -->|格式錯誤| D[顯示格式錯誤提示]
  C --> E{后端驗證用戶信息}
  E -->|驗證成功| F[生成Token]
  F --> G[返回Token給前端]
  G --> H[前端保存Token]
  H --> I[跳轉到主頁]
  E -->|驗證失敗| J[返回錯誤信息]
  J --> K[前端顯示錯誤提示]
  D --> A
  K --> A

然后你就可以把代碼復制到 Mermaid 渲染工具中，比如寫作工具語雀支持添加文本繪圖組件：

然后就會出現一個繪圖框，在左側粘貼文本代碼，右側選擇對應的繪圖語言，就能看到效果了：

很多 Markdown 編輯器也天然支持 Mermaid 繪圖的渲染，比如 Typora：

有很多支持 Mermaid 渲染的網站，還可以導出為 PNG 等格式的圖片：

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

如果你對 AI 生成的效果不滿意，只需手動修改文本即可，會自動重新渲染圖片。

Mermaid 還支持多種圖表類型，比如時序圖：

請用 Mermaid 畫一個訂單支付的時序圖，展示用戶、前端、后端、支付網關之間的交互

AI 生成的效果如圖：

Mermaid 還能畫甘特圖、餅圖、Git 分支圖等，這里再讓 AI 生成一個架構圖：

請用 Mermaid 畫一個簡單的微服務架構圖

AI 生成的效果如圖：

 

2、PlantUML - 專業的 UML 繪圖工具

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

讓我們用 AI + PlantUML 畫一個經典的訂單系統類圖，給 AI 的提示詞如下：

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

AI 會生成專業的 PlantUML 代碼，同樣放到語雀的文本繪圖、或者 PlantUML 渲染網站 中，都可以看到效果：

PlantUML 還特別適合畫復雜的時序圖和系統架構圖。比如一個完整的登錄時序圖：

 

其他文本繪圖工具

除了 Mermaid 和 PlantUML，還有 Flowchart 和 Graphviz 等文本繪圖工具。為了幫大家更好地選擇，我整理了這四種工具的對比：

我的建議是，日常使用選 Mermaid，因為它語法簡單、平臺支持好；如果要畫專業的 UML 圖，就選 PlantUML。如果想生成復雜的網絡拓撲圖，可以選擇 Graphviz，支持更復雜的定制能力。

比如魚皮給自己的野魚網吧生成了一份網絡拓撲圖：

 

二、網頁繪圖

網頁繪圖是一種非常自由靈活的繪圖方式。本質上是 “圖片即網站” —— 通過生成包含可視化元素的網頁代碼，在瀏覽器中渲染出各種圖片，而且可以實現靜態圖片無法做到的交互效果和動畫展示。

1、原生網頁繪圖

利用網站開發的核心技術（HTML + CSS + JavaScript），我們可以生成各種類型的圖表。這種方式雖然不是傳統意義上的繪圖，但效果可能會超出預期。還可以借助各種第三方可視化庫（如 ECharts、D3.js 等）來增強效果。

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

請生成一個數據可視化大屏頁面，展示電商平臺的實時數據：
1. 頁面布局：深色背景的大屏風格，分為頭部標題和多個數據展示區域
2. 包含以下圖表：
  - 實時銷售額（動態數字翻牌效果）
  - 各品類銷售占比（餅圖）
  - 24小時銷售趨勢（折線圖）
  - 熱銷商品TOP10（柱狀圖）
  - 用戶地域分布（中國地圖熱力圖）
3. 使用 ECharts 實現，要有動畫效果
4. 響應式布局，適配不同屏幕

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

你可以直接按需截圖，得到圖片；還可以通過 Codepen 等網站運行工具將生成的網站快速分享給其他人。

同理，AI 還能快速生成產品原型圖，特別適合快速驗證想法。給 AI 的提示詞如下：

你是一位專業的 UI 設計師，請生成一個移動端電商APP的完整原型圖，要求：
1. 使用 HTML+CSS 實現，風格簡潔現代
2. 在同一個 HTML 頁面中生成所有的原型頁面，平鋪排列
3. 生成的原型圖是可以直接提供給前端程序員進行開發的
4. 當你需要圖片資源時，優先使用 SVG 格式的圖片

查看 AI 生成的原型圖效果，我著實替 UI 設計師朋友們也捏了一把汗。。。

 

2、SVG 矢量圖繪制

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

SVG 文件本質上是 XML 格式的文本代碼，可以直接嵌入網頁或導入各種設計工具。

讓我們用 SVG 繪制一個系統架構圖，給 AI 的提示詞如下：

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

AI 生成的 SVG 代碼可以直接嵌入網頁或導入設計工具，也可以保存為 SVG 文件直接雙擊在瀏覽器內打開。效果還不錯吧~

使用 SVG 的另一個優點是可以精確控制每個元素的位置、大小和樣式，甚至能添加動畫效果，讓圖片更加生動。

 

3、Canvas 動態繪圖

Canvas 是 HTML5 提供的一個畫布元素，通過 JavaScript 可以在上面繪制各種圖形。與 SVG 不同，Canvas 是基于像素的，而且性能優秀，適合創建需要精確控制元素細節、動畫效果豐富的畫面，很多游戲也是基于 Canvas 實現的。

讓我們利用 AI + Canvas 繪制一個海報頁面，給 AI 的提示詞如下：

請用 HTML5 Canvas 創建一個商務風格的宣傳海報：
- 主題：企業網絡解決方案
- 布局：上下分層設計，上部分為圖形區域，下部分為文字區域
- 核心圖形：5個立體感服務器圖標，用優雅的曲線連接
- 配色：藍白配色方案，體現專業感
- 文字內容：公司 Logo、產品名稱、核心賣點
- 視覺效果：微妙的陰影和高光，提升質感
- 輸出格式：可打印的高分辨率海報

生成的效果如圖，我感覺還不錯，而且還順便生成了下載海報圖片的按鈕：

再來繪制一個高大上的網絡性能監控儀表板，給 AI 的提示詞如下：

請用 HTML5 Canvas 創建一個網絡性能監控儀表板：
- 設計元素：
* 中央放置主要的網絡拓撲圖
* 周圍添加各種圖表和數據指標
* 實時數據流動效果
* 狀態指示燈和進度條
- 配色：深色主題配亮色高亮
- 文字：等寬字體，模擬代碼風格
- 細節：添加網格背景和掃描線效果

生成的效果很炫酷，非常適合拿來做技術演示（PPT）：

 

三、思維導圖

AI 可以幫我們快速生成精美的思維導圖，并且能夠導出為專業思維導圖軟件支持的格式，便于我們在學習和工作中梳理知識。

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

可以通過 AI 直接生成 XMind 格式的思維導圖代碼，提示詞如下：

請幫我生成一個關于"微服務架構設計"的思維導圖，要求生成可以導入 XMind 軟件的格式。
注意，XMind 文件實際上是一個 ZIP 壓縮包，需要包含多個必要的文件。

導圖內容包含以下要點：
1. 服務拆分原則
  - 單一職責
  - 服務自治
  - 接口明確
2. 通信機制
  - 同步通信（REST、gRPC）
  - 異步通信（消息隊列）
3. 服務治理
  - 服務注冊與發現
  - 負載均衡
  - 熔斷降級

生成的效果還不錯，還可以在軟件中進一步美化思維導圖的樣式，圖片太長了就給大家看一部分吧~

不過我更建議讓 AI 生成 Markdown 格式的思維導圖，因為 Markdown 格式更通用，方便在各種文檔工具中使用。給 AI 提供下面這段提示詞：

請將上述微服務架構內容整理成 Markdown 格式的思維導圖，使用縮進表示層級關系

AI 會生成這樣的 Markdown 格式：

# 微服務架構設計

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

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

 

四、專業繪圖工具

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

我用的比較多的繪圖工具是免費開源的 draw.io，它的優點是 自由度極高，支持導入導出多種格式，擁有豐富的圖形庫和模板。當需要繪制復雜圖片時，先讓 AI 生成 draw.io 格式的 XML 代碼，然后導入到 draw.io 中進行二次編輯，能夠大幅提升作圖效率。

舉個例子，讓 AI 為魚皮在 編程導航 原創的十幾套項目教程生成一個學習路線圖：

請根據下列內容，生成 draw.io 格式的《編程導航原創項目學習路線圖》代碼：

## 以下是項目學習相關內容
...
...

然后直接復制 AI 生成的 XML 代碼：

并粘貼到 draw.io 中，就得到了下面這張圖，效果還挺不錯的吧！

然后你可以將繪圖導出為各種主流圖片格式，甚至是 PDF 文檔和 HTML 網頁：

再來畫一個復雜的架構圖吧。讓 AI 根據我的《億級流量點贊系統項目教程》生成對應的架構圖，提示詞如下：

請根據下列內容，生成 draw.io 格式的《億級流量點贊系統的架構圖》代碼：

## 以下是項目教程相關內容
...
...

AI 生成的繪圖如下：

是不是挺震撼的？如果人工來畫這張圖，半條命估計就下去了。

不過我們會發現，AI 有時候生成的圖片元素會出現排版錯亂、位置對不齊的情況。這時就需要人工進行調整了，有時要改的內容還挺多的，沒點兒畫圖功底還真駕馭不了 AI。

所以雖然 AI + draw.io 這種畫圖方法看起來最強大，實際上還是建議大家根據作圖的類型和復雜度，選擇最合適的方法吧。

 

五、Emoji 繪圖

還有一些適合整活兒的創意畫圖方法，比如利用 Emoji 表情來繪制簡單的圖。

舉個例子，使用下面這段提示詞：

利用 Emoji 幫我生成純文本格式的流程圖，要求生動有趣，盡可能多地將文本替換為 Emoji 表示。

提供的內容如下：
開發 -> 測試 -> 部署 -> 監控，循環往復

AI 會生成類似這樣的效果：

?? 軟件開發生命周期流程圖 ??

  ????? 開發階段
        ??
  ?? 測試階段  
        ??
  ?? 部署階段
        ??
  ?? 監控階段
        ??
        ??
  (循環往復)

或者這樣 ??，這是不是有點太抽象了？？？

?? DevOps 循環

????? ?? ?? ?? ?? ?? ??
??                   ??
?? ?? ?? ?? ?? ?? ??

還可以用 Emoji 畫更復雜的圖，比如微服務架構：

利用 Emoji 幫我生成純文本格式的微服務架構圖，要求生動有趣，盡可能多地將文本替換為 Emoji 表示。

AI 會生成這樣的效果，抽象，太抽象了！

?? 微服務架構全景圖 ???

                  ?? 用戶
                    ??
                ?? API 網關 ???
                    ??
      ┌─────────────┼─────────────┐
      ??           ??           ??
  ?? 訂單服務   ?? 用戶服務   ?? 支付服務
      ??           ??           ??
  ??? 訂單DB     ??? 用戶DB     ??? 支付DB

同理，大家還可以嘗試下字符畫繪圖，大膽發揮創意盡情探索、盡情壓榨 AI 吧~

 

AI 繪圖技巧

掌握了基本的繪圖方法后，魚皮再給大家開個小灶，分享一些高級技巧，幫你更快地畫出更好的圖。

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

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

舉個例子，仿照我提供的系統架構圖進行生成，這種場景適合使用 draw.io 工具。示例 Prompt 如下：

請根據我提供的系統架構圖，用 draw.io 格式生成類似風格和結構的圖，但內容改為：
- 一個在線教育平臺的架構
- 保持原圖的配色方案和布局風格
- 包含用戶端、管理端、API 網關、核心服務、數據存儲等模塊

在 Cursor 中執行：

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

 

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

如果你對 AI 生成的圖的有些地方不滿意，你可以截圖并在需要修改的地方畫紅圈標注，然后告訴 AI 如何修改，從而實現精準修改。

舉個例子，先對生成的架構圖進行標注，利用截圖工具就可以完成了：

然后將標注過的圖片和下列 Prompt 一起發送給 AI：

我在圖片上用紅圈標注了幾個地方，請幫我進行修改。
其他部分保持不變，并輸出新的 draw.io 格式的圖片：
1. 第一個紅圈：字體換行了，導致內容顯示不全
2. 第二個紅圈：2 個斜箭頭不是特別好看
3. 第三個紅圈：字體換行了，應該在同一行顯示

生成結果如圖：

可以發現大多數問題都已經修復了，但缺點是 AI 會重新生成一遍圖片，每次都要等一段時間。運氣不好的話要浪費好多時間在和 AI 斗智斗勇上。。。

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

AI 生成的效果很大程度上取決于輸入的提示詞，所以要讓 AI 畫出更專業的圖，配置一個好的系統提示詞至關重要。在 Cursor 中，我們可以設置項目級別的 Rules 規則，讓 AI 始終遵循你的繪圖規范。

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

# 技術架構圖繪制專家

你是一名資深的系統架構師和技術圖表設計專家，精通各種技術棧和繪圖工具。

## 繪圖原則
1. 所有文字必須使用簡體中文
2. 保持圖表簡潔清晰，避免過度復雜
3. 使用標準的技術圖標和符號
4. 配色專業，一般使用藍、綠、橙等技術感色彩
5. 層次分明，主次關系清晰

## 技術規范
1. 架構圖分層清晰：展示層、網關層、服務層、數據層
2. 使用虛線表示異步調用，實線表示同步調用
3. 標注關鍵技術棧和中間件
4. 添加必要的文字說明，但不要過多
5. 考慮高可用、負載均衡等架構要素

## 輸出要求
1. 根據圖表類型和復雜度選擇 Mermaid、PlantUML 或 draw.io 語法
2. 如果是復雜架構，分模塊逐步展示

## 配色方案
- 展示層：藍色系 (#3498db)
- 業務層：綠色系 (#2ecc71)
- 數據層：橙色系 (#e67e22)
- 中間件：紫色系 (#9b59b6)
- 錯誤/警告：紅色系 (#e74c3c)

進入 Cursor 的 Rules 設置界面，添加一個規則：

將這個預設配置到規則中，可以設置為每次對話都生效，也可以人工按需使用，我這里設置為人工按需使用：

在 AI 對話時指定 Cursor Rules，AI 就會按照規則來生成圖片，確保輸出的一致性和專業性：

生成效果如圖，是不是有內味兒了~

 

技巧 4、組合生成

有時你也不知道哪種方法作圖效果最好，干脆就同時生成多種不同的繪圖代碼，再從中挑選。

示例提示詞如下：

請幫我繪制一個用戶登錄流程圖，要求同時生成下列格式的代碼：
1. Mermaid
2. PlantUML
3. draw.io

但是這個技巧大家了解一下就好了，實際使用時生成速度會慢很多，成本會比較大。

 

結尾

看到這里，相信你已經掌握了 AI 畫圖的各種姿勢了！從簡單的文本繪圖到復雜的動態圖表，AI 都能輕松搞定。不僅能幫我們節省大量時間，而且媽媽再也不用擔心我的圖畫得丑了！

?轉自https://www.cnblogs.com/yupi/p/18904399