1 分鐘生成架構(gòu)圖?程序員 AI 繪圖保姆級(jí)教程
當(dāng)前位置:點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
在開始之前,我們先了解一下 AI 畫圖的本質(zhì):其實(shí)就是讓 AI 生成各種繪圖工具能夠理解的文本代碼,然后將這些代碼導(dǎo)入到對(duì)應(yīng)的工具中進(jìn)行渲染。這樣就能夠借助 AI 的創(chuàng)意和工具的能力自由地生成圖片。 下面來介紹幾類 AI 畫圖方法: 一、文本繪圖文本繪圖是最受高級(jí)程序員歡迎的畫圖方式,通過簡單的文本描述就能生成專業(yè)的技術(shù)圖。主流的文本繪圖語言包括 Mermaid 和 PlantUML,它們各有特色,適用于不同的場(chǎng)景。 1、Mermaid - 最流行的文本繪圖工具Mermaid 是目前最流行的文本繪圖工具,語法簡單直觀,被 GitHub、語雀等大平臺(tái)原生支持。無論你是要畫軟件架構(gòu)圖、業(yè)務(wù)流程圖,還是數(shù)據(jù)庫 ER 圖、Git 分支圖,Mermaid 都能輕松搞定。 讓我們先來畫一個(gè)用戶登錄流程圖,只需要給 AI 這樣的提示詞: 請(qǐng)用 Mermaid 語法幫我畫一個(gè)用戶登錄流程圖,包含以下步驟: 放到 Cursor 等 AI 工具中執(zhí)行: AI 會(huì)生成這樣的代碼: flowchart TD 然后你就可以把代碼復(fù)制到 Mermaid 渲染工具中,比如寫作工具語雀支持添加文本繪圖組件: 然后就會(huì)出現(xiàn)一個(gè)繪圖框,在左側(cè)粘貼文本代碼,右側(cè)選擇對(duì)應(yīng)的繪圖語言,就能看到效果了: 很多 Markdown 編輯器也天然支持 Mermaid 繪圖的渲染,比如 Typora: 有很多支持 此外,現(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è)簡單的微服務(wù)架構(gòu)圖 AI 生成的效果如圖:
2、PlantUML - 專業(yè)的 UML 繪圖工具PlantUML 是另一個(gè)強(qiáng)大的文本繪圖工具,特別擅長繪制 UML 圖、時(shí)序圖和系統(tǒng)架構(gòu)圖。它的語法相對(duì) Mermaid 更加專業(yè)和規(guī)范,生成的圖表也更加精美。 讓我們用 AI + PlantUML 畫一個(gè)經(jīng)典的訂單系統(tǒng)類圖,給 AI 的提示詞如下: 請(qǐng)用 PlantUML 語法幫我畫一個(gè)訂單系統(tǒng)的類圖,包含: AI 會(huì)生成專業(yè)的 PlantUML 代碼,同樣放到語雀的文本繪圖、或者 PlantUML 還特別適合畫復(fù)雜的時(shí)序圖和系統(tǒng)架構(gòu)圖。比如一個(gè)完整的登錄時(shí)序圖:
其他文本繪圖工具除了 Mermaid 和 PlantUML,還有 Flowchart 和 Graphviz 等文本繪圖工具。為了幫大家更好地選擇,我整理了這四種工具的對(duì)比:
我的建議是,日常使用選 Mermaid,因?yàn)樗Z法簡單、平臺(tái)支持好;如果要畫專業(yè)的 UML 圖,就選 PlantUML。如果想生成復(fù)雜的網(wǎng)絡(luò)拓?fù)鋱D,可以選擇 Graphviz,支持更復(fù)雜的定制能力。 比如魚皮給自己的野魚網(wǎng)吧生成了一份網(wǎng)絡(luò)拓?fù)鋱D:
二、網(wǎng)頁繪圖網(wǎng)頁繪圖是一種非常自由靈活的繪圖方式。本質(zhì)上是 “圖片即網(wǎng)站” —— 通過生成包含可視化元素的網(wǎng)頁代碼,在瀏覽器中渲染出各種圖片,而且可以實(shí)現(xiàn)靜態(tài)圖片無法做到的交互效果和動(dòng)畫展示。 1、原生網(wǎng)頁繪圖利用網(wǎng)站開發(fā)的核心技術(shù)(HTML + CSS + JavaScript),我們可以生成各種類型的圖表。這種方式雖然不是傳統(tǒng)意義上的繪圖,但效果可能會(huì)超出預(yù)期。還可以借助各種第三方可視化庫(如 ECharts、D3.js 等)來增強(qiáng)效果。 舉個(gè)例子,當(dāng)需要展示數(shù)據(jù)時(shí),AI 可以利用 Apache ECharts 等可視化庫生成專業(yè)的數(shù)據(jù)大屏。給 AI 的提示詞如下: 請(qǐng)生成一個(gè)數(shù)據(jù)可視化大屏頁面,展示電商平臺(tái)的實(shí)時(shí)數(shù)據(jù): AI 會(huì)生成完整的網(wǎng)站,包含各種圖表,還是挺炫酷的吧~ 你可以直接按需截圖,得到圖片;還可以通過 同理,AI 還能快速生成產(chǎn)品原型圖,特別適合快速驗(yàn)證想法。給 AI 的提示詞如下: 你是一位專業(yè)的 UI 設(shè)計(jì)師,請(qǐng)生成一個(gè)移動(dòng)端電商APP的完整原型圖,要求: 查看 AI 生成的原型圖效果,我著實(shí)替 UI 設(shè)計(jì)師朋友們也捏了一把汗。。。
2、SVG 矢量圖繪制SVG 是可縮放的矢量圖形,SVG 圖像可以無限縮放而不失真,非常適合繪制 UI 素材、Logo 圖標(biāo)、圖形插畫、技術(shù)架構(gòu)圖、流程圖等需要無損縮放的圖片。 SVG 文件本質(zhì)上是 XML 格式的文本代碼,可以直接嵌入網(wǎng)頁或?qū)敫鞣N設(shè)計(jì)工具。 讓我們用 SVG 繪制一個(gè)系統(tǒng)架構(gòu)圖,給 AI 的提示詞如下: 請(qǐng)生成一個(gè) SVG 格式的系統(tǒng)架構(gòu)圖,展示一個(gè)典型的三層架構(gòu): AI 生成的 SVG 代碼可以直接嵌入網(wǎng)頁或?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)頁面,給 AI 的提示詞如下: 請(qǐng)用 HTML5 Canvas 創(chuàng)建一個(gè)商務(wù)風(fēng)格的宣傳海報(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ù)演示(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 軟件的格式。 生成的效果還不錯(cuò),還可以在軟件中進(jìn)一步美化思維導(dǎo)圖的樣式,圖片太長了就給大家看一部分吧~ 不過我更建議讓 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ì) 將這個(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)出多種格式,擁有豐富的圖形庫和模板。當(dāng)需要繪制復(fù)雜圖片時(shí),先讓 AI 生成 draw.io 格式的 XML 代碼,然后導(dǎo)入到 draw.io 中進(jìn)行二次編輯,能夠大幅提升作圖效率。 舉個(gè)例子,讓 AI 為魚皮在 請(qǐng)根據(jù)下列內(nèi)容,生成 draw.io 格式的《編程導(dǎo)航原創(chuàng)項(xiàng)目學(xué)習(xí)路線圖》代碼: 然后直接復(fù)制 AI 生成的 XML 代碼: 并粘貼到 draw.io 中,就得到了下面這張圖,效果還挺不錯(cuò)的吧! 然后你可以將繪圖導(dǎo)出為各種主流圖片格式,甚至是 PDF 文檔和 HTML 網(wǎng)頁: 再來畫一個(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)圖》代碼: 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 表情來繪制簡單的圖。 舉個(gè)例子,使用下面這段提示詞: 利用 Emoji 幫我生成純文本格式的流程圖,要求生動(dòng)有趣,盡可能多地將文本替換為 Emoji 表示。 AI 會(huì)生成類似這樣的效果: ?? 軟件開發(fā)生命周期流程圖 ?? 或者這樣 ??,這是不是有點(diǎn)太抽象了??? ?? DevOps 循環(huán) 還可以用 Emoji 畫更復(fù)雜的圖,比如微服務(wù)架構(gòu): 利用 Emoji 幫我生成純文本格式的微服務(wù)架構(gòu)圖,要求生動(dòng)有趣,盡可能多地將文本替換為 Emoji 表示。 AI 會(huì)生成這樣的效果,抽象,太抽象了! ?? 微服務(wù)架構(gòu)全景圖 ??? 同理,大家還可以嘗試下字符畫繪圖,大膽發(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)容改為: 在 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)行修改。 生成結(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)圖繪制專家 進(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í)生成多種不同的繪圖代碼,再從中挑選。 示例提示詞如下: 請(qǐng)幫我繪制一個(gè)用戶登錄流程圖,要求同時(shí)生成下列格式的代碼: 但是這個(gè)技巧大家了解一下就好了,實(shí)際使用時(shí)生成速度會(huì)慢很多,成本會(huì)比較大。
結(jié)尾看到這里,相信你已經(jīng)掌握了 AI 畫圖的各種姿勢(shì)了!從簡單的文本繪圖到復(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)文章
正在查詢... |