温馨提示:本站为童趣票务官方授权演出订票中心,请放心购买。
你现在的位置:首页 > 演出资讯  > 儿童亲子

还有人手动画图?一键生成 Draw.io 流程图,3分钟交作业爽炸!

发布时间:2025-06-09 13:54:54  浏览量: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 代码,点击插入按钮就完成了:

接下来我们来看几个例子:

提示词:

用 mermaid 画一个从用户登录到显示首页的完整流程图

效果: 会生成一个包含“输入账号密码 → 验证身份 → 进入首页”等步骤的流程图代码。

graph TD A[用户打开登录页面] --> B[输入账号和密码] B --> C{验证账号} C -- 成功 --> D[跳转到首页] C -- 失败 --> E[提示错误信息] E --> B

效果如下:

提示词:

用 mermaid 画一个用户选择购买产品时的决策树

效果: 展示用户如何从“查看产品”到“加入购物车”或“放弃购买”的路径。

graph TD A[浏览商品] --> B{喜欢这个商品吗?} B -- 是 --> C{价格合适吗?} C -- 是 --> D[加入购物车] C -- 否 --> E[等待促销] B -- 否 --> F[继续浏览其他商品]

提示词:

用 mermaid 画一个技术部门的组织架构图,包括前端、后端、测试等角色

效果: 会生成一个从 CTO 开始,往下分支的结构图。

提示词:

用 mermaid 画一个订单状态变化图,包括待付款、已发货、已签收、取消等状态

stateDiagram-v2 [*] --> 下单 下单 --> 待付款 待付款 --> 已付款 已付款 --> 已发货 已发货 --> 已签收 待付款 --> 已取消 已付款 --> 已取消

提示词:

用 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 文件就可以开始编辑了,如下图所示: