Skip to main content

小书匠语法说明之序列图

概述

序列图使用 js-sequence-diagrams 插件实现。

使用

元数据: grammar_sequence

想要使用该语法,需要在设置>扩展语法 里把序列图选项打开。或者在每篇文章的元数据里通过 grammar_sequence 进行控制。

该语法支持两种主题, simplehand 。 可以通过全局设置里进行设置,也可以在每个代码块的查询参数里控制。系统默认使用 hand 主题。

示例

  1. 1```sequence! 
  2. 2小明->小李: 你好 小李, 最近怎么样? 
  3. 3Note right of 小李: 小李想了想 
  4. 4小李-->小明: 还是老样子 
  5. 5``` 

使用 simple 主题的序列图

  1. 1```sequence!?theme=simple 
  2. 2小明->小李: 你好 小李, 最近怎么样? 
  3. 3Note right of 小李: 小李想了想 
  4. 4小李-->小明: 还是老样子 
  5. 5``` 

效果

小明小明小李小李你好 小李, 最近怎么样?小李想了想还是老样子

使用 simple 主题的序列图

小明小明小李小李你好 小李, 最近怎么样?小李想了想还是老样子

序列图

语法

序列语法图

序列语法图

序列图提供的几种连线

  1. 1``` sequence! 
  2. 2Title: 几种不同风格的连线 
  3. 3A->B: 实体箭头实体线 
  4. 4B-->C: 实体箭头虚线 
  5. 5C->>D: 空心箭头实体线 
  6. 6D-->>A: 空心箭头虚线 
  7. 7``` 
几种不同风格的连线几种不同风格的连线AABBCCDD实体箭头实体线实体箭头虚线空心箭头实体线空心箭头虚线

标注的几种不同位置

  1. 1``` sequence! 
  2. 2Note left of A: 居左标注 
  3. 3Note right of A: 居右标注 
  4. 4Note over A: 横跨单个结点的标注 
  5. 5Note over A,B: 横跨两个结点的标注 
  6. 6Note over A,B,C: 支持换行的标注 
  7. 7``` 
AABBCC居左标注居右标注横跨单个结点的标注横跨两个结点的标注标注内容折行

修改参考者的顺序

  1. 1``` sequence! 
  2. 2participant C 
  3. 3participant B 
  4. 4participant A 
  5. 5Note right of A: 通过对 participants 的顺序调整\n 改变序列图显示的顺序 
  6. 6``` 
CCBBAA通过对 participants 的顺序调整改变序列图显示的顺序

疑问

相关

  1. js-sequence-diagrams 序列图官网
  2. https://github.com/bramp/js-sequence-diagrams/blob/master/src/grammar.jison