UML

2019-09-28 阅读量

0x00 引言

UML(Unified Modeling Language)是一种统一建模语言，其优点在于可使用代码的形式快速绘制线框图。
用于绘制UML图形的语言包括Mermaid、Flow、PlantUML、yUML等，下面逐个介绍各个语言。

0x01 Mermaid

语法超级简单，支持html标签及流行的markdown，支持类图、流程图、甘特图以及时序图等。
Typora直接支持Meraid绘制。
在VSCode中配置非常方便，只需要安装Markdown Preview Enhanced插件(该插件还支持导出html与pdf)。并且支持markdown文件，方便写博客，另外hexo也支持Mermaid语法显示，以及Github官方也开始支持Mermaid语法(这意味着在Github官网也能够预览Mermaid语法绘制的图形)。

1、基础语法
下面介绍几个简单的VSCode中撰写Mermaid的语法(需要加’```mermaid’前缀)，摘自文献^[1]:

1.横向流程图:
graph LR
A[方形] -->B(圆角)
    B --> C{条件a}
    C -->|a=1| D[结果1]
    C -->|a=2| E[结果2]
    F[横向流程图]

2.竖向流程图:
graph TD
A[方形] --> B(圆角)
    B --> C{条件a}
    C --> |a=1| D[结果1]
    C --> |a=2| E[结果2]
    F[竖向流程图]

3.时序图:
sequenceDiagram
participant 张三
participant 李四
张三->王五: 王五你好吗？
loop 健康检查
    王五->王五: 与疾病战斗
end
Note right of 王五: 合理 食物 <br/>看医生...
李四-->>张三: 很好!
王五->李四: 你怎么样?
李四-->王五: 很好!

2、类图绘制
重点要学习的是类图的绘制，对于软件设计有很大帮助:

classDiagram
class 动物{
+声明
+新陈代谢()
+繁殖()
}
class 鸟{
+羽毛
+下蛋()
}
class 鸭子{
+下蛋()
}
class 大雁{
+下蛋()
+飞()
}
class 企鹅{
+下蛋()
}
class 雁群
class 唐老鸭
class 气候
class 翅膀
class 氧气
class 水
class 飞翔
class 讲话

动物 ..> 氧气 :依赖
动物 ..> 水 :依赖
鸟 --|> 动物
大雁 --|>鸟
鸭子 --|>鸟
企鹅 --|>鸟
唐老鸭 --|>鸭子
雁群 "1" o-- "n" 大雁 :聚合
企鹅 --> 气候 :关联
鸟 "1" *-- "2" 翅膀 :组合
唐老鸭 ..|>讲话
大雁 ..|> 飞翔

0x02 Flow

Flow是专门用来画标准流程图的语言，但是Mermaid实际上也能画流程图，并且从渲染上来看Mermaid更胜一筹，因此推荐使用Mermaid。
在VSCOde中使用Flow，也需要先安装Markdown Preview Enhanced插件。能直接在markdown文件中编写。

1、基础语法
在VSCode中的使用方法(需要加’```flow’前缀):

st=>start: 开始框
op=>operation: 处理框
cond=>condition: 判断框(是或否?)
sub1=>subroutine: 子流程
io=>inputoutput: 输入输出框
e=>end: 结束框
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

0x03 PlantUML

PlantUML可以很好地绘制用例图、类图、活动图、组件图、状态图、对象图、时序图，语法非常简洁。
其在VSCode中配置较麻烦(推荐在线画图并生成图片)。需要安装PlantUML插件、去graphviz官网下载其安装包以及安装JAVA。而且只支持特殊的后缀文件，如.pu / .puml。
其可绘制的图形如下(使用PlantUML思维导图绘制):

下面讲解各个图的绘制基础语法，推荐查看PlantUML官网^[2]，以及在线绘制PlantUML^[3]

1、活动图
活动图基础用法^[4]，在学习完基础用法后，实现一个复杂的活动图:

@startuml
start
#00FF00:while 0;
note left
遍历检查/proc/'PID号'
end note
repeat
    if(是否为Shell进程) then (Y)
        #A020F0:while 1;
        while (循环查看该进程fd0与fd1 ?) is (未检查完)
            if(当前fd是否重定向到socket) then (Y)
                if(socket号是否连接到外界IP) then (Y)
                    #A020F0:goto [while 1];
                    detach
                else (N)
                    #00FF00:goto [while 0];
                    detach
                endif
            else (N)
                if(当前fd是否重定向到管道) then (Y)
                    :继续检查管道对端进程当前fd的连接;
                    note left
                    对应以下四种情况分别执行
                    ====
                    * 1.连接socket未外连IP(正常)
                    * 2.连接socket且外连IP(可疑)
                    * 3.连接到管道文件(可疑)
                    * 4.连接到匿名管道(可疑)
                    end note
                    #A020F0:goto [while 1];
                    detach
                else (N)
                    #00FF00:goto [while 0];
                    detach
                endif
            endif
        endwhile (检查完)
    else (N)
        #00FF00:goto [while 0];
        detach
    endif
if(Shell进程fd0与fd1均外联?) then (Y)
    #HotPink:打日志并上报警告;
else (N)
    :结束检查该进程;
endif
repeat while (检查下一个Shell进程)
@enduml

0x04 yUML

yUML支持类图、活动图、用例图、状态图、部署图、包图以及时序图(Sequnce)。
在VSCOde中使用yUML，需要先安装yUML插件，并且其文件后缀必须为.yuml。
然而Markdown Preview Enhanced插件支持其使用时序图(Sequnce)。

1、基础语法
下面介绍几个简单的VSCode中撰写Sequnce的语法(需要加’```sequnce’前缀):

对象A->对象B: 对象B你好吗?（请求）
Note right of 对象B: 对象B的描述
Note left of 对象A: 对象A的描述(提示)
对象B-->对象A: 我很好(响应)
对象A->对象B: 你真的好吗？

0x05 参考文献

[1]https://www.runoob.com/markdown/md-advance.html
[2]https://plantuml.com/zh
[3]https://www.planttext.com
[4]https://plantuml.com/zh/activity-diagram-beta