draw.io强大的开源绘图神器

• draw.io 是一个强大简洁的在线的绘图网站，支持流程图，UML图，架构图，原型图等图标。开源网站支持Github，Google Drive, One drive等网盘同步，并且永久免费。如果觉得使用Web版不方便，draw.io 也提供了多平台的离线桌面版可供下载，在创建时还会有超多模板可以选择

1. 开源地址：https://app.diagrams.net/

2. 基本图形

（1）画前端组件模块图(以审批工作台为例子)

一层层去拆分组件，第一层是要拆分得大组件例子中是整个工作台页面，第二层是将整个工作台页面再拆分成可独立存在的子组件，如果可以重复使用的元素可以在组件中用()括起来，第三层是拆分属于审批页的自组件，这样在话页面时可以有很清楚的思路

每个图形代表的含义

矩形：最上层代表页面层

实线：父子包含关系，在线上添加数字表示复用次数

（2）画数据流程图(以登录为例子)

每个图形代表的意义：

矩 形：角色实体 (用户或者管理员等操作人角色)

圆 形：组件 (要与组件模块图设计的组件一致)

椭圆形：数据处理模块(多个来源的数据进行业务复杂处理)

双实线：数据源数据库中具体的某张表

实线箭头：组件间的关系(代表没有数据交互的两个组件之间的包含关系，没有文字描述)

虚线箭头：数据流向(添加关于数据信息的文字描述)

3. draw.io界面展示

操作起来很简单，所有功能都按一按再多练习几遍就可以画的很好啦