还有人手动画图?一键生成 Draw.io 流程图，3分钟交作业爽炸!
Draw.io 这个绘图软件应该是最多人推荐的，号称为 Visio 的完美平替！
Draw.io，现更名为 diagrams.net，是一款开源且免费的在线绘图工具， 支持 UML、流程图、架构图，模板多到用不完，离线也能用，导出格式全（PNG/SVG/PDF）。
Draw.io 的界面简单直观，功能强大，适合个人用户、开发者、设计师、项目经理等使用。
Draw.io 可以在线访问，也可以通过桌面应用离线使用。
在线地址：https://app.diagrams.net/
以前我们还经常是自己手动来绘制，现在很多 AI 工具出来了，只要我们提供合适的提示词让 AI 帮我们生成 Mermaid.js 的代码，然后我们打开 Draw.io，选择过菜单栏上的 “调整图形-->插入--> Memaid” ：
在输入框放入 AI 生成的 Mermaid.js 代码，点击插入按钮就完成了：
接下来我们来看几个例子：
1、流程图（Flowchart）
提示词：
用 mermaid 画一个从用户登录到显示首页的完整流程图
效果： 会生成一个包含“输入账号密码 → 验证身份 → 进入首页”等步骤的流程图代码。
graph TD
A[用户打开登录页面] --> B[输入账号和密码]
B --> C{验证账号}
C -- 成功 --> D[跳转到首页]
C -- 失败 --> E[提示错误信息]
E --> B效果如下：
2、 决策树（Decision Tree）
提示词：
用 mermaid 画一个用户选择购买产品时的决策树
效果： 展示用户如何从“查看产品”到“加入购物车”或“放弃购买”的路径。
graph TD
A[浏览商品] --> B{喜欢这个商品吗？}
B -- 是 --> C{价格合适吗？}
C -- 是 --> D[加入购物车]
C -- 否 --> E[等待促销]
B -- 否 --> F[继续浏览其他商品]3、组织结构图（Org Chart）
提示词：
用 mermaid 画一个技术部门的组织架构图，包括前端、后端、测试等角色
效果： 会生成一个从 CTO 开始，往下分支的结构图。
4、状态图（State Diagram）
提示词：
用 mermaid 画一个订单状态变化图，包括待付款、已发货、已签收、取消等状态
stateDiagram-v2
[*] --> 下单
下单 --> 待付款
待付款 --> 已付款
已付款 --> 已发货
已发货 --> 已签收
待付款 --> 已取消
已付款 --> 已取消5、类图（Class Diagram）
提示词：
用 mermaid 画一个简单的类图，包括用户类、订单类、商品类之间的关系
classDiagram
class 用户 {
+String 用户名
+String 密码
+登录()
}
class 订单 {
+String 订单号
+下单时间
+生成订单()
}
class 商品 {
+String 名称
+Double 价格
+查看详情()
}
用户 --> 订单 : 下单
订单 --> 商品 : 包含如果平时有用 VS Code，我们也可以直接装在编辑器里头使用他们的扩展 Draw.io Integration。
Draw.io Integration 扩展是一个将 Draw.io 图表工具集成到 Visual Studio Code 编辑器中的扩展。
扩展搜索关键词：Draw.io
插件链接地址：
https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio
该插件使用起来也很简单，插件一个后缀名为 .drawio.png 文件就可以开始编辑了，如下图所示：
