日韩欧美人妻无码精品白浆,夜夜嗨AV免费入口,国产欧美官网在线看,高校回应聋哑女生因长相完美被质疑

LOGO OA教程 ERP教程 模切知識(shí)交流 PMS教程 CRM教程 開發(fā)文檔 其他文檔  
 
網(wǎng)站管理員

1 分鐘生成架構(gòu)圖?程序員 AI 繪圖保姆級(jí)教程

freeflydom
2025年6月4日 8:51 本文熱度 375

在開始之前,我們先了解一下 AI 畫圖的本質(zhì):其實(shí)就是讓 AI 生成各種繪圖工具能夠理解的文本代碼,然后將這些代碼導(dǎo)入到對(duì)應(yīng)的工具中進(jìn)行渲染。這樣就能夠借助 AI 的創(chuàng)意和工具的能力自由地生成圖片。

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

一、文本繪圖

文本繪圖是最受高級(jí)程序員歡迎的畫圖方式,通過簡(jiǎn)單的文本描述就能生成專業(yè)的技術(shù)圖。主流的文本繪圖語(yǔ)言包括 Mermaid 和 PlantUML,它們各有特色,適用于不同的場(chǎng)景。

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

Mermaid 是目前最流行的文本繪圖工具,語(yǔ)法簡(jiǎn)單直觀,被 GitHub、語(yǔ)雀等大平臺(tái)原生支持。無論你是要畫軟件架構(gòu)圖、業(yè)務(wù)流程圖,還是數(shù)據(jù)庫(kù) ER 圖、Git 分支圖,Mermaid 都能輕松搞定。

讓我們先來畫一個(gè)用戶登錄流程圖,只需要給 AI 這樣的提示詞:

請(qǐng)用 Mermaid 語(yǔ)法幫我畫一個(gè)用戶登錄流程圖,包含以下步驟:
1. 用戶輸入賬號(hào)密碼
2. 前端校驗(yàn)格式
3. 發(fā)送請(qǐng)求到后端
4. 后端驗(yàn)證用戶信息
5. 如果驗(yàn)證成功,生成 token 返回
6. 如果失敗,返回錯(cuò)誤信息
7. 前端根據(jù)結(jié)果跳轉(zhuǎn)頁(yè)面或顯示錯(cuò)誤

放到 Cursor 等 AI 工具中執(zhí)行:

AI 會(huì)生成這樣的代碼:

flowchart TD
  A[用戶輸入賬號(hào)密碼] --> B{前端格式校驗(yàn)}
  B -->|格式正確| C[發(fā)送登錄請(qǐng)求到后端]
  B -->|格式錯(cuò)誤| D[顯示格式錯(cuò)誤提示]
  C --> E{后端驗(yàn)證用戶信息}
  E -->|驗(yàn)證成功| F[生成Token]
  F --> G[返回Token給前端]
  G --> H[前端保存Token]
  H --> I[跳轉(zhuǎn)到主頁(yè)]
  E -->|驗(yàn)證失敗| J[返回錯(cuò)誤信息]
  J --> K[前端顯示錯(cuò)誤提示]
  D --> A
  K --> A

然后你就可以把代碼復(fù)制到 Mermaid 渲染工具中,比如寫作工具語(yǔ)雀支持添加文本繪圖組件:

然后就會(huì)出現(xiàn)一個(gè)繪圖框,在左側(cè)粘貼文本代碼,右側(cè)選擇對(duì)應(yīng)的繪圖語(yǔ)言,就能看到效果了:

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

有很多支持 Mermaid 渲染的網(wǎng)站,還可以導(dǎo)出為 PNG 等格式的圖片:

此外,現(xiàn)在很多 AI 聊天助手內(nèi)置了 Mermaid 渲染工具,能直接看到效果并下載:

如果你對(duì) AI 生成的效果不滿意,只需手動(dòng)修改文本即可,會(huì)自動(dòng)重新渲染圖片。

Mermaid 還支持多種圖表類型,比如時(shí)序圖:

請(qǐng)用 Mermaid 畫一個(gè)訂單支付的時(shí)序圖,展示用戶、前端、后端、支付網(wǎng)關(guān)之間的交互

AI 生成的效果如圖:

Mermaid 還能畫甘特圖、餅圖、Git 分支圖等,這里再讓 AI 生成一個(gè)架構(gòu)圖:

請(qǐng)用 Mermaid 畫一個(gè)簡(jiǎn)單的微服務(wù)架構(gòu)圖

AI 生成的效果如圖:

 

2、PlantUML - 專業(yè)的 UML 繪圖工具

PlantUML 是另一個(gè)強(qiáng)大的文本繪圖工具,特別擅長(zhǎng)繪制 UML 圖、時(shí)序圖和系統(tǒng)架構(gòu)圖。它的語(yǔ)法相對(duì) Mermaid 更加專業(yè)和規(guī)范,生成的圖表也更加精美。

讓我們用 AI + PlantUML 畫一個(gè)經(jīng)典的訂單系統(tǒng)類圖,給 AI 的提示詞如下:

請(qǐng)用 PlantUML 語(yǔ)法幫我畫一個(gè)訂單系統(tǒng)的類圖,包含:
- Order 類:訂單ID、用戶ID、總金額、狀態(tài)、創(chuàng)建時(shí)間
- OrderItem 類:商品ID、數(shù)量、單價(jià)
- User 類:用戶ID、用戶名、郵箱
- Product 類:商品ID、名稱、價(jià)格、庫(kù)存
展示它們之間的關(guān)聯(lián)關(guān)系

AI 會(huì)生成專業(yè)的 PlantUML 代碼,同樣放到語(yǔ)雀的文本繪圖、或者 PlantUML 渲染網(wǎng)站 中,都可以看到效果:

PlantUML 還特別適合畫復(fù)雜的時(shí)序圖和系統(tǒng)架構(gòu)圖。比如一個(gè)完整的登錄時(shí)序圖:

 

其他文本繪圖工具

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

特性MermaidPlantUMLFlowchartGraphviz
圖表類型流程圖、時(shí)序圖、甘特圖等UML全系列、架構(gòu)圖流程圖各類圖表,極其靈活
語(yǔ)法難度簡(jiǎn)單直觀中等,UML規(guī)范非常簡(jiǎn)單較復(fù)雜
生態(tài)支持GitHub/GitLab原生支持需要插件支持一般廣泛支持
定制能力中等極高
適用場(chǎng)景日常文檔配圖專業(yè)架構(gòu)設(shè)計(jì)簡(jiǎn)單流程說明復(fù)雜網(wǎng)絡(luò)拓?fù)?/span>
學(xué)習(xí)成本極低

我的建議是,日常使用選 Mermaid,因?yàn)樗Z(yǔ)法簡(jiǎn)單、平臺(tái)支持好;如果要畫專業(yè)的 UML 圖,就選 PlantUML。如果想生成復(fù)雜的網(wǎng)絡(luò)拓?fù)鋱D,可以選擇 Graphviz,支持更復(fù)雜的定制能力。

比如魚皮給自己的野魚網(wǎng)吧生成了一份網(wǎng)絡(luò)拓?fù)鋱D:

 

二、網(wǎng)頁(yè)繪圖

網(wǎng)頁(yè)繪圖是一種非常自由靈活的繪圖方式。本質(zhì)上是 “圖片即網(wǎng)站” —— 通過生成包含可視化元素的網(wǎng)頁(yè)代碼,在瀏覽器中渲染出各種圖片,而且可以實(shí)現(xiàn)靜態(tài)圖片無法做到的交互效果和動(dòng)畫展示。

1、原生網(wǎng)頁(yè)繪圖

利用網(wǎng)站開發(fā)的核心技術(shù)(HTML + CSS + JavaScript),我們可以生成各種類型的圖表。這種方式雖然不是傳統(tǒng)意義上的繪圖,但效果可能會(huì)超出預(yù)期。還可以借助各種第三方可視化庫(kù)(如 ECharts、D3.js 等)來增強(qiáng)效果。

舉個(gè)例子,當(dāng)需要展示數(shù)據(jù)時(shí),AI 可以利用 Apache ECharts 等可視化庫(kù)生成專業(yè)的數(shù)據(jù)大屏。給 AI 的提示詞如下:

請(qǐng)生成一個(gè)數(shù)據(jù)可視化大屏頁(yè)面,展示電商平臺(tái)的實(shí)時(shí)數(shù)據(jù):
1. 頁(yè)面布局:深色背景的大屏風(fēng)格,分為頭部標(biāo)題和多個(gè)數(shù)據(jù)展示區(qū)域
2. 包含以下圖表:
  - 實(shí)時(shí)銷售額(動(dòng)態(tài)數(shù)字翻牌效果)
  - 各品類銷售占比(餅圖)
  - 24小時(shí)銷售趨勢(shì)(折線圖)
  - 熱銷商品TOP10(柱狀圖)
  - 用戶地域分布(中國(guó)地圖熱力圖)
3. 使用 ECharts 實(shí)現(xiàn),要有動(dòng)畫效果
4. 響應(yīng)式布局,適配不同屏幕

AI 會(huì)生成完整的網(wǎng)站,包含各種圖表,還是挺炫酷的吧~

你可以直接按需截圖,得到圖片;還可以通過 Codepen 等網(wǎng)站運(yùn)行工具將生成的網(wǎng)站快速分享給其他人。

同理,AI 還能快速生成產(chǎn)品原型圖,特別適合快速驗(yàn)證想法。給 AI 的提示詞如下:

你是一位專業(yè)的 UI 設(shè)計(jì)師,請(qǐng)生成一個(gè)移動(dòng)端電商APP的完整原型圖,要求:
1. 使用 HTML+CSS 實(shí)現(xiàn),風(fēng)格簡(jiǎn)潔現(xiàn)代
2. 在同一個(gè) HTML 頁(yè)面中生成所有的原型頁(yè)面,平鋪排列
3. 生成的原型圖是可以直接提供給前端程序員進(jìn)行開發(fā)的
4. 當(dāng)你需要圖片資源時(shí),優(yōu)先使用 SVG 格式的圖片

查看 AI 生成的原型圖效果,我著實(shí)替 UI 設(shè)計(jì)師朋友們也捏了一把汗。。。

 

2、SVG 矢量圖繪制

SVG 是可縮放的矢量圖形,SVG 圖像可以無限縮放而不失真,非常適合繪制 UI 素材、Logo 圖標(biāo)、圖形插畫、技術(shù)架構(gòu)圖、流程圖等需要無損縮放的圖片。

SVG 文件本質(zhì)上是 XML 格式的文本代碼,可以直接嵌入網(wǎng)頁(yè)或?qū)敫鞣N設(shè)計(jì)工具。

讓我們用 SVG 繪制一個(gè)系統(tǒng)架構(gòu)圖,給 AI 的提示詞如下:

請(qǐng)生成一個(gè) SVG 格式的系統(tǒng)架構(gòu)圖,展示一個(gè)典型的三層架構(gòu):
- 展示層:Web 前端、移動(dòng)端 App
- 業(yè)務(wù)層:API 服務(wù)器集群(3個(gè)節(jié)點(diǎn))
- 數(shù)據(jù)層:主從數(shù)據(jù)庫(kù)、Redis 緩存
要求:
- 使用不同顏色區(qū)分各層
- 添加連接線表示數(shù)據(jù)流向
- 圖形美觀,配色專業(yè)

AI 生成的 SVG 代碼可以直接嵌入網(wǎng)頁(yè)或?qū)朐O(shè)計(jì)工具,也可以保存為 SVG 文件直接雙擊在瀏覽器內(nèi)打開。效果還不錯(cuò)吧~

使用 SVG 的另一個(gè)優(yōu)點(diǎn)是可以精確控制每個(gè)元素的位置、大小和樣式,甚至能添加動(dòng)畫效果,讓圖片更加生動(dòng)。

 

3、Canvas 動(dòng)態(tài)繪圖

Canvas 是 HTML5 提供的一個(gè)畫布元素,通過 JavaScript 可以在上面繪制各種圖形。與 SVG 不同,Canvas 是基于像素的,而且性能優(yōu)秀,適合創(chuàng)建需要精確控制元素細(xì)節(jié)、動(dòng)畫效果豐富的畫面,很多游戲也是基于 Canvas 實(shí)現(xiàn)的。

讓我們利用 AI + Canvas 繪制一個(gè)海報(bào)頁(yè)面,給 AI 的提示詞如下:

請(qǐng)用 HTML5 Canvas 創(chuàng)建一個(gè)商務(wù)風(fēng)格的宣傳海報(bào):
- 主題:企業(yè)網(wǎng)絡(luò)解決方案
- 布局:上下分層設(shè)計(jì),上部分為圖形區(qū)域,下部分為文字區(qū)域
- 核心圖形:5個(gè)立體感服務(wù)器圖標(biāo),用優(yōu)雅的曲線連接
- 配色:藍(lán)白配色方案,體現(xiàn)專業(yè)感
- 文字內(nèi)容:公司 Logo、產(chǎn)品名稱、核心賣點(diǎn)
- 視覺效果:微妙的陰影和高光,提升質(zhì)感
- 輸出格式:可打印的高分辨率海報(bào)

生成的效果如圖,我感覺還不錯(cuò),而且還順便生成了下載海報(bào)圖片的按鈕:

再來繪制一個(gè)高大上的網(wǎng)絡(luò)性能監(jiān)控儀表板,給 AI 的提示詞如下:

請(qǐng)用 HTML5 Canvas 創(chuàng)建一個(gè)網(wǎng)絡(luò)性能監(jiān)控儀表板:
- 設(shè)計(jì)元素:
* 中央放置主要的網(wǎng)絡(luò)拓?fù)鋱D
* 周圍添加各種圖表和數(shù)據(jù)指標(biāo)
* 實(shí)時(shí)數(shù)據(jù)流動(dòng)效果
* 狀態(tài)指示燈和進(jìn)度條
- 配色:深色主題配亮色高亮
- 文字:等寬字體,模擬代碼風(fēng)格
- 細(xì)節(jié):添加網(wǎng)格背景和掃描線效果

生成的效果很炫酷,非常適合拿來做技術(shù)演示(PPT):

 

三、思維導(dǎo)圖

AI 可以幫我們快速生成精美的思維導(dǎo)圖,并且能夠?qū)С鰹閷I(yè)思維導(dǎo)圖軟件支持的格式,便于我們?cè)趯W(xué)習(xí)和工作中梳理知識(shí)。

我用的比較多的思維導(dǎo)圖軟件是 XMind,支持豐富的樣式和主題。

可以通過 AI 直接生成 XMind 格式的思維導(dǎo)圖代碼,提示詞如下:

請(qǐng)幫我生成一個(gè)關(guān)于"微服務(wù)架構(gòu)設(shè)計(jì)"的思維導(dǎo)圖,要求生成可以導(dǎo)入 XMind 軟件的格式。
注意,XMind 文件實(shí)際上是一個(gè) ZIP 壓縮包,需要包含多個(gè)必要的文件。

導(dǎo)圖內(nèi)容包含以下要點(diǎn):
1. 服務(wù)拆分原則
  - 單一職責(zé)
  - 服務(wù)自治
  - 接口明確
2. 通信機(jī)制
  - 同步通信(REST、gRPC)
  - 異步通信(消息隊(duì)列)
3. 服務(wù)治理
  - 服務(wù)注冊(cè)與發(fā)現(xiàn)
  - 負(fù)載均衡
  - 熔斷降級(jí)

生成的效果還不錯(cuò),還可以在軟件中進(jìn)一步美化思維導(dǎo)圖的樣式,圖片太長(zhǎng)了就給大家看一部分吧~

不過我更建議讓 AI 生成 Markdown 格式的思維導(dǎo)圖,因?yàn)?Markdown 格式更通用,方便在各種文檔工具中使用。給 AI 提供下面這段提示詞:

請(qǐng)將上述微服務(wù)架構(gòu)內(nèi)容整理成 Markdown 格式的思維導(dǎo)圖,使用縮進(jìn)表示層級(jí)關(guān)系

AI 會(huì)生成這樣的 Markdown 格式:

微服務(wù)架構(gòu)設(shè)計(jì)

## 服務(wù)拆分原則
單一職責(zé)
 每個(gè)服務(wù)只負(fù)責(zé)一個(gè)業(yè)務(wù)功能
 高內(nèi)聚低耦合
服務(wù)自治
 獨(dú)立部署
 獨(dú)立技術(shù)選型
 獨(dú)立數(shù)據(jù)存儲(chǔ)

將這個(gè) Markdown 文件直接導(dǎo)入 XMind,就能生成結(jié)構(gòu)清晰的思維導(dǎo)圖啦!

 

四、專業(yè)繪圖工具

如果將 AI 與專業(yè)繪圖工具結(jié)合,可以實(shí)現(xiàn) 1+1 > 2 的效果。

我用的比較多的繪圖工具是免費(fèi)開源的 draw.io,它的優(yōu)點(diǎn)是 自由度極高,支持導(dǎo)入導(dǎo)出多種格式,擁有豐富的圖形庫(kù)和模板。當(dāng)需要繪制復(fù)雜圖片時(shí),先讓 AI 生成 draw.io 格式的 XML 代碼,然后導(dǎo)入到 draw.io 中進(jìn)行二次編輯,能夠大幅提升作圖效率。

舉個(gè)例子,讓 AI 為魚皮在 編程導(dǎo)航 原創(chuàng)的十幾套項(xiàng)目教程生成一個(gè)學(xué)習(xí)路線圖:

請(qǐng)根據(jù)下列內(nèi)容,生成 draw.io 格式的《編程導(dǎo)航原創(chuàng)項(xiàng)目學(xué)習(xí)路線圖》代碼:

## 以下是項(xiàng)目學(xué)習(xí)相關(guān)內(nèi)容
...
...

然后直接復(fù)制 AI 生成的 XML 代碼:

并粘貼到 draw.io 中,就得到了下面這張圖,效果還挺不錯(cuò)的吧!

然后你可以將繪圖導(dǎo)出為各種主流圖片格式,甚至是 PDF 文檔和 HTML 網(wǎng)頁(yè):

再來畫一個(gè)復(fù)雜的架構(gòu)圖吧。讓 AI 根據(jù)我的《億級(jí)流量點(diǎn)贊系統(tǒng)項(xiàng)目教程》生成對(duì)應(yīng)的架構(gòu)圖,提示詞如下:

請(qǐng)根據(jù)下列內(nèi)容,生成 draw.io 格式的《億級(jí)流量點(diǎn)贊系統(tǒng)的架構(gòu)圖》代碼:

## 以下是項(xiàng)目教程相關(guān)內(nèi)容
...
...

AI 生成的繪圖如下:

是不是挺震撼的?如果人工來畫這張圖,半條命估計(jì)就下去了。

不過我們會(huì)發(fā)現(xiàn),AI 有時(shí)候生成的圖片元素會(huì)出現(xiàn)排版錯(cuò)亂、位置對(duì)不齊的情況。這時(shí)就需要人工進(jìn)行調(diào)整了,有時(shí)要改的內(nèi)容還挺多的,沒點(diǎn)兒畫圖功底還真駕馭不了 AI。

所以雖然 AI + draw.io 這種畫圖方法看起來最強(qiáng)大,實(shí)際上還是建議大家根據(jù)作圖的類型和復(fù)雜度,選擇最合適的方法吧。

 

五、Emoji 繪圖

還有一些適合整活兒的創(chuàng)意畫圖方法,比如利用 Emoji 表情來繪制簡(jiǎn)單的圖。

舉個(gè)例子,使用下面這段提示詞:

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

提供的內(nèi)容如下:
開發(fā) -> 測(cè)試 -> 部署 -> 監(jiān)控,循環(huán)往復(fù)

AI 會(huì)生成類似這樣的效果:

?? 軟件開發(fā)生命周期流程圖 ??

  ????? 開發(fā)階段
        ??
  ?? 測(cè)試階段  
        ??
  ?? 部署階段
        ??
  ?? 監(jiān)控階段
        ??
        ??
  (循環(huán)往復(fù))

或者這樣 ??,這是不是有點(diǎn)太抽象了???

?? DevOps 循環(huán)

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

還可以用 Emoji 畫更復(fù)雜的圖,比如微服務(wù)架構(gòu):

利用 Emoji 幫我生成純文本格式的微服務(wù)架構(gòu)圖,要求生動(dòng)有趣,盡可能多地將文本替換為 Emoji 表示。

AI 會(huì)生成這樣的效果,抽象,太抽象了!

?? 微服務(wù)架構(gòu)全景圖 ???

                  ?? 用戶
                    ??
                ?? API 網(wǎng)關(guān) ???
                    ??
      ┌─────────────┼─────────────┐
      ??           ??           ??
  ?? 訂單服務(wù)   ?? 用戶服務(wù)   ?? 支付服務(wù)
      ??           ??           ??
  ??? 訂單DB     ??? 用戶DB     ??? 支付DB

同理,大家還可以嘗試下字符畫繪圖,大膽發(fā)揮創(chuàng)意盡情探索、盡情壓榨 AI 吧~

 

AI 繪圖技巧

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

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

當(dāng)你看到一個(gè)很棒的圖,想要繪制同款時(shí),可以直接截圖給 AI,讓它幫你生成類似的圖。

舉個(gè)例子,仿照我提供的系統(tǒng)架構(gòu)圖進(jìn)行生成,這種場(chǎng)景適合使用 draw.io 工具。示例 Prompt 如下:

請(qǐng)根據(jù)我提供的系統(tǒng)架構(gòu)圖,用 draw.io 格式生成類似風(fēng)格和結(jié)構(gòu)的圖,但內(nèi)容改為:
- 一個(gè)在線教育平臺(tái)的架構(gòu)
- 保持原圖的配色方案和布局風(fēng)格
- 包含用戶端、管理端、API 網(wǎng)關(guān)、核心服務(wù)、數(shù)據(jù)存儲(chǔ)等模塊

在 Cursor 中執(zhí)行:

生成結(jié)果如圖,是不是很像?

 

技巧 2、截圖標(biāo)注,精準(zhǔn)修改

如果你對(duì) AI 生成的圖的有些地方不滿意,你可以截圖并在需要修改的地方畫紅圈標(biāo)注,然后告訴 AI 如何修改,從而實(shí)現(xiàn)精準(zhǔn)修改。

舉個(gè)例子,先對(duì)生成的架構(gòu)圖進(jìn)行標(biāo)注,利用截圖工具就可以完成了:

然后將標(biāo)注過的圖片和下列 Prompt 一起發(fā)送給 AI:

我在圖片上用紅圈標(biāo)注了幾個(gè)地方,請(qǐng)幫我進(jìn)行修改。
其他部分保持不變,并輸出新的 draw.io 格式的圖片:
1. 第一個(gè)紅圈:字體換行了,導(dǎo)致內(nèi)容顯示不全
2. 第二個(gè)紅圈:2 個(gè)斜箭頭不是特別好看
3. 第三個(gè)紅圈:字體換行了,應(yīng)該在同一行顯示

生成結(jié)果如圖:

可以發(fā)現(xiàn)大多數(shù)問題都已經(jīng)修復(fù)了,但缺點(diǎn)是 AI 會(huì)重新生成一遍圖片,每次都要等一段時(shí)間。運(yùn)氣不好的話要浪費(fèi)好多時(shí)間在和 AI 斗智斗勇上。。。

技巧 3:配置專業(yè)的系統(tǒng)預(yù)設(shè)

AI 生成的效果很大程度上取決于輸入的提示詞,所以要讓 AI 畫出更專業(yè)的圖,配置一個(gè)好的系統(tǒng)提示詞至關(guān)重要。在 Cursor 中,我們可以設(shè)置項(xiàng)目級(jí)別的 Rules 規(guī)則,讓 AI 始終遵循你的繪圖規(guī)范。

給大家一個(gè)專業(yè)的架構(gòu)圖繪制預(yù)設(shè),僅供參考:

# 技術(shù)架構(gòu)圖繪制專家

你是一名資深的系統(tǒng)架構(gòu)師和技術(shù)圖表設(shè)計(jì)專家,精通各種技術(shù)棧和繪圖工具。

## 繪圖原則
1. 所有文字必須使用簡(jiǎn)體中文
2. 保持圖表簡(jiǎn)潔清晰,避免過度復(fù)雜
3. 使用標(biāo)準(zhǔn)的技術(shù)圖標(biāo)和符號(hào)
4. 配色專業(yè),一般使用藍(lán)、綠、橙等技術(shù)感色彩
5. 層次分明,主次關(guān)系清晰

## 技術(shù)規(guī)范
1. 架構(gòu)圖分層清晰:展示層、網(wǎng)關(guān)層、服務(wù)層、數(shù)據(jù)層
2. 使用虛線表示異步調(diào)用,實(shí)線表示同步調(diào)用
3. 標(biāo)注關(guān)鍵技術(shù)棧和中間件
4. 添加必要的文字說明,但不要過多
5. 考慮高可用、負(fù)載均衡等架構(gòu)要素

## 輸出要求
1. 根據(jù)圖表類型和復(fù)雜度選擇 Mermaid、PlantUML 或 draw.io 語(yǔ)法
2. 如果是復(fù)雜架構(gòu),分模塊逐步展示

## 配色方案
- 展示層:藍(lán)色系 (#3498db)
- 業(yè)務(wù)層:綠色系 (#2ecc71)
- 數(shù)據(jù)層:橙色系 (#e67e22)
- 中間件:紫色系 (#9b59b6)
- 錯(cuò)誤/警告:紅色系 (#e74c3c)

進(jìn)入 Cursor 的 Rules 設(shè)置界面,添加一個(gè)規(guī)則:

將這個(gè)預(yù)設(shè)配置到規(guī)則中,可以設(shè)置為每次對(duì)話都生效,也可以人工按需使用,我這里設(shè)置為人工按需使用:

在 AI 對(duì)話時(shí)指定 Cursor Rules,AI 就會(huì)按照規(guī)則來生成圖片,確保輸出的一致性和專業(yè)性:

生成效果如圖,是不是有內(nèi)味兒了~

 

技巧 4、組合生成

有時(shí)你也不知道哪種方法作圖效果最好,干脆就同時(shí)生成多種不同的繪圖代碼,再?gòu)闹刑暨x。

示例提示詞如下:

請(qǐng)幫我繪制一個(gè)用戶登錄流程圖,要求同時(shí)生成下列格式的代碼:
1. Mermaid
2. PlantUML
3. draw.io

但是這個(gè)技巧大家了解一下就好了,實(shí)際使用時(shí)生成速度會(huì)慢很多,成本會(huì)比較大。

 

結(jié)尾

看到這里,相信你已經(jīng)掌握了 AI 畫圖的各種姿勢(shì)了!從簡(jiǎn)單的文本繪圖到復(fù)雜的動(dòng)態(tài)圖表,AI 都能輕松搞定。不僅能幫我們節(jié)省大量時(shí)間,而且媽媽再也不用擔(dān)心我的圖畫得丑了!

?轉(zhuǎn)自https://www.cnblogs.com/yupi/p/18904399


該文章在 2025/6/4 8:59:51 編輯過
關(guān)鍵字查詢
相關(guān)文章
正在查詢...
點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。
點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理,結(jié)合碼頭的業(yè)務(wù)特點(diǎn),圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體,是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。
點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。
點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi),不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。
Copyright 2010-2025 ClickSun All Rights Reserved