1 draw.io 介绍
尝试过以下几个画图软件 LucidChart、ProcessOn、Graphviz、Visio、Astah、yEd、Google Drawings、LibreOffice Draw，也尝试过使用 MarkDown 画流程图，但因为不同的渲染器渲染效果大相径庭而放弃了。最后还是选择 draw.io 作为首选画图工具，主要原因有以下几个：
- 跨平台、免费、开源、可集成；
- 学习曲线平缓，入门快；
- 其收入来源为与 Atlassian 的商业合同，与 Jira 和 Confluence 完美融合；
做过 Web 画板类开发的同学一定听说过 mxGraph ，一个适合二次开发的前端画板框架，这个框架就是由 draw.io 的开源组织 JGraph 进行维护的，这种健康的生态模式非常吸引人。
2 draw.io 快捷键
官方快捷键截图：
| 类别 | 快捷键 | 作用 |
|---|---|---|
| LABELS | Double click | 添加文本或增加边缘标签 |
| LABELS | Shift+Enter | 标签编辑中换行 |
| LABELS | Enter | 标签编辑中新段落 |
| LABELS | F2 / Enter | 开始编辑标签 |
| LABELS | F2 / Tab / Esc | 结束编辑并保存标签 |
| LABELS | Ctrl+B / I | 切换粗体和斜体 |
| LABELS | Ctrl+U | 切换字体下划线 |
| LABELS | Ctrl+. / , | 字体切换为 上标/下标 类型 |
| SELECTION | (Shift+)Tab | 选择下一个/上一个 |
| SELECTION | Alt+(Shift+)Tab | 选择子项目/父项目 |
| SELECTION | Shift+Drag | 加入选择 |
| SELECTION | Alt+Shift+Drag | 移除选择 |
| SELECTION | Ctrl+(Shift+)A | 选择全部/放弃选择全部 |
| SELECTION | Ctrl+Shift+I / E | 选择 顶角/边缘 |
| SELECTION | Ctrl / Shift+Click | 切换选择状态 |
| SELECTION | Alt+Click | 选择子图形 |
| TOOLS | Ctrl+Shift+L | 显示/隐藏 图层窗口 |
| TOOLS | Ctrl+Shift+O | 显示/隐藏 缩略图窗口 |
| TOOLS | Ctrl+M | 编辑对象 meta 信息 |
| TOOLS | Ctrl+Shift+P | 开启关闭右侧属性边框 |
| TOOLS | Ctrl+Shift+M | 编辑顶点 |
| TOOLS | Ctrl+Click | 选项菜单 |
| TOOLS | Rightclick | 选项菜单 |
| TOOLS | F1 | 关于 |
| CURSOR / PAGE KEYS | Cursor | 移动对象 pt 单位 |
| CURSOR / PAGE KEYS | Shift+Cursor | 移动对象 grid 单位 |
| CURSOR / PAGE KEYS | Ctrl+Cursor | 调整对象大小 pt 单位，Mac 中需要 +Option |
| CURSOR / PAGE KEYS | Ctrl+Shift+Cursor | 调整对象大小 grid 单位 |
| CURSOR / PAGE KEYS | Alt+Shift+Cursor | 复制对象并连接 |
| CURSOR / PAGE KEYS | Alt+Cursor | 翻页 |
| CURSOR / PAGE KEYS | Ctrl+Shift+Pg Up | 上一页 |
| CURSOR / PAGE KEYS | Ctrl+Shift+Pg Down | 下一页 |
| CANVAS | Ctrl+X | 剪切 |
| CANVAS | Ctrl+C | 复制 |
| CANVAS | Ctrl+V | 粘贴 |
| CANVAS | Ctrl+G | 组合 |
| CANVAS | Ctrl+Shift+U | 解除组合 |
| CANVAS | Ctrl+L / Alt+Shift+L | 锁定/解锁 编辑连接 |
| CANVAS | Ctrl+Enter / D | 复制 |
| CANVAS | Backspace or Delete | 删除选定对象 |
| CANVAS | Ctrl+Delete | 删除选定对象和附属连接 |
| CANVAS | Ctrl+R | 旋转90度 |
| CANVAS | Shift+Resize | 调整大小 |
| CANVAS | Ctrl / Meta+Resize | 调整组合大小 |
| CANVAS | Ctrl+Home | 收缩容器 |
| CANVAS | Ctrl+End | 扩展容器 |
| CANVAS | Ctrl+Shift+Home | 离开组合 |
| CANVAS | Ctrl+Shift+End | 进入组合 |
| CANVAS | Ctrl+Shift+B | 调整到下一图层 |
| CANVAS | Ctrl+Shift+F | 调整到上一图层 |
| CANVAS | Alt+Shift+C/T | 清除路径节点 / 修改提示标签 |
| CANVAS | Ctrl+Shift+Y | 结合标签自动调整大小 |
| CANVAS | Ctrl / Shift+Drag | 复制但不连接 |
| CANVAS | Alt+Connect | 固定方式连接 |
| VIEW | Alt+Mouse wheel | 画布放大/缩小 |
| VIEW | Ctrl+Shift+Mouse wheel | 画布放大/缩小 |
| VIEW | Ctrl+Mouse wheel | 屏幕放大/缩小(MacOS) |
| VIEW | Mouse wheel | 画布垂直滑动 |
| VIEW | Shift+Mouse wheel | 画布水平滑动 |
| VIEW | Space / Right mouse Drag | 画布视图大小调整 |
| VIEW | Ctrl+Shift+Drag | 创建空间 |
| VIEW | Ctrl+Shift+Connect | 取消连接 |
| VIEW | Home | 回到中心视图 |
| VIEW | End | 刷新 |
| VIEW | Ctrl+H | 重置视图 |
| VIEW | Ctrl+Shift+H | 自动适应当前视图 |
| VIEW | Ctrl+J | 自动适应当前页面 |
| VIEW | Ctrl+Shift+J | 调整为当前页面的2倍大小视角 |
| VIEW | Ctrl + (Numpad) | 放大视图 |
| VIEW | Ctrl - (Numpad) | 缩小视图 |
| VIEW | Ctrl+0 | 自定义视图缩放比例 |
| SIDEBAR / CONNECT | Alt+(Shift+)Drag from sidebar | 拖放选中图形到画板并禁止替换 |
| SIDEBAR / CONNECT | Alt+(Shift / Ctrl)+Click on a sidebar item | 放置选中图形到画板并连接画板中选中的图形 |
| SIDEBAR / CONNECT | Shift+Click on a sidebar item | 替换画板中选中的图形 |
| SIDEBAR / CONNECT | Click on a sidebar item | 放置当前图形到画板 |
| SIDEBAR / CONNECT | Shift+Connect | 连接对象的轮廓，忽略连接点 |
| DOCUMENT | Ctrl+S | 保存 |
| DOCUMENT | Ctrl+Shift+S | 另存为 |
| DOCUMENT | Ctrl+Z | 撤销 |
| DOCUMENT | Alt+Shift+A | 连接箭头 |
| DOCUMENT | Alt+Shift+P | 连接点 |
| DOCUMENT | Hold Alt | 忽略当前选择的对象 |
| DOCUMENT | Ctrl+Shift+G | 是否显示网格线 |
| DOCUMENT | Ctrl+P | 打印 |
| DOCUMENT | Ctrl+Y | 重做(Windows) |
| DOCUMENT | Ctrl+Shift+Z | 重做(Linux/MacOS) |
| DOCUMENT | Ctrl+Shift+X | 插入文本 |
| DOCUMENT | Ctrl+K | 插入矩形 |
| DOCUMENT | Ctrl+Shift+K | 插入椭圆 |
| DOCUMENT | Esc | 取消当前操作 |
| DOCUMENT | Alt+Drag/Drop | 选择当前形状而不是组合 |
| STYLES | Ctrl+Shift+R | 清除样式 |
| STYLES | Ctrl+E | 编辑样式 |
| STYLES | Ctrl+Shift+D | 恢复默认样式 |
| STYLES | Ctrl+Shift+C | 复制样式 |
| STYLES | Ctrl+Shift+V | 粘贴样式 |
| STYLES | Alt+Shift+X | 复制尺寸属性 |
| STYLES | Alt+Shift+V | 粘贴尺寸属性 |
参考资料
