draw.io 完全指南：手把手教你玩转这款免费的在线绘图神器

博主简介：byte轻骑兵，现就职于国内知名科技企业，专注于嵌入式系统研发。深耕 Android、Linux、RTOS、通信协议、AIoT、物联网及 C/C++ 等领域，乐于技术交流与分享。欢迎技术交流。 CSDN主页地址：byte轻骑兵-CSDN博客 知乎主页地址：https://www.zhihu.com/people/38-72-36-20-51 微信公众号：「嵌入式硬核研究所」 邮箱：byteqqb@163.com 声明：本文为「byte轻骑兵」原创文章，未经授权禁止任何形式转载。商业合作请联系作者授权。

不管你是学生（画思维导图、实验步骤图）、职场人（画业务流程图、架构图），还是程序员（画 ER 图、时序图），draw.io 都能满足需求 —— 它完全免费、无广告、不用注册，打开浏览器就能用，还支持本地保存、多格式导出。今天就带大家从 “不会用” 到 “熟练出图”，新手也能轻松拿捏！

一、为什么选 draw.io？3 个核心优势

在开始操作前，先说说它比其他绘图工具（如 Visio、XMind 免费版）好在哪，帮你确认 “这工具值得学”：

1. 零门槛免费：不用注册账号，打开网页就能画，无功能限制（Visio 要付费，XMind 免费版有水印）；
2. 全场景适配：支持流程图、思维导图、ER 图、时序图、架构图、UML 图等 20 + 图类型，满足学习 / 工作所有绘图需求；
3. 数据安全可控：默认本地保存文件（存在浏览器缓存或电脑本地），也能同步到 Google Drive/OneDrive，不怕数据丢失；
4. 兼容性强：可导出 PNG、JPG、PDF、SVG、Word 等格式，插入报告 / PPT 里清晰度不打折。

二、第一步：访问 draw.io（2 种方式，30 秒搞定）

draw.io 是在线工具，不用下载安装，两种访问方式任选，推荐新手用第一种：

方式 1：官网直接绘图（最直接）

1. 打开浏览器，输入官方地址：https://app.diagrams.net/（注意是 “diagrams.net”，原 draw.io 已更名，但功能不变）；
2. 首次打开会弹出 “保存位置” 选择框，新手选 “Device”（保存在本地电脑）即可，点击 “Create new diagram” 进入绘图页面；

提示：如果想后续继续编辑，画完记得手动保存（后面会讲保存步骤）。

方式 2：集成到办公软件（适合高频使用者）

如果常用 Google Docs、Microsoft 365，可直接在文档里插入 draw.io：

• 以 Word 为例：打开 Word→插入→“获取加载项”→搜索 “draw.io”→安装后，点击 “插入”→“draw.io Diagrams” 就能直接在 Word 里绘图。

三、第二步：认识 draw.io 界面（4 个核心区域，一眼看懂）

进入绘图页面后，先熟悉布局，后续操作才不迷路：

1. 顶部菜单栏：文件（保存 / 导出）、编辑（复制 / 撤销）、视图（显示 / 隐藏面板）、格式（调整颜色 / 字体）等核心功能；

2. 左侧工具栏：绘图核心工具，分 4 类（重点记前 3 个）：

• 「形状库」：包含流程图、思维导图、UML 等各类图形（点击顶部 “更多形状” 可添加需要的库）；
• 「基础工具」：选择（箭头图标）、文字（T 图标）、连接线（折线图标）、矩形 / 圆形等基础图形；
• 「编辑工具」：复制、删除、对齐（左对齐 / 居中）、图层管理（类似 PS 图层，多元素不混乱）；

3. 中间画布：绘图区域，所有图形、文字都在这里添加和排版；

4. 右侧属性面板：选中图形 / 连接线后，可调整颜色、大小、线条样式、字体等（比如给矩形改填充色、给连接线加箭头）。

四、第三步：核心场景实操（重点！3 个高频绘图需求）

这部分是教程核心，聚焦 “流程图”“思维导图”“ER 图” 三个最常用场景， step by step 教你从 0 画出完整的图，新手跟着做就能成！

4.1 场景 1：画流程图（最常用！比如 “工作审批流程”）

假设要画 “员工请假审批流程”（步骤：员工提交申请→部门经理审批→HR 备案 / 驳回），按以下步骤操作：

1. 添加 “开始 / 结束” 节点（第一步先定首尾）

• 左侧工具栏点击 “更多形状”→勾选 “流程图”→点击 “应用”（加载流程图专用形状库，图 4：加载流程图形状库的操作截图）；

• 从左侧 “流程图” 形状库中，找到 “开始 / 结束” 形状（圆形或圆角矩形，默认是圆角矩形），按住鼠标拖到中间画布的左上角；
• 选中刚拖的形状，右侧属性面板可调整样式：比如 “填充颜色” 选浅蓝色，“边框颜色” 选深蓝色。

2. 添加 “流程步骤” 节点（填核心步骤）

• 继续从 “流程图” 形状库拖 “流程” 形状（矩形）到画布，放在 “开始” 节点下方，用于写 “员工提交请假申请”；
• 再拖 2 个矩形，分别放在下方，依次写 “部门经理审批”“HR 备案 / 驳回”；
• 编辑文字：双击每个形状，输入对应文字（比如双击第一个矩形，输入 “员工提交请假申请”），选中文字可在右侧面板改字体大小（建议 12-14 号）、颜色。

3. 用 “连接线” 串联节点（让流程有逻辑）

• 左侧工具栏点击 “连接线” 工具（图标是 “↗️”，或按快捷键L）；
• 先点击 “开始” 节点，再点击 “员工提交申请” 节点，自动生成连接线；
• 给 “部门经理审批” 的连接线加 “判断”：拖一个 “决策” 形状（菱形）放在 “部门经理审批” 下方，分别连 “通过→HR 备案” 和 “不通过→驳回”。

4. 保存与导出（避免白画）

• 保存本地：点击顶部 “文件”→“另存为”→选择 “设备”→选电脑保存路径，文件名改 “请假流程.drawio”（保留原格式，方便后续编辑）；
• 导出图片：如果要插入报告，点击 “文件”→“导出为”→选 “PNG”（高清无压缩），分辨率选 “300 DPI”，点击 “导出” 下载。

4.2 场景 2：画思维导图（记笔记 / 梳理思路）

比如要梳理 “Python 学习规划”，核心分支：基础语法、Web 开发、数据分析，每个分支再分小点，步骤如下：

1. 启用思维导图模板（省时间）

• 点击顶部 “文件”→“新建”→“思维导图”（直接加载思维导图专用布局，不用手动调结构）；
• 画布默认出现 “中心主题”（圆形），双击改文字为 “Python 学习规划”。

2. 添加核心分支与子节点

• 选中 “中心主题”，右侧属性面板点击 “添加分支”（或按快捷键Tab），生成第一个核心分支，改文字为 “基础语法”；
• 再按 2 次Tab，生成另外 2 个核心分支：“Web 开发”“数据分析”；
• 给 “基础语法” 加子节点：选中 “基础语法”，按Enter（添加子节点），改文字为 “变量 / 函数”，再按Enter加 “条件语句”“循环语句”（图 10：思维导图分支添加演示截图）；
• 调整样式：选中所有分支，右侧面板改 “线条颜色” 为绿色，“文字颜色” 为深绿色，中心主题填充色选浅绿色。

4.3 场景 3：画 ER 图（数据库设计，程序员必看）

假设要设计 “学生 - 课程 - 成绩” 数据库，实体：学生（学号、姓名）、课程（课程号、名称）、成绩（分数），步骤如下：

1. 加载 ER 图形状库

• 点击左侧 “更多形状”→勾选 “数据库”→“ER 图”→点击 “应用”（加载实体、关系、属性等形状）；

2. 画 “实体” 与 “属性”

• 拖 “实体” 形状（矩形，标 “实体” 二字）到画布，改文字为 “学生”；
• 拖 “属性” 形状（椭圆形）到 “学生” 旁边，改文字为 “学号”，选中 “学号” 按Ctrl+C/Ctrl+V复制，改另一个为 “姓名”；
• 用 “连接线”（选 “关联线”，无箭头）把 “学生” 和 “学号”“姓名” 连起来，给 “学号” 加 “主键” 标识：双击连接线，在弹出的编辑框输 “PK”；
• 同理，画 “课程” 实体（属性：课程号 PK、名称）和 “成绩” 关联实体（属性：分数）。

3. 画 “实体关系”

• 拖 “关系” 形状（菱形）放在 “学生” 和 “课程” 之间，改文字为 “选课”；
• 用 “关联线” 连 “学生→选课” 和 “课程→选课”，双击连接线标关系类型（比如 “学生 - 选课” 标 “N”，“课程 - 选课” 标 “M”，表示多对多关系）。

五、第四步：进阶技巧（从 “会画” 到 “画得好”）

掌握基础操作后，这 4 个技巧能帮你提升效率，让图更专业：

1. 用模板快速出图（不用从零画）

• 点击顶部 “文件”→“模板”，里面有 “项目管理”“网络架构”“组织结构图” 等现成模板，选中后直接改文字就能用。

2. 图层管理（多元素不混乱）

• 当图里有很多形状时，点击左侧工具栏 “图层”（图标像堆叠的方块），新建图层（比如 “背景层”“内容层”）；
• 把背景图 / 装饰元素放在 “背景层”，核心内容放在 “内容层”，不需要时可隐藏图层（点击图层旁的眼睛图标），避免误操作。

3. 常用快捷键（提升 3 倍速度）

记 3 个高频快捷键，不用频繁点鼠标：

• Ctrl+C/Ctrl+V：复制 / 粘贴形状；
• Ctrl+Z/Ctrl+Y：撤销 / 恢复操作；
• Ctrl+A：全选画布元素；
• Tab：给思维导图添加分支；
• L：快速启用连接线工具。

4. 团队协作（多人一起改图）

• 点击顶部 “文件”→“分享”→“获取分享链接”，勾选 “允许编辑”，复制链接发给同事；
• 同事打开链接就能实时编辑，画布右上角会显示 “在线人数”，谁改了内容会标颜色（比如红色代表 A 编辑，蓝色代表 B 编辑）。

到这里，draw.io 的核心用法已经全部掌握！日常画流程图、思维导图、ER 图，用上面的步骤完全够了。

如果需要更复杂的图（如时序图、架构图），操作逻辑和上面类似：先加载对应形状库，拖形状→连线条→改样式→导出。另外，draw.io 还支持导入 Visio 文件（.vsdx 格式），如果之前用 Visio 画的图，可直接在 draw.io 里编辑（点击 “文件”→“导入”→选 Visio 文件）。

如果在操作中遇到问题（比如连接线总对不齐、导出图片模糊），可以在评论区留言，我会帮大家解答～