使用 ZenUML 绘制时序图

最近看到 Typora 的更新日志提到了ZenUML，想到了毕业论文写各种文档时画的图，好奇看了下相关文档。当时苦逼地用visio画各种图，现在只需要像敲代码一样就可以绘制时序图了。

ZenUML 提供了一个在线的编辑器，可以方便我们编写UML，传送门。

核心

ZenUML中有四个核心概念，只要理解了这四个核心就可以开始使用代码绘制UML了。

Participant

参与者（Participant）是时序图的对象+生命线，声明一个参与者很简单，只需要一个字符串即可声明，可以通过注解添加对象图标

A
B
@Actor C

参与者可以进行编组和重名命，重命名可以在操作时减少键盘输入

group GroupName {
  A
  B
}
C as CUser

参与者可以声明类型，使用<<>>来添加声明

<<Service>> S
<<Controller>> C

Messages

参与者之间通过箭头连接的活动就是消息（Messages），ZenUML共支持4种类型的消息，如夏下表所示

消息类型	语法	箭头
Async	A->B: Async message
Sync	A.method()
Reply	ret = A.method return ret @return A->B: message
Object creation	new ClassName()

Loops

循环控制（Loops），用于绘制循环，可以使用关键字while、for和forEach来标记循环块。

E as Employee
M as Manager

while(Monday) {
  E->M.report {
    return arrange
  }
}

Condition Definition

条件控制（Condition Definition）,通过关键字if(condition)、else if(condition)和else关键字进入条件控制块。

G as Gateway
B as BackEnd
I as IAM

if(cookie) {
  G.Get() {
    G -> B.fetch() {
      return data
    }
  }
} else {
  I.login() {

  }
}

Demo

此时我们可以来绘制一个UML了，以查询数据为例，当网关检测不到登陆态时重定向到IAM进行登陆，然后返回应用重新请求。

@Actor U as User
@GoogleSecurity G as GateWay
@GoogleIAM I as IAM
@ECS B as BackEnd
@Database D as Datbase

U -> G.getData(id) {
  return redirectIAM
}

U -> I.login(){
  D.selectUser() {
    return user
  }
  setCookie()
  return redirectAPP
}

U -> G.getData(id) {
  B.getData(id) {
    D.selectDataById(id) {
      return data
    }
    return data
  }
  return data
}

此时渲染的UML如下