PlantUml时序图入门示例

入职新公司之后,写程序文档空前多了起来,画时序图是基本要求。

用vscode里的PlantUml插件可以画时序图,PlantUml官网:https://plantuml.com/zh/

plantuml官网

图中可以看到,除了时序图,这个uml工具还可以画好多图,这里只记录下时序图的常用用法,其他需要的时候再学习一下。

首先去vscode下载plantuml插件


plantuml插件

然后新建一个后缀名为puml或者pu的文件
用vscode打开就可以直接画图了。
一般格式为下面这样

@startuml
skinparam SequenceGroupBodyBackGroundColor transparent
title  I'm title
actor User order 1
box "Offboard App" #ffff99
participant "smartphone app" as app order 2
end box
participant "platform" as pf order 3
participant "background management" as bm order 4
actor Admin order 5

autonumber
==create activity==
Admin -[#blue]>bm:Admin input the activity through the bm
activate bm
bm->pf:Request upload activity (picture or video) (activityInfo,uid)
activate pf
pf-->bm:Response return the save result and status 
deactivate pf
bm -[#blue]-> Admin:Show the result to admin
deactivate bm

== read activity==
group job

User -[#blue]> app:User open the activity's page
activate app
app->pf:Request get the activity
activate pf
pf-->app:Response the result 
deactivate pf
app -[#blue]-> User:Show the activity to User

end
@enduml

上面写了一个小例子,在vscode中编辑完之后,alt+D就可以预览出图效果,
按shift+ctrl+p 就可以调出导出图片


plantuml导出图片

用鼠标点击第一个,右下角会出现review的提示,点击可以显示导出图片的路径,这里可以选择png,svg等多种导出格式。
alt+D运行效果图:


plantuml预览效果图

案例中@startuml和@enduml是固定格式,表示开始和结束,title关键词 可以给时序图设置一个标题,actor 关键词 是定义一个小人,participant 关键词定义一个框框,可以用as给框框起别名,order表示框框的顺序,可以把一个或者多个框框用box框起来,设置skinparam SequenceGroupBodyBackGroundColor transparent从而不会被上一层遮住。
==xx==表示分隔线,->表示实线箭头,-->表示虚线箭头,[#blue] 可以设置颜色,不设置默认是红色,activate 表示一个生命周期的开始,deactivate 表示一个生命周期的结束,group xx和end是一个固定格式,表示框出一段过程,并为这个过程起名。

这个案例虽然看起来很简单,但是已经涵盖了通常用到的场景,可以表达出各种各样的业务代码场景,因为平时还是敲代码多,所以时序图只起辅助作用,学习动力不太大,以后用的多了再深入学习一下,暂时这些就已经很够用了,没错,示例就是这么朴实无华且枯燥~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,904评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,581评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,527评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,463评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,546评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,572评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,582评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,330评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,776评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,087评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,257评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,923评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,571评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,192评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,436评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,145评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,127评论 2 352

推荐阅读更多精彩内容