draw.io 在线绘图

完整的在线绘图工具，支持流程图、UML、网络拓扑、ER 图等所有图形类型，数据本地保存

...

正在加载 draw.io 编辑器...

关于 draw.io 在线绘图

基于 draw.io 官方源码本地化部署，完整的在线绘图工具，无需连接外部网络
支持流程图、UML 类图/时序图、网络拓扑图、ER 图、泳道图、思维导图等所有内置图形类型
图表数据自动保存到浏览器 localStorage，关闭页面后重新打开可继续编辑
支持导出为 .drawio（XML）、SVG、PNG 格式，可在其他 draw.io 客户端继续编辑

操作说明

从左侧图形库拖拽图形到画布，或双击画布空白处快速添加图形
点击图形后拖拽连接点（蓝色小圆点）到另一个图形，建立连线关系
双击图形或连线可编辑文字标签；右键图形可访问更多操作菜单
顶部工具栏「导入」按钮可加载已有的 .drawio / .xml / .svg 文件继续编辑
编辑完成后点击「导出 .drawio」保存设计稿，或「导出 SVG/PNG」生成图片
支持 Ctrl+Z 撤销、Ctrl+Y 重做、Ctrl+A 全选、Delete 删除选中
鼠标滚轮缩放画布，按住空格键拖拽平移画布；Ctrl+Shift+H 重置视图

注意事项

draw.io 静态资源需手动下载部署到 wwwroot/tools/drawio/，部署后无需联网即可使用
图表数据保存在浏览器 localStorage，清除浏览器数据会丢失，建议定期点击「导出 .drawio」备份
导出 PDF 功能需要服务端渲染支持，当前版本仅支持 SVG 和 PNG 导出
所有绘图操作均在浏览器本地完成，不会上传任何数据到服务器

draw.io 使用知识详解

内置图形库介绍

图形库	适用场景	典型图形
通用（General）	流程图、示意图	矩形、菱形、圆形、箭头
UML	软件设计文档	类图、时序图、用例图、活动图
BPMN	业务流程建模	事件、网关、任务、泳道
网络（Network）	网络拓扑图	服务器、路由器、防火墙、云
Mockup	UI 原型设计	按钮、输入框、导航栏、表格
Flowchart	标准流程图	开始/结束、判断、处理、数据
AWS / Azure	云架构图	各云服务商官方图标

.drawio 文件格式说明

.drawio 文件本质是 XML 格式，图形数据经过 Base64 编码和 deflate 压缩后存储在 <mxCell> 标签中
文件可以直接用文本编辑器打开查看，也可以导入到 draw.io 桌面版、VS Code 插件等工具继续编辑
导出的 PNG 图片中会嵌入原始图表数据，可以重新导入 draw.io 进行编辑（不会丢失矢量信息）
SVG 导出同样嵌入了图表数据，可以在浏览器中直接查看，也可以重新导入编辑

常用快捷键速查

快捷键	功能	快捷键	功能
`Ctrl+Z`	撤销	`Ctrl+Y`	重做
`Ctrl+A`	全选	`Delete`	删除选中
`Ctrl+C`	复制	`Ctrl+V`	粘贴
`Ctrl+G`	组合图形	`Ctrl+Shift+G`	取消组合
`Ctrl+Shift+H`	重置视图	`Ctrl+Shift+F`	适应页面
`Ctrl++`	放大	`Ctrl+-`	缩小
`F2`	编辑标签	`Esc`	取消选择
`Space+拖拽`	平移画布	滚轮	缩放画布

draw.io 与同类工具对比

工具	优势	劣势	适用场景
draw.io	免费开源、功能完整、支持本地部署	界面相对复杂	技术文档、架构图、流程图
Visio	与 Office 集成好、模板丰富	付费、仅 Windows	企业级文档
Lucidchart	协作功能强、界面友好	付费、需联网	团队协作绘图
Mermaid	代码驱动、易于版本控制	学习成本高、不支持自由布局	代码文档、Git 仓库

常见图表类型绘制技巧

流程图：使用「Flowchart」图形库，开始/结束用圆角矩形，判断用菱形，处理步骤用矩形，连线用带箭头的实线
UML 类图：使用「UML」图形库中的 Class 图形，支持自动生成属性和方法分区；继承关系用空心三角箭头，组合用实心菱形
时序图：使用「UML」图形库中的 Sequence 图形，生命线用竖线，消息用水平箭头，激活框用细长矩形
网络拓扑图：使用「Network」图形库，从图形库搜索具体设备名称（如 router、firewall、server）快速找到对应图标
ER 图：使用「Entity Relation」图形库，实体用矩形，属性用椭圆，关系用菱形，连线标注基数（1、N、M）