当前位置:网站首页 > 技术博客 > 正文

plantuml画流程图



最近在做系统设计的时候,发现要画不少时序图,以前用的最顺手的工具是 draw.io,后来也尝试了语雀自带的画图工具,感觉画画简单的图还行,但是复杂一点的,就比较吃力了。
在这里插入图片描述

是一个多功能组件,可快速、直接地创建图表。用户可以使用简单直观的语言起草各种图表。
官方文档:https://plantuml.com/zh/
是一个开源工具,它允许我们用简单的文本描述来创建图,包括序列图、用例图、类图、对象图、活动图、组件图、部署图、状态图,以及时序图
在这里插入图片描述

除了图之外, 还支持一系列其他图表,例如 数据、数据、图表、架构图等等。的一大优势,是图表完全用文本代码描述,这就意味着它可以作为文档嵌入到源代码中,也非常方便版本控制和多人协作,不管是迭代设计、文档编写、系统建模,都能胜任。

为了便捷地使用 ,许多流行的和代码编辑器提供了集成的插件,如、、 等。插件提供了实时预览、语法高亮和图表导出等功能,能帮助我们更快捷,更高效地画图,整体上IDEA的插件用起来体验最好。

:比如 可以让我们直接在 IDE 中查看和编辑 PlantUML 图表
在这里插入图片描述
插件使用效果
在这里插入图片描述

VS Code:https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml
在这里插入图片描述

插件使用效果:
在这里插入图片描述

我们先来看个最简单的例子,通过 和 就可以在参与者之间传递消息,不用明确声明参与者。

 

在这里插入图片描述

接下来,我们看看 时序图的一些具体语法。

我们使用关键字 来声明参与者,就可以对该参与者进行更多的控制。声明的顺序就是默认的显示顺序。我们也可以用这些关键字来声明参与者,给参与者设置不同的形状。

  • (角色)
  • (边界)
  • (控制)
  • (实体)
  • (数据库)
  • (集合)
  • (队列)

我们还可以通过 as关键字重命名参与者。

 

在这里插入图片描述

默认的颜色比较单调,也可以通过来设置参与者的颜色:

 

在这里插入图片描述

在不同参与者之间,通过+ 来表示消息传递。

1.4.2.1 同步消息

同步消息: 同步消息文本
在这里插入图片描述

1.4.2.2 异步消息

异步消息:由发送者A指向接收者B,表示A发送后不需要等待B立即处理。
异步消息文本
在这里插入图片描述

1.4.2.3 返回消息

返回消息:通常从接收者返回到发送者,标识一个回应。
返回消息文本
在这里插入图片描述

1.4.2.4 自调用

自调用:一个参与者直接发送消息给自己,表示自我处理或运算。
自调用
在这里插入图片描述

1.4.3.1 生命线的激活与撤销

生命线的激活与撤销,可以用下面这些关键字来控制生命线的激活与撤销

  • :显示参与者的活动状态开始
  • :指示参与者的活动状态结束
  • :用于表示参与者的生命线终结,通常表示对象生命周期的结束
 

在这里插入图片描述

1.4.3.2 生命线的嵌套与颜色

可以使用嵌套激活条来表示内部调用,并可以给生命线添加颜色

 

在这里插入图片描述

1.4.3.3 自动激活

在发送消息时自动显示激活条。

 

在这里插入图片描述

1.4.3.4 自动去激活

在接收回应时自动隐藏激活条

 

在这里插入图片描述

分组:用于逻辑上分组一系列交互

 

在这里插入图片描述

替代():表示基于条件的替代执行流程

 

在这里插入图片描述

 

在这里插入图片描述

在 中,我们可以对时序图的各个元素自定义颜色,比如参与者(actors)、对象(objects)、激活条(activation bars)等,来让我们的时序图更加美观。在声明元素时,可以直接指定颜色,格式为。颜色代码可以是不同的形式:

1.4.6.1 直接指定颜色

颜色代码可以是一个十六进制颜色值,也可以是预定义的颜色名称

 

在这里插入图片描述

1.4.6.2 使用 skinparam 设置颜色

除了直接为特定元素指定颜色外,还可以使用 全局设置时序图中的颜色。用这种方式更改元素的默认颜色比较方便

 

在这里插入图片描述

当使用 时,我们可以设置许多不同属性的颜色,如边框颜色(BorderColor)、背景颜色(BackgroundColor)、字体颜色(FontColor)和激活条颜色(SequenceGroupBodyBackgroundColor)。更多语法可以直接查看官方文档:顺序图的语法和功能,目前这些内容,已经足够我们常见的时序图需求了。

我们接下来看一个稍微完整一点的例子,在这个例子中,我们的需求,是要在原本的登录的基础上,引入Google登录。

 

在这里插入图片描述

版权声明


相关文章:

  • java调用js脚本2025-03-30 15:30:05
  • js导出excel文件前端插件2025-03-30 15:30:05
  • c无锁队列2025-03-30 15:30:05
  • c++移位运算符2025-03-30 15:30:05
  • csdn积分有什么用2025-03-30 15:30:05
  • java中引用类型是什么2025-03-30 15:30:05
  • 去耦和旁路电容的区别2025-03-30 15:30:05
  • linux 添加用户组新成员2025-03-30 15:30:05
  • 接口自动化测试工具2025-03-30 15:30:05
  • 安全测试包含哪些内容2025-03-30 15:30:05