Draw.io绘制UML图教程

原创

Damon小智

发布于 2024-02-25 23:04:28

1.4K0

发布于 2024-02-25 23:04:28

文章被收录于专栏：全栈文档库

一、draw.io介绍

1、draw.io简介

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

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

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

2、draw.io特点

具有以下特点：

特点	详细描述
免费且开源	draw.io 是一款开源软件，并且完全免费使用。你可以直接在浏览器中使用，无需下载或安装任何应用程序。这使得它成为一个便捷的工具，适用于个人用户、学生和小型团队。
多种图表类型	draw.io 提供了丰富的图表类型，比如流程图、组织结构图、时序图、思维导图、UML 图、网络图、ER 图（实体关系图）、电路图等。
强大的编辑功能	draw.io 提供了丰富的形状库，包括基本形状、流程图符号、图标等，方便用户快速创建图表。用户可以轻松编辑图表中的文本，调整字体、颜色和大小。支持对图表中的元素进行颜色、边框、填充等样式设置，使图表更加生动。
实时协作	draw.io 支持多用户实时协作编辑图表，用户可以通过共享链接邀请他人查看或编辑图表。这使得团队成员能够在同一图表上协同工作，提高工作效率。
云端存储	用户可以选择将图表保存到云端服务（如 Google Drive、OneDrive、GitHub 等），方便随时随地访问和编辑。
灵活导出	draw.io 提供了多种导出选项，包括 PNG、JPEG、SVG、PDF 等格式，使用户可以灵活地分享、嵌入或打印图表。
用户友好性	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，在右侧代表新建的加号。

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

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

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