仅用于站内搜索，没有排版格式，具体信息请跳转上方微信公众号内链接
大家好，我是鱼皮。作为一名程序员，画图可以说是工作中的家常便饭了。无论是给领导汇报时画架构图、还是写文档时画流程图、或者头脑风暴时画思维导图，画图能力直接体现出我们的专业水平。
以前画图需要自己费时费力，一个复杂的架构图可能要花几个小时，还得反复调整；现在喝杯水的功夫，AI就帮你画好了，而且效果还特别专业！
下面鱼皮将分享5大类AI画图方法，每一种都有详细的保姆级教程，零基础小白也能快速精通AI画图之术。这些方法一个比一个猛，建议先点赞收藏，看到最后你会收获满满！以后无论是生成原型图、设计海报，还是程序员常画的架构图、流程图、UML类图等等，都是洒洒水的事~
⭐️推荐观看视频版，有更详细的操作演示：https ://bilibili. com/video/BV1DP7JzAE7k
虽然目前主流的AI大模型和工具都能实现画图功能，但我强烈建议使用Cursor工具搭配Claude4大模型，效果最佳。
在开始之前，我们先了解一下AI画图的本质：其实就是让AI生成各种绘图工具能够理解的文本代码，然后将这些代码导入到对应的工具中进行渲染。这样就能够借助AI的创意和工具的能力自由地生成图片。
下面来介绍几类AI画图方法：
文本绘图是最受高级程序员欢迎的画图方式，通过简单的文本描述就能生成专业的技术图。主流的文本绘图语言包括Mermaid和PlantUML，它们各有特色，适用于不同的场景。
Mermaid是目前最流行的文本绘图工具，语法简单直观，被GitHub、语雀等大平台原生支持。无论你是要画软件架构图、业务流程图，还是数据库ER图、Git分支图，Mermaid都能轻松搞定。
让我们先来画一个用户登录流程图，只需要给AI这样的提示词：
放到Cursor等AI工具中执行：
AI会生成这样的代码：
然后你就可以把代码复制到Mermaid渲染工具中，比如写作工具语雀支持添加文本绘图组件：
然后就会出现一个绘图框，在左侧粘贴文本代码，右侧选择对应的绘图语言，就能看到效果了：
很多Markdown编辑器也天然支持Mermaid绘图的渲染，比如Typora：
有很多支持Mermaid渲染的网站，还可以导出为PNG等格式的图片：
此外，现在很多AI聊天助手内置了Mermaid渲染工具，能直接看到效果并下载：
如果你对AI生成的效果不满意，只需手动修改文本即可，会自动重新渲染图片。
Mermaid还支持多种图表类型，比如时序图：
AI生成的效果如图：
Mermaid还能画甘特图、饼图、Git分支图等，这里再让AI生成一个架构图：
AI生成的效果如图：
PlantUML是另一个强大的文本绘图工具，特别擅长绘制UML图、时序图和系统架构图。它的语法相对Mermaid更加专业和规范，生成的图表也更加精美。
让我们用AI+PlantUML画一个经典的订单系统类图，给AI的提示词如下：
AI会生成专业的PlantUML代码，同样放到语雀的文本绘图、或者PlantUML渲染网站中，都可以看到效果：
PlantUML还特别适合画复杂的时序图和系统架构图。比如一个完整的登录时序图：
除了Mermaid和PlantUML，还有Flowchart和Graphviz等文本绘图工具。为了帮大家更好地选择，我整理了这四种工具的对比：
特性
流程图、时序图、甘特图等
UML全系列、架构图
流程图
各类图表，极其灵活
简单直观
中等，UML规范
非常简单
较复杂
GitHub/GitLab原生支持
需要插件支持
一般
广泛支持
中等
高
低
极高
日常文档配图
专业架构设计
简单流程说明
复杂网络拓扑
低
中
极低
高
我的建议是，日常使用选Mermaid，因为它语法简单、平台支持好；如果要画专业的UML图，就选PlantUML。如果想生成复杂的网络拓扑图，可以选择Graphviz，支持更复杂的定制能力。
比如鱼皮给自己的野鱼网吧生成了一份网络拓扑图：
网页绘图是一种非常自由灵活的绘图方式。本质上是“图片即网站”——通过生成包含可视化元素的网页代码，在浏览器中渲染出各种图片，而且可以实现静态图片无法做到的交互效果和动画展示。
利用网站开发的核心技术（HTML+CSS+JavaScript），我们可以生成各种类型的图表。这种方式虽然不是传统意义上的绘图，但效果可能会超出预期。还可以借助各种第三方可视化库（如ECharts、D3. js等）来增强效果。
举个例子，当需要展示数据时，AI可以利用ApacheECharts等可视化库生成专业的数据大屏。给AI的提示词如下：
AI会生成完整的网站，包含各种图表，还是挺炫酷的吧~
你可以直接按需截图，得到图片；还可以通过Codepen等网站运行工具将生成的网站快速分享给其他人。
同理，AI还能快速生成产品原型图，特别适合快速验证想法。给AI的提示词如下：
查看AI生成的原型图效果，我着实替UI设计师朋友们也捏了一把汗。。。
SVG是可缩放的矢量图形，SVG图像可以无限缩放而不失真，非常适合绘制UI素材、Logo图标、图形插画、技术架构图、流程图等需要无损缩放的图片。
SVG文件本质上是XML格式的文本代码，可以直接嵌入网页或导入各种设计工具。
让我们用SVG绘制一个系统架构图，给AI的提示词如下：
AI生成的SVG代码可以直接嵌入网页或导入设计工具，也可以保存为SVG文件直接双击在浏览器内打开。效果还不错吧~
使用SVG的另一个优点是可以精确控制每个元素的位置、大小和样式，甚至能添加动画效果，让图片更加生动。
Canvas是HTML5提供的一个画布元素，通过JavaScript可以在上面绘制各种图形。与SVG不同，Canvas是基于像素的，而且性能优秀，适合创建需要精确控制元素细节、动画效果丰富的画面，很多游戏也是基于Canvas实现的。
让我们利用AI+Canvas绘制一个海报页面，给AI的提示词如下：
生成的效果如图，我感觉还不错，而且还顺便生成了下载海报图片的按钮：
再来绘制一个高大上的网络性能监控仪表板，给AI的提示词如下：
生成的效果很炫酷，非常适合拿来做技术演示（PPT）：
AI可以帮我们快速生成精美的思维导图，并且能够导出为专业思维导图软件支持的格式，便于我们在学习和工作中梳理知识。
我用的比较多的思维导图软件是XMind，支持丰富的样式和主题。
可以通过AI直接生成XMind格式的思维导图代码，提示词如下：
生成的效果还不错，还可以在软件中进一步美化思维导图的样式，图片太长了就给大家看一部分吧~
不过我更建议让AI生成Markdown格式的思维导图，因为Markdown格式更通用，方便在各种文档工具中使用。给AI提供下面这段提示词：
AI会生成这样的Markdown格式：
将这个Markdown文件直接导入XMind，就能生成结构清晰的思维导图啦！
如果将AI与专业绘图工具结合，可以实现1+1>2的效果。
我用的比较多的绘图工具是免费开源的draw. io，它的优点是自由度极高，支持导入导出多种格式，拥有丰富的图形库和模板。当需要绘制复杂图片时，先让AI生成draw. io格式的XML代码，然后导入到draw. io中进行二次编辑，能够大幅提升作图效率。
举个例子，让AI为鱼皮在编程导航原创的十几套项目教程生成一个学习路线图：
然后直接复制AI生成的XML代码：
并粘贴到draw. io中，就得到了下面这张图，效果还挺不错的吧！
然后你可以将绘图导出为各种主流图片格式，甚至是PDF文档和HTML网页：
再来画一个复杂的架构图吧。让AI根据我的《亿级流量点赞系统项目教程》生成对应的架构图，提示词如下：
AI生成的绘图如下：
是不是挺震撼的？如果人工来画这张图，半条命估计就下去了。
不过我们会发现，AI有时候生成的图片元素会出现排版错乱、位置对不齐的情况。这时就需要人工进行调整了，有时要改的内容还挺多的，没点儿画图功底还真驾驭不了AI。
所以虽然AI+draw. io这种画图方法看起来最强大，实际上还是建议大家根据作图的类型和复杂度，选择最合适的方法吧。
还有一些适合整活儿的创意画图方法，比如利用Emoji表情来绘制简单的图。
举个例子，使用下面这段提示词：
AI会生成类似这样的效果：
或者这样👇，这是不是有点太抽象了？？？
还可以用Emoji画更复杂的图，比如微服务架构：
AI会生成这样的效果，抽象，太抽象了！
同理，大家还可以尝试下字符画绘图，大胆发挥创意尽情探索、尽情压榨AI吧~
掌握了基本的绘图方法后，鱼皮再给大家开个小灶，分享一些高级技巧，帮你更快地画出更好的图。
当你看到一个很棒的图，想要绘制同款时，可以直接截图给AI，让它帮你生成类似的图。
举个例子，仿照我提供的系统架构图进行生成，这种场景适合使用draw. io工具。示例Prompt如下：
在Cursor中执行：
生成结果如图，是不是很像？
如果你对AI生成的图的有些地方不满意，你可以截图并在需要修改的地方画红圈标注，然后告诉AI如何修改，从而实现精准修改。
举个例子，先对生成的架构图进行标注，利用截图工具就可以完成了：
然后将标注过的图片和下列Prompt一起发送给AI：
生成结果如图：
可以发现大多数问题都已经修复了，但缺点是AI会重新生成一遍图片，每次都要等一段时间。运气不好的话要浪费好多时间在和AI斗智斗勇上。。。
AI生成的效果很大程度上取决于输入的提示词，所以要让AI画出更专业的图，配置一个好的系统提示词至关重要。在Cursor中，我们可以设置项目级别的Rules规则，让AI始终遵循你的绘图规范。
给大家一个专业的架构图绘制预设，仅供参考：
进入Cursor的Rules设置界面，添加一个规则：
将这个预设配置到规则中，可以设置为每次对话都生效，也可以人工按需使用，我这里设置为人工按需使用：
在AI对话时指定CursorRules，AI就会按照规则来生成图片，确保输出的一致性和专业性：
生成效果如图，是不是有内味儿了~
有时你也不知道哪种方法作图效果最好，干脆就同时生成多种不同的绘图代码，再从中挑选。
示例提示词如下：
但是这个技巧大家了解一下就好了，实际使用时生成速度会慢很多，成本会比较大。
看到这里，相信你已经掌握了AI画图的各种姿势了！从简单的文本绘图到复杂的动态图表，AI都能轻松搞定。不仅能帮我们节省大量时间，而且妈妈再也不用担心我的图画得丑了！
