简介
画图工具粗分起来就两种:
- 拖拽式
- 代码式
拖拽式的优点:所见即所得,可以较为精细的控制元素。缺点:画图花的时间较长,画完后改动比较麻烦,很难统一样式。
代码式的优点:画图花的时间较少,画完后改动比较简单,样式很统一。缺点:在于不能根据自己的喜好随意拖拽方向,不能较为精细的控制元素。
拖拽式
- Visual Paradigm:这个软件在公司内部是有购买的,直接下载就可以使用,包含了所有UML图,特别强大的一款软件。它还有web版可以直接在线编辑,不过速度有点慢。
- Process On:包含了大部分通用的UML图,不过可选图形不多,样子一般,可以凑活使用。
- StartUML:这款软件功能强大, 提供了很多的样式、图形,对中文的支持也很好,推荐使用。官网地址:staruml.sourceforge.net/en/,下载地址:sourceforge.net/projects/st…
代码式
Mac 安装PlantUML,配合VSCode
- Java : 是运行PlantUML的必需条件, 请在您的环境中安装Java
- graphviz-dot: 可选的, 但是建议安装 (如果想绘制除 时序图和活动图以外的图, 就需要安装 Graphviz 软件)
java
www.java.com/en/download… 下载安装JRE。
安装成功后:
命令行输入:java -version
java version "1.8.0_341"
Java(TM) SE Runtime Environment (build 1.8.0_341-b10)
Java HotSpot(TM) 64-Bit Server VM (build 25.341-b10, mixed mode)
graphviz
graphviz软件包, 安装或者解压到指定的目录.
Homebrew 安装:
brew install graphviz
plantuml插件
vscode 商店搜索 plantuml 安装。
编辑文件
新建文件测试:test.wsd,或者 .pu 结尾,
输入以下内容:
@startuml
用户 -> 认证中心: 登录操作
认证中心 -> 缓存: 存放(key=token+ip,value=token)token
用户 <- 认证中心 : 认证成功返回token
用户 -> 认证中心: 下次访问头部携带token认证
认证中心 <- 缓存: key=token+ip获取token
其他服务 <- 认证中心: 存在且校验成功则跳转到用户请求的其他服务
其他服务 -> 用户: 信息
@enduml
@startuml
@enduml
开始结束的标志,在 @startuml
和 @enduml
之间是绘图的脚本。
生成图表
右键预览
导出图表
导出在本目录下 out 文件夹下。
PlantUML 绘制 UML
在UML图中,只要掌握类图、用例图、时序图的使用,就能完成大部分的工作。
时序图
@startuml
用户 -> 认证中心: 登录操作
认证中心 -> 缓存: 存放(key=token+ip,value=token)token
用户 <- 认证中心 : 认证成功返回token
用户 -> 认证中心: 下次访问头部携带token认证
认证中心 <- 缓存: key=token+ip获取token
其他服务 <- 认证中心: 存在且校验成功则跳转到用户请求的其他服务
其他服务 -> 用户: 信息
@enduml
autonumber
autonumber
关键字 autonumber 用于自动对消息编号
@startuml
autonumber
Bob -> Alice : Authentication Request
Bob <- Alice : Authentication Response
@enduml
分隔符 == ==
使用 == 关键词来将你的图表分割成多个逻辑步骤。
@startuml
== 初始化 ==
Alice -> Bob: 认证请求
Bob --> Alice: 认证响应
== 重复 ==
Alice -> Bob: 认证请求
Alice <-- Bob: 认证响应
@enduml
延迟 ... 或者 ... 5分钟 ...
@startuml
Alice -> Bob: 认证请求
...
Bob --> Alice: 认证响应
...5分钟后...
Bob --> Alice: 再见!
@enduml
生命线的激活与撤销 activate
deactivate
关键字 activate 和 deactivate 用来表示参与者的生命活动。
@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
文本换行 \n
@startuml
skinparam maxMessageSize 50
participant a
participant b
a -> b :这\n一条\n是\n手动换行
a -> b :this is a very long message on several words
@enduml
包裹参与者 box end box
@startuml
box "Internal Service" #LightBlue
participant Bob
participant Alice
end box
participant Other
Bob -> Alice : hello
Alice -> Other : hello
@enduml
类图
类图是UML图中最重要的几个图之一,它对我们梳理一个框架、表现继承抽象关系时尤为重要。一个好的类图能让人不用看代码就知道了作者的设计思路,使用的设计模式跃然纸上。
类图主要是用来显示系统中的类、接口以及它们之间的静态结构和关系的一种静态模型。
类图中具体类、抽象、接口和包的表示法
在UML类图中具体类、抽象类、接口和包有不同的表示方法。
表示具体类
具体类在类图中用矩形框表示,关键字 class
- 第一层是类名字
- 第二层是类的成员变量
- 第三层是类的方法。
成员变量以及方法前的访问修饰符用符号来表示:
- “+”表示
public
; - “-”表示
private
; - “#”表示
protected
; - 不带符号表示
default
。
// javascript
class Emitter {
onlyRunFirstListener
# eventCollection
- private option
+ on() {}
- once() {}
}
表示抽象类
抽象类在UML类图中同样用矩形框表示,关键字 abstract
abstract class AbstractList {
eventCollection
on() {}
}
表示接口
接口在类图中也是用矩形框表示,关键字 interface
- 第一层是接口名字
- 第二层是接口的成员变量
- 第三层是接口的方法。
interface ArtcEngineOptions {
eventCollection
on() {}
}
表示包
你可以通过关键词 package 声明包,同时可选的来声明对应的背景色(通过使用 html 色彩代码或名称)。
package "Classic Collections" #DDDDDD {
Object <|-- ArrayList
}
package net.sourceforge.plantuml {
Object <|-- Demo1
Demo1 *- Demo2
}
类图中表示关系
类和类、类和接口、接口和接口之间存在一定关系,UML类图中一般会有连线指明它们之间的关系。关系共有六种类型,分别是泛化关系、关联关系、依赖关系、聚合关系、组合关系,5种关系。
依赖、关联、聚合、组合与泛化代表类与类之间的耦合度依次递增。依赖关系实际上是一种比较弱的关联,聚合是一种比较强的关联,组合是一种更强的关联,泛化则是一种最强的关联,所以笼统的来区分的话,实际上这五种关系都是关联关系。
使用.. 来代替 -- 可以得到点线。
通常标记字符 (C, I, E or A) 用于标记 类(class), 接口(interface), 枚举(enum)和 抽象类(abstract class)。
依赖关系
依赖(Dependency)关系是一种弱关联关系。如果对象A用到对象B,但是和B的关系不是太明显的时候,就可以把这种关系看作是依赖关系。
依赖关系用一个带虚线的箭头表示,由使用方指向被使用方,表示使用方对象持有被使用方对象的引用。
ArtcEngine ..> Connection
关联关系
关联关系(Association)是指对象和对象之间的连接,它使一个对象知道另一个对象的属性和方法。关联关系的代码表现形式为一个对象含有另一个对象的引用。如果一个对象的类代码中,包含有另一个对象的引用,那么这两个对象之间就是关联关系。
关联关系有单向关联和双向关联。如果两个对象都知道(即可以调用)对方的公共属性和操作,那么二者就是双向关联。如果只有一个对象知道(即可以调用)另一个对象的公共属性和操作,那么就是单向关联。大多数关联都是单向关联,单向关联关系更容易建立和维护,有助于寻找可重用的类。
双向关联关系用带双箭头的实线或者无箭头的实线双线表示。
单向关联用一个带箭头的实线表示,箭头指向被关联的对象。
class ArtcEngine {
}
class Artc {
}
ArtcEngine --> Artc
聚合关系
聚合(Aggregation)是关联关系的一种特例,它体现的是整体与部分的拥有关系。此时整体与部分之间是可分离的,它们可以具有各自的生命周期,部分可以属于多个整体对象,也可以为多个整体对象共享,所以聚合关系也常称为共享关系。
聚合关系用空心菱形加实线箭头表示,空心菱形在整体一方,指向部分一方。
ArtcEngine o-- Artc
组合关系
组合(Composition)也是关联关系的一种特例,它同样体现整体与部分间的包含关系。但此时整体与部分是不可分的,部分也不能给其它整体共享,作为整体的对象负责部分的对象的生命周期。这种关系比聚合更强,也称为强聚合。
组合关系用实心菱形加实线箭头表示,实心菱形在整体一方,指向部分一方。
ArtcEngine *-- Artc
泛化关系
泛化关系(Generalization)是指类与类之间的继承关系
和类与接口之间的实现关系
。
继承关系<空心三角和实线>组成的箭头表示,从子类指向父类。
// javascript
class ConnectAPI {
}
class ArtcEngine {
}
' relationship
ConnectAPI --|> ArtcEngine
实现关系<空心三角和虚线>组成的箭头表示,从对象指向父类。
PlantUML 主题
官方主题
官方 提供 theme
也没有一个 预览的地方, 想要好看点的 theme
还要一个一个去试。
@startuml
!theme amiga // 通过替换这个值 就可以使用内置主题了
Bob -> Alice : hello
@enduml
theme value | performance | theme value | performance |
---|---|---|---|
amiga | aws-orange |
更多在官方文档中搜索 皮肤参数。
skin rose
恢复默认旧主题,红色的边框,新的主题是灰色边框。
@startuml
skin rose
@enduml
自定义主题
!define LIGHTORANGE // 更换这个值就能换 主题
!includeurl https://raw.githubusercontent.com/Drakemor/RedDress-PlantUML/master/style.puml
资源
PlantUML官网 plantuml.com/
语言指南 s.plantuml.com/PlantUMLLanguageReferenceGuideZH.pdf
无广官方PlantUML pdf.plantuml.net/PlantUML_La…