【零零碎碎】Draw.io（diagrams.net）使用指南：从入门到进阶

Draw.io（diagrams.net）使用指南：从入门到进阶

作者：FeiLink

---

引言

在学习计算机科学和软件工程的过程中，系统架构图、流程图、ER 图、UML 类图等都是必不可少的工具。无论是记录项目的逻辑关系，还是团队协作时的可视化表达，一张清晰的图往往胜过千言万语。在众多绘图工具中，Draw.io（现名 diagrams.net） 是最受欢迎的免费开源方案之一。

本文将系统介绍 Draw.io 的使用方法，从基础操作到进阶技巧，帮助你快速掌握这款神器。

---

1. Draw.io 简介

• 官网地址：https://app.diagrams.net
• 开源免费：无需付费，支持在线和离线使用。
• 跨平台支持：浏览器、桌面客户端（Windows、macOS、Linux）、VS Code 插件。
• 适用范围广：流程图、架构图、网络拓扑、UML、ER 图，甚至简单的思维导图。

为什么选择 Draw.io？

1. 免费开源，不受限制。
2. 自带海量图标库，支持云平台（AWS、Azure、GCP）架构图。
3. 和 GitHub、Google Drive、OneDrive 等无缝集成。
4. 社区活跃，插件和模板资源丰富。

---

2. 基础入门

2.1 进入编辑器

1. 打开 app.diagrams.net。
2. 首次使用会提示选择保存位置：
   • Google Drive / OneDrive / GitHub / 本地文件。
   • 如果只是练习，可以选择 Device（本地）。

2.2 界面布局

• 左侧：图形库（流程图、UML、网络组件、云图标）。
• 中间：画布区域。
• 右侧：属性面板（样式、排列、图层）。

2.3 绘制第一个流程图

示例：登录流程

1. 从左侧拖出矩形，输入「用户输入账号密码」。
2. 拖出菱形，输入「验证是否成功？」。
3. 分别连线：成功 → 进入首页；失败 → 提示错误。

结果就是一个最基础的业务流程图。

---

3. 进阶技巧

3.1 快捷键

1. 🖱️ 基础操作

   1. Ctrl + C：复制
   2. Ctrl + V：粘贴
   3. Ctrl + X：剪切
   4. Ctrl + Z：撤销
   5. Ctrl + Y：重做(撤销撤销)
   6. Delete：删除选中对象
   7. Ctrl + D：复制当前图形并粘贴在原位置

2. 📐 画布与视图

   1. Ctrl + 鼠标滚轮：缩放画布
   2. Space + 拖动：移动画布（平移）
   3. Ctrl + 0：重置缩放到 100%
   4. Ctrl + Shift + H：显示/隐藏工具栏
   5. Ctrl + Shift + P：打印/导出预览

3. 🔲 图形编辑

   1. Alt + 拖动图形：复制并移动
   2. Ctrl + G：组合多个对象
   3. Ctrl + Shift + G：取消组合
   4. Ctrl + Shift + F：置于最前
   5. Ctrl + Shift + B：置于最后
   6. Ctrl + Shift + R：顺时针旋转 90°
   7. Alt + Shift + 点击：选择重叠对象
   8. F2：快速编辑文字

3.2 图层管理

• 在复杂架构图中，可以为不同部分建立图层，例如：前端层、服务层、数据库层。
• 图层能单独隐藏、锁定，方便团队协作。

3.3 自动对齐与吸附

• Draw.io 提供自动参考线，帮助图形对齐。
• 使用「对齐与分布」功能，可以让多个图形保持整齐的间距。

3.4 样式美化

• 调整边框颜色、线条粗细、填充渐变。
• 支持自定义主题（暗黑模式、扁平化风格）。
• 插入图标时，可以直接拖入 SVG 文件。

---

4. 项目实战：系统架构图

假设我们要画一个 电商系统架构图。

4.1 模块划分

• 前端：Web、App。
• 后端服务：用户服务、商品服务、订单服务、支付服务。
• 数据库：MySQL、Redis。
• 外部依赖：支付宝、微信支付。

4.2 绘制步骤

1. 使用矩形框表示不同模块。
2. 用直线/箭头连接服务之间的调用关系。
3. 插入数据库图标（左侧的 Database 库中有现成图标）。
4. 外部支付系统用云图标表示。

4.3 最终效果

• 前端通过 Nginx 访问后端 API 网关。
• API 网关分发请求到不同微服务。
• 微服务访问数据库或调用外部支付。
• Redis 提供缓存加速。

---

5. 高级使用技巧

5.1 模板与库

• 内置大量模板：系统架构、网络拓扑、UML。
• 可以从 File → New 选择。
• 还可以导入自定义图标库，比如 AWS、阿里云架构图标。

5.2 与 Git/GitHub 集成

• Draw.io 文件本质是 XML 格式，可以放入代码仓库。
• 在 GitHub 上直接编辑，支持版本控制。
• 非常适合团队协作，确保架构文档与代码同步。

5.3 与 Markdown 集成

• Draw.io 支持导出 PNG/SVG，并且可以选择「Include Diagram Source」选项。
• 导出的图片文件中，包含 XML 原始图形数据，可以随时导入恢复。
• 在 优快云 或 GitHub Markdown 文档中嵌入很方便。

5.4 与 VS Code 集成

• 安装插件 Draw.io Integration。
• 可以在代码编辑器内直接打开 .drawio 文件，边写代码边画图。

---

6. 实际工作应用技巧

6.1 团队协作

• 将文件保存到 Google Drive 或 OneDrive。
• 开启多人协作编辑，类似 Miro，但完全免费。

6.2 系统设计文档

• 在项目立项阶段，可以用 Draw.io 画 C4 模型图：
  • Context 图：系统边界和外部系统。
  • Container 图：服务划分。
  • Component 图：服务内部模块。

6.3 运维架构

• 网络拓扑图、K8s 部署图都能用 Draw.io 绘制。
• 配合自动化文档（如 Sphinx、MkDocs）生成的技术文档，效果极佳。

---

7. 拓展与原理思考

Draw.io 的本质是一款 前端 SVG/Canvas 绘图引擎，其文件格式是 XML，类似于一份“可解析的图形源代码”。这意味着：

• 图形数据 可版本控制，和代码一样。
• 图形生成 可自动化，理论上可以通过脚本生成 XML，然后导入 Draw.io 查看。
• 和纯文本描述工具（如 PlantUML）相比，Draw.io 更注重所见即所得，但两者完全可以结合使用。

这也解释了为什么 Draw.io 能和 GitHub、VS Code、Markdown 配合得如此自然。

---

8. 总结

Draw.io（diagrams.net）是一款功能强大、完全免费的架构图绘制工具。它的优势在于：

• 上手简单，适合入门用户快速画图。
• 功能丰富，支持复杂架构和专业场景。
• 与 Git、云存储、Markdown 无缝结合，特别适合程序员。

无论你是学生、开发者，还是架构师，掌握 Draw.io，都会让你的文档和沟通更高效、更直观。

---

AI 创作声明

本文部分内容由 AI 辅助生成，并经人工整理与验证，仅供参考学习，欢迎指出错误与不足之处。