plantuml简介

简介

最近在学习设计模式,但是在画类图的时候,有一堆的画图工具可以选择,但总感觉用的不顺手。于是在网上找到了这个神奇的语言。PlantUML是一个开源项目,支持时序图、用例图、类图、活动图、组件图、状态图、对象图等的绘制。简而言之,就是用写代码的方式画图。几行代码,输出标准结构图,不用再去考虑结构、对齐等琐事啦!

效果预览

如下简单的语法表达类图之间的关系

1
2
3
4
5
6
7
8
@startuml
Class01 <|-- Class02
Class03 <|.. Class04
Class05 *-- Class06
Class07 o-- Class08
Class09 <.. Class10
Class11 <-- Class12
@enduml

效果如下:

再看一下复杂一点的装饰者模式类图,代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@startuml
namespace Decorator{
interface Component
interface Decorator
Component : +operation():void
ConcreateComponent : +opreation():void
Decorator : -component:Component
Decorator : +opreantion():void
ConcreateDecorator1 : +opreation():void
ConcreateDecorator1 : +addBehavior():void
ConcreateDecorator2 : +opreation():void
ConcreateDecorator2 : +addBehavior():void
Decorator <|-- ConcreateDecorator1
Decorator <|-- ConcreateDecorator2
Component <|.. Decorator
Component <|.. ConcreateComponent
Decorator o-- Component
note bottom of Decorator
component.opreation();
end note
note bottom of ConcreateDecorator1
super.operation();
addBehavior();
end note
note bottom of ConcreateDecorator2
super.operation();
addBehavior();
end note
}
@enduml

效果图:

时序图长这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@startuml
title 时序图
== 鉴权阶段 ==
Alice -> Bob: 请求
Bob -> Alice: 应答
== 数据上传 ==
Alice -> Bob: 上传数据
note left: 这是显示在左边的备注
Bob --> Canny: 转交数据
... 不超过 5 秒钟 ...
Canny --> Bob: 状态返回
note right: 这是显示在右边的备注
Bob -> Alice: 状态返回
== 状态显示 ==
Alice -> Alice: 给自己发消息
@enduml

环境配置

这里主要介绍 Mac + VS Code + Markdown Preview Enhanced 实现PlantUML预览的配置过程

Mac环境支持plantUML的markdown编译步骤

1
2
3
4
brew install libtool
brew link libtool
brew install graphviz
brew link --overwrite graphviz

如果没有gem,先安装gem。然后执行下面语句安装 asciidoctor。

1
gem install asciidoctor

安装完支持环境之后,VS Code里装上 Markdown Preview Enhanced 就可以在markdown里编辑和预览效果啦!

plantuml语法:http://plantuml.com/

目前,sublime、Atom、VS Code、Webstorm都有相对应的插件来实现在编辑器里编辑和预览plantUML。

plantuml编辑器整理

这里还有一些其他的编辑器推荐。大部分都是在线预览版本,也有编辑器插件。

1、https://www.planttext.com/
2、http://www.plantuml.com/plantuml
3、https://sujoyu.github.io/plantuml-previewer/
4、Chrome插件 UML Diagram Editor (渲染效果模糊,速度慢)
5、Intellij Idea 插件(Android Studio 当然也支持):PlantUML integration

参考