时序图画法

typora 画时序图

本地上可以使用 typora, typora 是一个 markdown 软件. typora.io

typora 简单语法 Draw-Diagrams-With-Markdown

typora 画时序图时机上使用的是 mermaid，一个 js 引擎。meramaid 高级语法 https://mermaid-js.github.io/mermaid/#/sequenceDiagram

->>是实线

-->>是虚线

+是箭头，灰色长条 表示个一个过程

举例：

```mermaid
sequenceDiagram
    Alice->>+John: Hello John, how are you?
    Alice->>+John: John, can you hear me?
    John-->>-Alice: Hi Alice, I can hear you!
    John-->>-Alice: I feel great!
```

可以别名

```mermaid
    participant J as John
    participant A as Alice
    A->>+J: Hello John, how are you?
    A->>+J: John, can you hear me?
    J-->>-A: Hi Alice, I can hear you!
    J-->>-A: I feel great!
```

复杂一点的

sequenceDiagram
 Title: md时序图练习

 participant 客户端
 participant 控制器
 participant 业务
 participant 数据库

 客户端->>数据库:提交数据店铺
 Note right of 客户端:提交数据进行验证
 控制器->>控制器:验证数据完整性
 Note left of 控制器:返回错误的字段信息
 控制器-->>客户端:数据不完整
 Note over 客户端: 用户输入通行证的账号、密码
 控制器->>业务:保存店铺到数据库
 业务->>业务:save店铺数据
 业务-->>控制器:保存出现异常
 控制器-->>客户端:保存成功
 数据库-->>业务:success
 业务-->>控制器:success
 控制器-->>客户端:success 客户端

效果图:

Draw.io 人工拖拽画时序图

draw.io

vscode有插件，新建后缀.drawio就行。

可以导入mermaid的时序图，但是不能修改，只能当做一个图标。

好处在于，可以导入文本，创建ER图时十分方便。

Person
-name: String
-birthDate: Date
--
+getName(): String
+setName(String): void
+isBirthday(): boolean

Address
-street: String
-city: String
-state: String

plantUML 画时序图

可以用vscode插件PlantUML

• 创建文件a.plantuml 注意后缀

• mac本地需安装

• brew install --cask temurin
  brew install graphviz
  

• Mac: option+D 快捷键预览

@startuml
control a as "X"
participant c as "Client"
participant s as "Server"
a -> c: 例子1
activate c

c -> s: fetch
activate s

c -> c: render

s --> c: callback
deactivate s

c -> c: render
return "ebd"
deactivate c

@enduml

• participant可以重命名

• return是虚线

• activate和deactivate应该成对出现，表示一个竖条。有了return会自动deactivate，所以deactivate可以用return替代，return的是虚线而不是实线。下面的就会在b上有长条了。

• a->b: xxx
  activate b
  return "xxx"