Boot+Cloud项目学习：.com

引言

在进行系统设计的过程中intellij idea画uml图，我近期发现需要绘制大量的时序图。过去，我最为得心应手的是draw.io这款工具。然而，后来我也开始尝试使用语雀内置的绘图功能。对于绘制简单的图形intellij idea画uml图，这个工具尚能胜任。但面对较为复杂的图形，它的表现就显得力不从心了。

哎呀，这线条怎么又走偏了？整体布局怎么又显得杂乱无章？这线条怎么又没对齐？……刚刚手忙脚乱地完成了一张图，这时我心想，难道没有更专业的绘图软件吗？我们团队大多数人都用Visio，辉哥还特意推荐给我，说这款软件非常出色！正想着，旁边突然传来一句——“他就是装模作样！”

装比带我一个

还有这样的事？那我不能让他一个人都装了。

首先查阅了官方的资料，发现操作似乎需要一定的学习投入，不过亲自动手尝试后，感觉学习曲线并不陡峭，上手速度也相当迅速。因此，强烈建议大家都来试一试。

一、什么是？

此组件具备多用途特性，能够迅速且便捷地生成图表。用户能够运用简洁明了的语言来绘制各类图表。

这是一款开源软件，它支持我们通过简洁的文本说明来绘制多种UML图形，涵盖了序列图、用例图、类图、对象图、活动图、组件图、部署图、状态图，以及我们今天将要讨论的时序图。

除了UML图之外，系统还兼容众多其他图表类型，诸如JSON格式数据、YAML格式数据、EBNF格式图表以及架构图等。其显著特点是图表均采用文本代码进行定义，这使得图表能够无缝集成至源代码文档中，极大地便利了版本管理和团队协作。无论是进行迭代设计、撰写文档还是构建系统模型，这一特性都展现出其强大的适用性。

这或许是一个对你有所帮助的开源项目，mall项目是一套依托于Vue的电商平台（标星达60K），其后端支持多个模块以及与K8S的兼容部署。该项目不仅包括前台商城模块，还涵盖了后台管理系统，能够实现订单流程的全面支持！它囊括了商品管理、订单处理、购物车功能、权限设置、优惠券发放、会员管理以及支付系统等多种功能！

项目演示：

二、快速入门插件

为了便于操作，众多热门的集成开发环境以及代码编辑器均配备了各种插件，例如Code、IDEA等。这些插件具备实时查看、代码高亮显示以及图表导出等实用功能，极大地提升了我们的绘图速度和效率。在众多插件中，IDEA的插件使用体验尤为出色，然而，IDEA的内存占用较大，相比之下，VS Code则显得更为轻便。

Hello World!

首先，我们以一个最基础的案例为起点，借助箭头符号“->”以及“-->”，还有冒号“:”，我们便能在参与者之间实现信息的交流，且无需对参与者身份进行具体指明。

@startuml
老张 -> 老王 : 老王，你好啊
老王--> 老张: 老张，你好啊

老张 -> 老王: 最近有空一起喝茶
老张 <-- 老王: OK
@enduml

hello三、时序图语法

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

声明参与者

通过使用特定的关键词来定义参与者，我们能够对这位参与者实施更细致的管理。定义的先后顺序将决定其默认的展示顺序。此外，我们同样可以利用这些关键词来定义参与者，并为他们设定独特的形态。

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

@startuml
参与者Foo，即该参与者
演员  演员身份  扮演 Foo1角色
边界、界限，即Foo2所指的。
对Foo3的控制，需严格实施管控措施。
该实体，即Foo4所指的实体，不得进行修改。
数据库，即Foo5，被严格禁止修改。
汇集而成的作品集，亦即Foo6的藏品。
队列  队列，即Foo7所代表的那个
@enduml

参与者

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

@startuml
actor Bob #blue
演员与演员之间，唯一的区别或许在于他们的表演风格和所塑造的角色类型。
'参与者需进行绘画创作。
participant Alice #SkyBlue
participant "I have a really\nlong name" as L #00ff00

Alice向Bob发送了身份验证的请求。
Bob向Alice发送：认证回应信息
Bob->L: Log transaction
@enduml

上颜色的参与者消息传递

在不同参与者之间，通过箭头+:来表示消息传递。

A -> B: 同步消息文本

同步消息

A ->> B: 异步消息文本

异步消息

A <-- B: 返回消息文本

返回消息生命线（）与激活条（ Bar）

时序图中，生命线揭示了对象在特定时间段内的动态行为，即从参与者出发并向下延伸的那条虚线。激活条则用于描绘参与者在执行特定任务时的行为状态，它是生命线的一个组成部分，并以矩形条的形式呈现。

@startuml
participant User
User -> A: DoWork
activate A
A -> B: << createRequest >>
activate B
B -> C: DoWork
activate C
C --> B: WorkDone
destroy C
B --> A: RequestCreated
deactivate B
A -> User: Done
deactivate A
@enduml

生命线的激活与撤销

@startuml
participant User
User -> A: DoWork
activate A #FFBBBB
A -> A: Internal call
activate A #DarkSalmon
A -> B: << createRequest >>
activate B
B --> A: RequestCreated
deactivate B
deactivate A
A -> User: Done
deactivate A
@enduml

生命线的嵌套与颜色

A->B++: 激活B并发送消息

自动激活

A->B++: 激活B并发送消息
A <--B--: B去激活并回应消息

自动去激活分组和替代

group 分组名
A -> B: 消息
...
end group

分组

alt 条件1
A -> B: 满足条件1的消息
else 条件2
A -> B: 满足条件2的消息
end

替代注释

注释用于添加说明性文本。

@startuml
participant Alice
participant Bob
note left of Alice #aqua
This is displayed
left of Alice.
end note

在爱丽丝的右侧：此处显示于爱丽丝的右边。

在Alice身上标注：这一信息是在Alice身上显示的。

note over Alice, Bob 该颜色代码#FFAAAA\n在Bob和Alice上方呈现。

note over Bob, Alice
This is yet another
example of
a long note.
end note
@enduml

注释颜色

在绘制时序图的过程中，我们能够对构成图表的各个组成部分进行颜色定制，例如针对参与者、对象以及激活条等元素，以此提升时序图的整体视觉效果。在定义这些元素时，我们能够直接为其指定颜色，采用的格式是使用井号加上颜色代码。这些颜色代码可以呈现多种不同的形式：

@startuml
actor 用户  #Green
participant 参与者  #B4A7E5

用户-[#red]>参与者:消息
activate 参与者 #Blue

@enduml

直接指定颜色

@startuml
skinparam ActorBorderColor #DarkOrange
设定参与者的背景颜色参数#SkyBlue

actor 用户
participant 参与者
@enduml

使用设置颜色

在操作过程中，我们能够调整众多属性，涉及颜色设置，包括但不限于边框色彩、背景色彩、字体色彩以及激活条色彩。如需深入了解相关语法，可查阅官方文档，其中关于顺序图的语法与功能部分，已能满足我们面对常见时序图时的需求。

四、完整实例

我们接下来将观察一个相对更完整的示例，在该示例中，我们的目标是在原有的登录功能之上，进一步增加新的登录机制。

@startuml
skinparam ParticipantBackgroundColor #DeepSkyBlue

actor 用户 as c  #DeepSkyBlue
participant "客户端" as client
participant "服务网关" as ga
participant "用户服务" as user
database "数据库" as DB  #DeepSkyBlue
participant "Google服务" as google  #LightCoral

activate c #DeepSkyBlue
activate client #DeepSkyBlue

c->client:用户登录

group#珊瑚色 #珊瑚色版本 Google登录操作步骤
用户请求通过Google OAuth进行登录认证。
            activate google #DeepSkyBlue
Google客户端：请输入登录网页地址。
用户端向谷歌发送指令：引导至登录页面。
谷歌网站要求进行用户身份验证。
Google客户端：请使用Google账号的登录令牌
            deactivate google
end

|||

client -> ga : 登录请求
note right#LightCoral:新增登录方式，三方登录请求实体
activate ga #DeepSkyBlue
ga ->user:请求转发
activate user #DeepSkyBlue


alt#DeepSkyBlue 常规登录
    user -> DB : 查询用户信息
    activate DB #DeepSkyBlue
    DB -> user : 用户信息
    deactivate DB
    user->user:登录密码校验

|||
else Google登录
    group#珊瑚色 #珊瑚色 Google登录服务流程
用户向谷歌发送：请核实token
          activate google #DeepSkyBlue
          google-->user:用户信息
          deactivate google
对用户进行信息的保存或修改操作。
    end group
end


user-->ga:登录结果
deactivate user
ga -> client : 响应
deactivate ga
alt#DeepSkyBlue 成功
        client -> c : 登录成功
else 失败
        client -> c : 登录失败
end
deactivate client
|||
@enduml

如有侵权请联系删除！