首页 > 其他分享 >Draw.io绘制UML图教程

Draw.io绘制UML图教程

时间:2024-06-05 10:45:08浏览次数:19  
标签:Draw activate deactivate draw 用户 图表 io UML

 

一、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 将生成相应的流程图。

 

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

原文链接:https://blog.csdn.net/weixin_41793160/article/details/136245469

 

标签:Draw,activate,deactivate,draw,用户,图表,io,UML
From: https://www.cnblogs.com/gaoyanbing/p/18232536

相关文章

  • 界面控件DevExpress WinForms的流程图组件 - 可完美复制Visio功能(二)
    DevExpressWinForms的Diagram(流程图)组件允许您复制MicrosoftVisio中的许多功能,并能在下一个WindowsForms项目中引入信息丰富的图表、流程图和组织图。P.S:DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能......
  • MinIO使用
    MinIO使用文章目录MinIO使用1、什么是MinIO2、MinIO核心概念3、Linux部署MinIO4、MinIO管理页面操作5、在java中使用MinIo1、什么是MinIOMinio是个基于Golang编写的开源对象存储套件,基于ApacheLicensev2.0开源协议,虽然轻量,却拥有着不错的性能。它兼容亚马......
  • (三)Redis 线程与IO模型
    1、Redis单线程通常说Redis是单线程,主要是指Redis的网络IO和键值对读写是由一个线程来完成的,其他功能,比如持久化、异步删除、集群数据同步等,是由额外的线程执行的,所以严格来说,Redis并不是单线程。多线程开发会不可避免的带来并发控制和资源开销的问题,如果没有良好的系统......
  • ASP.NET Web应用程序升级最新的MSBuild格式后,Visual Studio 2022中如何调试?
    摘要把ASP.NET的Web应用程序,Project文件从<ProjectToolsVersion="12.0"DefaultTargets="Build"xmlns="http://schemas.microsoft.com/developer/msbuild/2003">改为<ProjectSdk="Microsoft.NET.Sdk.Web">之后,升级成了最新的格式之后,如......
  • 重写学习 localStorage 与 sessionStorage
    localStorage与sessionStoragelocalStorage与sessionStorage很多小伙伴对它们俩都很熟悉了;最熟悉的莫过下面这2条1,localStorage存储的数据没有时间限制,理论上永久有效;除非手动清除。sessionStorage存储的数据在关闭当前页面后失效;2,有存储大小限制,两者存储大......
  • 简单4步,带你用华为云MetaStudio制作数字人短片
    本文分享自华为云社区《使用MetaStudio生产线四步制作数字人视频》,作者:yd_298097624。随着AIGC新技术尤其是大模型技术的发展,音视频行业、数字内容生产行业正在经历这从生产方式和生产效率上的一个巨大变化。预测到2030年有AI大模型生成的数字内容比例将高达90%,包括通过AIGC来生......
  • ASP.NET Web应用程序升级最新的MSBuild格式后,Visual Studio 2022中如何调试?
    摘要把ASP.NET的Web应用程序,Project文件从<ProjectToolsVersion="12.0"DefaultTargets="Build"xmlns="http://schemas.microsoft.com/developer/msbuild/2003">改为<ProjectSdk="Microsoft.NET.Sdk.Web">之后,升级成了最新的格式之后,如......
  • 基于双向长短时记忆神经网络结合多头注意力机制BiLSTM-Mutilhead-Attention实现柴油机
    %加载数据集和标签load(‘diesel_dataset.mat’);%假设数据集存储在diesel_dataset.mat文件中data=diesel_dataset.data;labels=diesel_dataset.labels;%数据预处理%这里假设你已经完成了数据的预处理,包括特征提取、归一化等步骤%划分训练集和测试集[tra......
  • IO进程线程(五)库的制作、进程
    文章目录一、库(一)静态库1.概念2.制作3.使用(编译)(1)生成可执行文件(2)运行(二)动态库(共享库)1.概念2.制作3.生成可执行文件4.基于动态库的可执行文件的执行过程二、进程(一)概念1.进程2.进程和程序的区别3.进程的组成4.进程的种类(1)交互进程(2)批处理进程(3)守护进程5.......
  • Z.ExtensionMethods安装
    C#开源实用的工具类库,集成超过1000多种扩展方法 前言今天大姚给大家分享一个C#开源(MITLicense)、免费、实用且强大的工具类库,集成超过1000多种扩展方法增强.NETFramework和.NETCore的使用效率:Z.ExtensionMethods。直接项目引入类库使用在你的对应项目中NuGet包管理器......