Skip to content

Instantly share code, notes, and snippets.

@SolemnJoker
Last active June 8, 2021 02:27
Show Gist options
  • Select an option

  • Save SolemnJoker/767370b0ced9cd5a51ae7cd229ed8bb9 to your computer and use it in GitHub Desktop.

Select an option

Save SolemnJoker/767370b0ced9cd5a51ae7cd229ed8bb9 to your computer and use it in GitHub Desktop.
[vim tips]#vim

(1) 参与者

传统时序图概念中参与者有角色和类对象之分,但这里我们不做此区分,用参与者表示一切参与交互的事物,可以是人、类对象、系统等形式。中间竖直的线段从上至下表示时间的流逝。

画法:

sequenceDiagram
	participant 客户端
	participant 服务器

sequenceDiagram 为每幅时序图的固定开头
participant <参与者名称> 声明(添加)参与者。语句次序即为参与者横向排列的次序,如后续示例所示。

(2) 消息

交互时一方对另一方的操作(比如接口调用)或传递出的信息。用单向箭头来表示——实线代表主动发出消息;虚线代表响应;末尾带「X」代表异步消息,无需等待回应。

画法:

sequenceDiagram
	participant 老板L
	participant 员工A

	老板L ->> 员工A : “在这里我们是兄弟!”
	老板L -x 员工A : 画个饼
	员工A -->> 老板L : 怯怯地鼓掌

消息语句格式为:<参与者> <箭头> <参与者> : <描述文本>

其中 <箭头> 的写法有:

  • ->>:显示为实线箭头(主动发出消息)
  • -->>:显示为虚线箭头(响应)
  • -x:显示为末尾带「X」的实线箭头(异步消息)

注:participant <参与者名称> 这句其实可以省略,省略后参与者横向排列的次序,由消息语句中参与者出现的次序决定。如后续示例所示。

(3) 激活框

从消息接收方的时间线上标记一小段时间,表示对消息进行处理的时间间隔。

画法如下,注意体会箭头符号后的 +- 的使用方法和效果,它们相当于激活框的开关:

sequenceDiagram
	老板M ->> + 员工B : “不仅996,还要669!”
	员工B -->> - 老板M : 怯怯地鼓掌
	老板M ->> + 员工B : “悔创本司!”
	员工B -->> - 老板M : 怯怯地鼓掌

(4) 注解

画法:

sequenceDiagram
	Note left of 老板L : 对脸不感兴趣
	Note right of 老板M : 对钱不感兴趣
	Note over 老板L,老板M : 对996感兴趣

(5) 循环(loop)

在条件满足时,重复发出消息序列。(相当于编程语言中的 while 语句。)

画法:

sequenceDiagram
	网友 ->> + X宝 : 网购钟意的商品
	X宝 -->> - 网友 : 下单成功
	
	loop 一天七次
		网友 ->> + X宝 : 查看配送进度
		X宝 -->> - 网友 : 配送中
	end

(6) 选择(alt)

在多个条件中作出判断,每个条件将对应不同的消息序列。(相当于 if 及 else if 语句。)

画法:

sequenceDiagram
	土豪 ->> 取款机 : 查询余额
	取款机 -->> 土豪 : 余额
	
	alt 余额 > 5000
		土豪 ->> 取款机 : 取上限值 5000 块
	else 100 < 余额 < 5000
		土豪 ->> 取款机 : 有多少取多少
	else 余额 < 100
		土豪 ->> 取款机 : 退卡
	end
	
	取款机 -->> 土豪 : 退卡	

(7) 可选(opt)

在某条件满足时执行消息序列,否则不执行。相当于单个分支的 if 语句。

画法:

sequenceDiagram
	老板们 ->> 员工们 : 开始实行996
	
	opt 永不可能
		员工们 -->> 老板们 : 拒绝
	end

(8) 并行(Par)

将消息序列分成多个片段,这些片段并行执行。

画法:

sequenceDiagram
老板C ->> 员工C : 开始实行996

par 并行
	员工C ->> 员工C : 刷微博
and
	员工C ->> 员工C : 工作
and
	员工C ->> 员工C : 刷朋友圈
end

员工C -->> 老板C : 9点下班

用代码画时序图的方法就是这些,内容很简单,却能满足大多数时候的需求。不妨找几个实际例子练练手,加深下印象。

相关阅读:

起始代码

每次作图时,代码以 graph <布局方向> 开头,如:

graph TB    ...    ...

TB(Top Bottom)表示从上向下布局,另外三种是 

  • BT

  • LR(Left Right)

  • RL

节点的画法

接下来,来画之前介绍过的四种节点(圆形、矩形、菱形、圆形)。四种节点对应四行代码,请仔细观察代码差异,并与对应的节点相比较。

graph TB   
	A(开始)
	B[打开冰箱门]  
	C{"冰箱小不小?"}   
	D((连接))

看出玄机了吗?其实很简单,就是

  • 不同种类的括号对应不同的节点图形

  • 括号中的文字就是显示在节点中的描述

  • A``B``C``D 这些字符是为节点取的名字,这个名字可以在之后反复利用(在编程里这相当于定义变量)

线段的画法

前面是节点的画法,再来看下线段的画法。线段用于连接节点,所以请结合刚才所学的节点一同来看:

graph TB    
A[把大象放进去] --> B{"冰箱小不小?"}   
B -->|不小| C[把冰箱门关上]   
B -->|小| D[换个大冰箱]

是不是又发现了玄机!

上述 -->是带箭头线段,-->|不小| 和 -->|小| 是加了描述文字的带箭头线段。它们都位于两个节点之间。

好了,要学的内容就是这些,意不意外!东西不多也不复杂,只要根据图案联想记忆即可。稍加练习后便能运用自如。

额外提示

  • 上一个代码示例中,B{"冰箱小不小?"} 这里的描述文字加了引号,是因为其中包含特殊字符 ,用引号包裹防止出错

  • 为节点取名为 A``B``C 不太合适,因为节点很多时容易产生混淆,不方便后续使用和阅读(编程时命名的重要性)。建议起有意义的名字

  • 除上述带箭头线段 --> 外,还有带箭头虚线线段 -.->、带箭头加粗线段 ==>、不带箭头线段 ---

完整示例

完成了上面的教程后,来看个完整例子体会下:

graph TB    
Start(开始) --> Open[打开冰箱门]    
Open --> Put[把大象放进去]    
Put[把大象放进去] --> IsFit{"冰箱小不小?"}    
IsFit -->|不小| Close[把冰箱门关上]   
Close --> End(结束)    
IsFit -->|小| Change[换个大冰箱]   
Change --> Open

花式用法

当然,节点和线段的表现力可以很丰富,不仅限于用于流程图,你也可以借助它们来表现其它内容。如下面是火锅冒菜麻辣烫的关系图!

时序图

流程图

流程图方向

  • TB 从上到下
  • BT 从下到上
  • RL 从右到左
  • LR 从左到右
  • TD 同TB

示例

  • 从上到下
graph TD
 A --> B
Loading
  • 从左到右
graph LR
    A --> B
Loading
  • 基本图形
graph TD
    id[带文本的矩形]
    id4(带文本的圆角矩形)
    id3>带文本的不对称的矩形]
    id1{带文本的菱形}
    id2((带文本的圆形))
Loading
  • 节点之间连接
A --> B A带箭头指向B
A --- B A不带箭头指向B
A -.- B A用虚线指向B
A -.-> B A用带箭头的虚线指向B
A ==> B A用加粗的箭头指向B
A -- 描述 --- B A不带箭头指向B并在中间加上文字描述
A -- 描述 --> B A带箭头指向B并在中间加上文字描述
A -. 描述 .-> B A用带箭头的虚线指向B并在中间加上文字描述
A == 描述 ==> B A用加粗的箭头指向B并在中间加上文字描述
Loading
  • 子流程图
subgraph title
    graph definition
end

示例

graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
Loading

自定义样式

graph LR
    id1(Start)-->id2(Stop)
    style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
    style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5
Loading

在.vimrc中添加以下代码后,重启vim即可实现按TAB产生4个空格:

set ts=4 (注:ts是tabstop的缩写,设TAB宽4个空格)
set expandtab

对于已保存的文件,可以使用下面的方法进行空格和TAB的替换: TAB替换为空格:

:set ts=4
:set expandtab
:%retab!

空格替换为TAB:

:set ts=4
:set noexpandtab
:%retab!

加!是用于处理非空白字符之后的TAB,即所有的TAB,若不加!,则只处理行首的TAB。

set shiftwidth=4
set expandtab
set softtabstop=4
  • 删除包含指定字符的行 :g/<内容>/d
"Hello world!" --[cs"']--> 'Hello world!'
'Hello world!' --[cs'<q>]--> <q>Hello world!</q>
<q>Hello world!</q> --[cst"]--> "Hello world!" 这里的t标识标签<q></q>
"Hello world!" --[ds"']--> Hello world!
Hello world! --[ysiw]]--> [Hello] world!
Hello world! --[yss)]--> (Hello world!) 整行
Hello world! (visaul mode选择Hello) --[S']--> 'Hello' world!

删除重复行(先排一下序):

:sort
:g/^\(.\+\)$\n\1/d
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment