那些年,我追过的绘图语言(续)
自从上一篇文章发布后,大家给我推荐了不少绘图工具,比如startUML,rose,TikZ package,flowchart.js,matlab,R等等。感兴趣的可以自行研究。至于matlab/R这样的工具,虽然强大,但跟本文讨论的画一般意义的设计图(如uml图)无关。
鉴于公众号中很多读者想进一步了解plantUML,这篇文章就多讲讲PlantUML。
plantUML支持如下UML图:
- ❏ Sequence diagram
- ❏ Usecase diagram
- ❏ Class diagram
- ❏ Activity diagram
- ❏ Component diagram
- ❏ State diagram
- ❏ Object diagram
- ❏ GUI Wireframe
这里面,我用的最多的是sequence diagram(序列图)和activity diagram(活动图),也就主要讲讲这两个图,其它的请自行阅读plantUML的文档。
Sequence diagram
sequence diagram里每个角色被称为participant,participant之间可以有message,比如这样一个最基本的序列图:
@startuml // (1)
participant Tars // (2)
actor Copper // (3)
database Murphy
Tars -> Copper // (4)
Copper --> Murphy: morse code // (5)
@enduml // (6)
- (1) 声明一个图形的起始
- (2) 声明一个participant,可以省略
- (3) 如果想使用其它图例(不是participant),则不能省略
- (4) 声明两个participants间的消息, -→ 为虚线, → 为实线
- (5) 消息可以添加说明
- (5) 声明一个图形的结束
生成出来如下图所示:
相信不用解释,大家都懂。
你可以尝试将participant换成如下图示:
- ❏ actor
- ❏ boundary
- ❏ control
- ❏ entity
- ❏ database
会有不同的效果。如果你的participant的名字很复杂,可以使用 as
起别名:
@startuml
actor "星际穿越的n<b>男主角</b>" as copper #99ff99 // (1) (2) (3)
actor "星际穿越的n男主女儿" as murphy #red
copper -[#orange]> murphy: 爱和<font color=red>引力</font>可以穿越时空 // (4) (5)
@enduml
- (1) 可以给participant起别名,别名不必和显示的字符一致
- (2) 显示的字符可以使用n等ascii控制字符,也可以使用html标签
- (3) participant可以在结尾赋一个颜色
- (4) message可以在
-
和>
间插入一个颜色,以[]
区隔 - (5) startuml支持中文,如果编译时遇到问题,请查看charset设置(设成utf-8)
生成出来的图表如下:
如果明白了这两个例子,咱们继续:
@startuml
scale 1024*768 (1)
[--> Tars: "They" provides data inside singularity (2)
activate Tars (3)
Tars -> Copper: sending data
activate Copper
Copper -> Copper: translate it to morse code (4)
activate Murphy
Copper -> Murphy: send morse code through watch
Copper -> Tars: ask for next batch
deactivate Copper (5)
Murphy -> Murphy: record and parse morse code
Murphy -->]: figured out the formula (6)
deactivate Murphy
deactivate Tars
@enduml
- (1) 我们希望生成的图片大一些
- (2)
[→
(注意中间不要有空格),传入到当前序列图的消息(participant不在该图中) - (3)(5)
activate
/deactivate
用于指定participant的lifeline - (4) participant可以发消息给自己
- (6)
→]
(中间不要有空格),传出当前序列图的消息(participant不在该图中)
生成的图表如下:
sequence diagram就讲这么多,是不是很简单?
Activity diagram
有了sequence diagram的基础,学习activity diagram易如反掌,直接上代码,不过多解释(程序猿应该对if else很熟悉了):
@startuml
scale 1024*768
start
if (exec Lazarus?) then (yes)
:find a livable planet; (*)
:save **human beings**;
else (no)
:keep adapting,
__keep farming__ and <font color=red>keep dying</font>;
endif
stop
@enduml
(*) 一个activity以 :
开始,以 ;
结束。有了sequential diagram的基础,开始写activity diagram总会忘记后面的分号。嗯,你忘呀忘呀,错呀错呀,就慢慢习惯了。
这个生成的图表如下:
来个进阶的:
@startuml
scale 512*1024
|Romilly| (1)
start
repeat (2)
:record the data from black hole;
:keep waiting;
repeat while (Copper & Brand are not back?)
|#AntiqueWhite|Copper| (3)
:enter the Endurance;
while (has more video tapes?) (4)
:watch it;
:cry;
endwhile
end
@enduml
- (1)(3) 使用
|
创建带泳道的活动图,自泳道声明以下的活动都属于该泳道,泳道可以定义颜色 - (2)(4) 两种不同的循环方式,像不像写代码?
几乎一下子就能看懂了,是不?
生成的图表如下:
继续进阶:
@startuml
scale 1024*768
start
:first planet: Miller;
fork (1)
:Romilly: stay in the Endurance;
fork again (2)
:Copper et al: go to planet Miller;
:giant wave comes;
fork
:Copper found wave, but helpless;
fork again
:Brand is racing against the wave;
fork again
:Doyle wait for Brand;
:Doyle died;
kill (3)
endfork
:they finally left the planet;
endfork (4)
@enduml
- (1)(2)(4)
fork
,fork again
,endfork
用来描述并发线程 - (3)
kill
终结一个线程,plantuml的例子中使用detach
,经测试,detach
不可用
生成的图表如下:
最后,;
作为一个活动的终止,这是最标准的图例;如果将每个活动最后的 ;
换成其它符号:|
,<
,>
,/
,}
,可以显示不同的图例。不解释,具体看下述代码和对应的图表:
@startuml
scale 2
:Ready;
:next(o)|
:Receiving;
split
:nak(i)<
:ack(o)>
split again
:ack(i)<
:next(o)
on several line|
:i := i + 1]
:ack(o)>
split again
:err(i)<
:nak(o)>
split again
:foo/
split again
:i > 5}
stop
end split
:finish;
@enduml
生成的图表:
就这些,应该够你学一阵子的啦。
- 韩政府公布虚拟货币投机行为打击对策
- SqlServer2005数据库文件损坏的拯救过程
- 2017年,人类在自己设计的所有游戏中都败给了AI,无一幸免
- 测试组,请用VSS命令行获取最新版本
- 想起温习一下JS中的this apply call arguments
- 学习利用JSON 摆脱表单与业务对象双向转换的繁琐工作
- 代码也疯狂:diagram生成流程图
- 设置你的Gravatar头像的方法
- 阅读Ext 学习Javascript(二)Core/Ext.extend 从继承说起
- IronPython资料
- WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式一)
- encodeURIcomponent编码和ASP.NET之间编码转换
- WordPress免插件仅修改代码去掉评论/留言里的链接
- 阅读Ext 学习Javascript(一)Core/Ext.js
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 小书MybatisPlus第5篇-Active Record模式精讲
- Python 语法问题-module ‘pip._internal‘ has no attribute ‘pep425tags‘. 原因及解决办法,32位、64位查看pip支持万能方法
- 总在说 Spring Boot 内置了 Tomcat 启动,那它的原理你说的清楚吗?
- JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突,双击事件触发单击事件
- Python 技术篇-sha256()加密的使用方法,sha1、md5加密方法
- Python 技术篇-如何打印一段文字,用友云霸气控制台颜文字打印
- Python 技术篇-获取秒级时间戳、毫秒级时间戳
- Python 技术篇-基于随机数的uuid码的生成
- BAT 脚本技术-利用bat批处理脚本静态指定ip地址、自动获取ip地址设置
- Oracle 技巧篇-快速批量删除当前数据库连接的用户,一键清空所有session会话方法
- Spring Security 中如何细化权限粒度?
- 小书MybatisPlus第4篇-表格分页与下拉分页查询
- 小书MybatisPlus第3篇-自定义SQL
- Nginx + Spring Boot 实现负载均衡
- 小书MybatisPlus第2篇-条件构造器的应用及总结