一、draw.io介绍

1、draw.io简介

draw.io 是一款强大的免费在线图表绘制工具，支持创建流程图、组织结构图、时序图等多种图表类型。它提供丰富的形状库、强大的文本编辑和样式设置功能，使用户能够轻松创建专业级图表。draw.io 具有用户友好的界面，支持实时协作，可以存储到云端服务，并提供多种导出选项。作为一款开源软件，它广泛用于个人、教育和小型团队，为用户提供了灵活、便捷的图表绘制体验。

draw.io 提供了丰富的图表类型，包括但不限于：

• • 流程图
• • 组织结构图
• • 时序图
• • 思维导图
• • UML 图
• • 网络图
• • ER 图（实体关系图）
• • 电路图等

2、draw.io特点

具有以下特点：

3、开源版本Diagrams

同时，draw.io 拥有开源版本 Diagrams。Diagrams 源代码是基于 draw.io 的开源分支，允许用户在本地部署和使用，同时保留了 draw.io 的核心功能和特性。 

二、draw.io的使用步骤

访问 draw.io，可以直接在浏览器中使用，不需要下载或安装任何软件。

选择模板或空白页面 

• • 选择 “New Diagram”。
• • 选择你想要创建的图表类型，或者选择 “Blank Diagram” 以开始一个空白图表。

添加形状

• • 从左侧的面板中选择你想要添加的形状，例如矩形表示流程步骤，箭头表示流程流向。
• • 将形状拖动到画布上。

连接形状

• • 选择 “Connector” 工具。
• • 点击一个形状，拖动鼠标到另一个形状，连接它们。

编辑文本

• • 双击形状，开始编辑文本。
• • 输入你想要显示的文本，按 Enter 完成编辑。

格式化和样式 

• • 选中一个形状，你可以通过右侧的 “Format” 栏修改颜色、字体等样式。
• • 通过右键点击形状，选择 “Format” 进行更高级的格式设置。

添加图片和图标

• • 选择 “Image” 工具。
• • 从你的计算机中拖动一个图片文件到画布上。

保存和导出

• • 选择 “File” -> “Save” 以保存你的图表。
• • 可以选择不同的格式导出图表，如 PNG、JPEG、PDF 等。

共享和协作

• • 使用 draw.io 的 “Share” 功能，可以生成一个共享链接，方便团队协作编辑。

通过以上步骤，你就可以创建一个简单的流程图。draw.io 提供了丰富的工具和选项，可以满足各种图表绘制的需求。通过不断尝试和探索，你会逐渐掌握 draw.io 的更多功能。

三、draw.io结合PlantUML

draw.io 结合 PlantUML  提供了强大的 UML 图绘制功能。PlantUML 是一种基于文本描述的 UML 图生成工具，通过在 draw.io 中嵌入 PlantUML 语法，用户可以快速绘制出各种 UML 图，如类图、时序图等。

使用步骤：

打开 draw.io，在右侧代表新建的加号。 ​

​

在 “高级” 下找到 “PlantUML”。

编写 PlantUML 语法，例如：

@startuml
 
!define RECTANGLE class
 
RECTANGLE "EVB RK3568\n开发板" {
}
 
RECTANGLE "Node.js和\nNode-RED" {
  +getData()
  +processData()
}
 
RECTANGLE "SQLite\n数据库模块" {
  +storeData()
}
 
RECTANGLE "Opcua\n数据获取" {
  +fetchData()
}
 
RECTANGLE "MQTT" {
  +publishData()
}
 
RECTANGLE "Windows10+DevEco Studio\n用户界面" {
  +displayData()
  +setThreshold()
}
 
RECTANGLE "服务器" {
  +receiveData()
  +triggerAlarm()
}
 
"EVB RK3568\n开发板" -> "Node.js和\nNode-RED": 传感器数据
"Node.js和\nNode-RED" -> "SQLite\n数据库模块": storeData()
"Node.js和\nNode-RED" -> "Opcua\n数据获取": fetchData()
"Node.js和\nNode-RED" -> "MQTT": publishData()
"MQTT" -> "服务器": receiveData()
 
"服务器" -> "Windows10+DevEco Studio\n用户界面": displayData()
"Windows10+DevEco Studio\n用户界面" -> "服务器": setThreshold()
 
@enduml

将 PlantUML 语法粘贴到 draw.io 的 PlantUML 输入框中。 ​

点击 “Apply” 应用语法，draw.io 将生成相应的 UML 图。

四、draw.io结合Mermaid

draw.io 还支持与 Mermaid 集成，Mermaid 是一个用于绘制流程图、时序图等的 JavaScript 库。

使用步骤：

打开 draw.io，在右侧代表新建的加号。

sequenceDiagram
    participant A as 用户
    participant B as Harmony设备
    participant C as 云服务器
    participant D as 云数据库
    participant E as 嵌入式上层应用
    participant F as 开发板
    participant G as SQLite
 
    activate A #grey
    note over A: 用户查看操作
    A->>B: 查询事件
    deactivate A
    activate B #lightblue
    B->>C: 请求数据
    deactivate B
    activate C #orange
    C->>D: 查询
    deactivate C
    activate D #blue
    D-->>C: 返回数据
    deactivate D
    activate C #orange
    C-->>B: 返回数据
    deactivate C
    activate B #lightblue
    B-->>A: 显示内容
    deactivate B
 
    activate A #grey
    note over A: 用户更改操作
    A->>B: 更新事件
    deactivate A
    activate B #lightblue
    B->>C: 请求更新
    deactivate B
    activate C #orange
    C->>F: 请求更新
    deactivate C
    activate F #lightgreen
    F->>G: 请求更新
    deactivate F
    activate G #green
    G-->>F: 返回结果
    deactivate G
    activate F #lightgreen
    F->>C: 发送修改请求
    deactivate F
    activate C #orange
    C->>D: 更新数据
    deactivate C
    activate D #blue
    D-->>C: 返回结果
    deactivate D
    activate C #orange
    C-->>B: 返回结果
    deactivate C
    activate B #lightblue
    B-->>A: 返回结果
    deactivate B
    activate A #grey
    A->>A: 提示结果
    note over A: 操作成功
    deactivate A

将 Mermaid 语法粘贴到 draw.io 的 Mermaid 设备中。

点击 “Apply” 应用语法，draw.io 将生成相应的流程图。 ​

通过结合 PlantUML 和 Mermaid，draw.io 提供了更多的图表绘制选项，使用户能够更灵活地创建各种 UML 图和流程图。这种结合使得 draw.io 成为一个适用于不同图表需求的多功能图表工具。