简介

画图工具粗分起来就两种：

  1. 拖拽式
  2. 代码式

拖拽式的长处：所见即所得，能够较为精细的操控元素。缺点：画图花的时刻较长，画完后改动比较费事，很难统一款式。

代码式的长处：画图花的时刻较少，画完后改动比较简单，款式很统一。缺点：在于不能依据自己的喜好随意拖拽方向，不能较为精细的操控元素。

拖拽式

  • Visual Paradigm：这个软件在公司内部是有购买的，直接下载就能够运用，包括了所有UML图，特别强壮的一款软件。它还有web版能够直接在线修改，不过速度有点慢。
  • Process On：包括了大部分通用的UML图，不过可选图形不多，样子一般，能够凑活运用。
  • StartUML：这款软件功能强壮， 供给了许多的款式、图形，对中文的支持也很好，引荐运用。官网地址：staruml.sourceforge.net/en/，下载地址：sourceforge.net/projects/st…

代码式

  • Mermaid：直接在修改器装个插件就能够用了，不过便是它默许的款式（巨细）不是特别美观。
  • PlantUML：这款软件是我最引荐的，款式好看，语法简洁，引荐指数满分。

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 装置。

30分钟就会 UML画图工具和方法

修改文件

新建文件测试：test.wsd，或许 .pu 结尾，

输入以下内容：

@startuml
用户 -> 认证中心: 登录操作
认证中心 -> 缓存: 存放(key=token+ip,value=token)token
用户 <- 认证中心 : 认证成功回来token
用户 -> 认证中心: 下次拜访头部带着token认证
认证中心 <- 缓存: key=token+ip获取token
其他服务 <- 认证中心: 存在且校验成功则跳转到用户恳求的其他服务
其他服务 -> 用户: 信息
@enduml

@startuml @enduml 开始结束的标志，在@startuml和@enduml之间是绘图的脚本。

生成图表

右键预览

30分钟就会 UML画图工具和方法

导出图表

导出在本目录下 out 文件夹下。

30分钟就会 UML画图工具和方法

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

30分钟就会 UML画图工具和方法

分隔符 == ==

运用 == 关键词来将你的图表分割成多个逻辑过程。

@startuml
== 初始化 ==
Alice -> Bob: 认证恳求
Bob --> Alice: 认证呼应
== 重复 ==
Alice -> Bob: 认证恳求
Alice <-- Bob: 认证呼应
@enduml

30分钟就会 UML画图工具和方法

延迟 … 或许 … 5分钟 …

@startuml
Alice -> Bob: 认证恳求
...
Bob --> Alice: 认证呼应
...5分钟后...
Bob --> Alice: 再会！
@enduml

30分钟就会 UML画图工具和方法

生命线的激活与撤销 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

30分钟就会 UML画图工具和方法

文本换行 \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

30分钟就会 UML画图工具和方法

包裹参与者 box end box 

@startuml
box "Internal Service" #LightBlue
participant Bob
participant Alice
end box
participant Other
Bob -> Alice : hello
Alice -> Other : hello
@enduml

30分钟就会 UML画图工具和方法

类图

类图是UML图中最重要的几个图之一，它对我们梳理一个框架、表现承继笼统联系时尤为重要。一个好的类图能让人不必看代码就知道了作者的规划思路，运用的规划模式跃然纸上。

类图主要是用来显示体系中的类、接口以及它们之间的静态结构和联系的一种静态模型。

类图中详细类、笼统、接口和包的表明法

在UML类图中详细类、笼统类、接口和包有不同的表明办法。

表明详细类

详细类在类图顶用矩形框表明，关键字 class

  1. 第一层是类名字
  2. 第二层是类的成员变量
  3. 第三层是类的办法。

成员变量以及办法前的拜访修饰符用符号来表明：

  • “+”表明public；
  • “-”表明private；
  • “#”表明protected；
  • 不带符号表明default。

30分钟就会 UML画图工具和方法

// javascript
class Emitter {
  onlyRunFirstListener
  # eventCollection
  - private option
  + on() {} 
  - once() {}
}

30分钟就会 UML画图工具和方法

表明笼统类

笼统类在UML类图中相同用矩形框表明，关键字 abstract

abstract class AbstractList {
  eventCollection
  on() {}
}

30分钟就会 UML画图工具和方法

表明接口

接口在类图中也是用矩形框表明，关键字 interface

  1. 第一层是接口名字
  2. 第二层是接口的成员变量
  3. 第三层是接口的办法。
interface ArtcEngineOptions {
  eventCollection
  on() {} 
}

30分钟就会 UML画图工具和方法

表明包

你能够经过关键词 package 声明包，一起可选的来声明对应的背景色（经过运用 html 色彩代码或称号）。

package "Classic Collections" #DDDDDD {
  Object <|-- ArrayList
}
package net.sourceforge.plantuml {
  Object <|-- Demo1
  Demo1 *- Demo2
}

30分钟就会 UML画图工具和方法

类图中表明联系

类和类、类和接口、接口和接口之间存在必定联系，UML类图中一般会有连线指明它们之间的联系。联系共有六种类型，分别是泛化联系、相相联系、依靠联系、聚合联系、组合联系，5种联系。

依靠、相关、聚合、组合与泛化代表类与类之间的耦合度依次递加。依靠联系实际上是一种比较弱的相关，聚合是一种比较强的相关，组合是一种更强的相关，泛化则是一种最强的相关，所以笼统的来区分的话，实际上这五种联系都是相相联系。

30分钟就会 UML画图工具和方法

运用.. 来替代 — 能够得到点线。

一般符号字符 (C, I, E or A) 用于符号 类(class), 接口（interface）, 枚举（enum）和 笼统类（abstract class）。

30分钟就会 UML画图工具和方法

依靠联系

依靠（Dependency）联系是一种弱相相联系。假如目标A用到目标B，但是和B的联系不是太显着的时候，就能够把这种联系看作是依靠联系。

依靠联系用一个带虚线的箭头表明，由运用方指向被运用方，表明运用方目标持有被运用方目标的引证。

ArtcEngine ..> Connection

30分钟就会 UML画图工具和方法

相相联系

相相联系（Association）是指目标和目标之间的连接，它使一个目标知道另一个目标的特点和办法。相相联系的代码表现形式为一个目标含有另一个目标的引证。假如一个目标的类代码中，包括有另一个目标的引证，那么这两个目标之间便是相相联系。

相相联系有单向相关和双向相关。假如两个目标都知道（即能够调用）对方的公共特点和操作，那么二者便是双向相关。假如只有一个目标知道（即能够调用）另一个目标的公共特点和操作，那么便是单向相关。大多数相关都是单向相关，单向相相联系更简单建立和保护，有助于寻找可重用的类。

双向相相联系用带双箭头的实线或许无箭头的实线双线表明。

单向相关用一个带箭头的实线表明，箭头指向被相关的目标。

class ArtcEngine {
}
class Artc {
}
ArtcEngine --> Artc

30分钟就会 UML画图工具和方法

聚合联系

聚合（Aggregation）是相相联系的一种特例，它体现的是全体与部分的拥有联系。此刻全体与部分之间是可分离的，它们能够具有各自的生命周期，部分能够归于多个全体目标，也能够为多个全体目标共享，所以聚合联系也常称为共享联系。

聚合联系用空心菱形加实线箭头表明，空心菱形在全体一方，指向部分一方。

ArtcEngine o-- Artc

30分钟就会 UML画图工具和方法

组合联系

组合（Composition）也是相相联系的一种特例，它相同体现全体与部分间的包括联系。但此刻全体与部分是不可分的，部分也不能给其它全体共享，作为全体的目标担任部分的目标的生命周期。这种联系比聚合更强，也称为强聚合。

组合联系用实心菱形加实线箭头表明，实心菱形在全体一方，指向部分一方。

ArtcEngine *-- Artc

30分钟就会 UML画图工具和方法

泛化联系

泛化联系（Generalization）是指类与类之间的承继联系和类与接口之间的完成联系。

承继联系<空心三角和实线>组成的箭头表明，从子类指向父类。

// javascript
class ConnectAPI {
}
class ArtcEngine {
}
' relationship
ConnectAPI --|> ArtcEngine

30分钟就会 UML画图工具和方法

完成联系<空心三角和虚线>组成的箭头表明，从目标指向父类。

PlantUML 主题

官方主题

官方 供给theme也没有一个 预览的当地, 想要好亮点的theme还要一个一个去试。

@startuml
!theme amiga // 经过替换这个值 就能够运用内置主题了
Bob -> Alice : hello
@enduml
theme value performance theme value performance
amiga
30分钟就会 UML画图工具和方法
 aws-orange
30分钟就会 UML画图工具和方法

更多在官方文档中查找 皮肤参数。

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…