一、工具基础介绍
https://pan.quark.cn/s/681bd5555be2?pwd=XQK8
Draw.io 官方域名现已改为 diagrams.net，是一款开源跨平台绘图工具，主要用于绘制业务流程图、软件架构图、网络拓扑、UML、ER 数据库关系图等技术图表。工具分为网页在线版、桌面客户端两种使用形态，两套版本功能、文件格式完全互通，适配 Windows、macOS、Linux 系统。
主流绘图工具横向对比
表格
| 工具 | 注册要求 | 免费版本限制 | 广告弹窗 |
|---|---|---|---|
| Draw.io | 无需注册 | 无功能、导出、模板限制 | 无 |
| Lucidchart | 必须注册 | 图形使用数量上限 | 存在广告 |
| ProcessOn | 必须注册 | 存储文件数量限制 | 存在广告 |
| Miro | 必须注册 | 白板创建数量限制 | 存在广告 |
二、网页在线版使用步骤
- 浏览器访问地址
app.diagrams.net，页面弹出存储路径选择弹窗； - 可选存储位置：本地设备、Google Drive、OneDrive，也可选择「稍后决定」临时绘图；
- 无需账号注册、邮箱验证，确认存储位置后直接进入绘图界面。
编辑器界面分区说明
- 左侧面板：分类图形库，包含流程框、数据库、网络设备、UML 实体等，支持关键词检索图形（输入 database、decision 可快速匹配对应组件）；
- 中间区域：画布，承载全部绘图元素；
- 右侧面板：属性配置区，选中图形后调整填充色、边框、字体、对齐、线条样式。
基础绘图标准流程
- 从左侧图形库拖拽组件至画布；
- 鼠标悬浮图形边缘，蓝色连接点出现后拖拽生成连接线，工具自动避让其他图形完成路径规划，不满意可拖动线上控制点手动修改走向；
- 双击图形录入文字内容；
- 在右侧面板调整图形、线条视觉样式。
三、文件存储与导出规范
- 原生存储格式：
.drawio、.xml，底层基于 XML 结构，可使用文本编辑器打开查看图表源码； - 支持导出格式：
- 图片类：PNG、SVG，PNG 可自定义 DPI 分辨率，4x 缩放输出适配高分屏幕；
- 文档类：PDF，用于打印分发；
- 交互类：HTML，嵌入网页保留图表交互；
- 兼容类：VSDX，可直接使用 Visio 打开编辑。
四、进阶实用功能详解
1. 批量对齐分布
框选多个图形，右键菜单打开对齐工具，支持左 / 右 / 上对齐、水平居中、垂直均匀分布，快速规整复杂图表布局。
2. 图层管理
顶部菜单栏 View → Layers 打开图层面板，可新建、隐藏、锁定图层，分层管理背景、流程节点、注释文字，绘图时可单独隐藏无关图层简化视图。
3. 预制模板库
新建空白文件时可调用内置模板，覆盖微服务架构、前后端拓扑、业务流程、思维导图、甘特图，可在模板基础上修改，无需从零绘制。
4. 底层 XML 编辑
菜单栏 Extras → Edit Diagram，直接修改图表 XML 源码，适合批量统一修改多组件样式，提升批量处理效率。
5. 常用快捷键对照表
表格
| 操作功能 | 快捷键 | 补充说明 |
|---|---|---|
| 全选画布元素 | Ctrl + A | - |
| 撤销操作 | Ctrl + Z | - |
| 打开样式编辑器 | Ctrl + E | 批量复制图形样式 |
| 画布自适应窗口 | Ctrl + Shift + H | - |
| 画布缩放 | Ctrl + 鼠标滚轮 | - |
| 删除图形 | 直接删除后连接线断裂 | 需重新绘制连线 |
五、桌面客户端安装教程
1. 资源获取
下载地址：https://pan.quark.cn/s/681bd5555be2?pwd=XQK8
2. 分系统安装方式
- Windows：下载
.exe安装包，双击执行安装流程； - macOS：下载
.dmg镜像，将程序拖拽至 Applications 文件夹； - Linux：提供
.AppImage、.deb两种安装包。
3. 桌面端特性
基于 Electron 开发，界面逻辑与网页版完全一致；文件默认存储本地磁盘，仅同步云端时需要联网，安装包体积 100~200MB。
六、第三方软件集成方案
1. VSCode 集成
在扩展市场搜索「Draw.io Integration」插件安装，可直接在编辑器内打开、编辑.drawio文件，图表可跟随项目提交 Git，统一版本管理。
2. Confluence 集成
Atlassian 应用市场安装对应插件（商用付费），可在 Wiki 页面内嵌图表，无需导出图片再上传。
七、工具固有局限
- 无原生多人实时同步编辑功能，多人协作需依托 Google Drive、Confluence 等第三方平台；
- 视觉样式自定义参数较多，初次使用需要花费时间调试；
- 移动端触摸交互优化不足，手机仅适合查看图表，不适合绘图；
- 若有多人实时协同绘图需求，可选择 Miro、FigJam，但二者免费版存在功能限制。
八、适用与不适用场景
推荐使用场景
- 技术文档配套图表：系统架构、数据流、网络拓扑；
- 业务流程梳理，向非技术人员展示业务逻辑；
- 学习思维导图、知识结构图绘制；
- 项目上线前架构梳理，排查系统模块遗漏。
不推荐场景
- 高视觉设计类插画，优先使用 Figma、PPT 绘图组件；
- 大量图片素材排版类设计工作。
九、总结
Draw.io 长期持续维护更新，无付费门槛、无广告、无功能阉割，网页端无需注册即可快速绘图，桌面端支持离线本地使用，同时提供 VSCode、Confluence 集成方案，适配开发、办公场景下各类图表绘制需求，是低成本技术绘图方案。