draw.io 实践

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	粘贴尺寸属性

---

参考资料

1. draw.io Helpdesk
2. The 10 Best Free Alternatives To Microsoft Visio
3. Draw Diagrams With Markdown