时序图是使用 js-sequence-diagrams 插件实现的,目前使用的是1.0.4版本,时序图是以 ```seq 开头并以 ``` 结尾的代码块中。示例如下:

简单时序图

  1. Andrew->China: Says Hello
  2. Note right of China: China thinks\nabout it
  3. China-->Andrew: How are you?
  4. Andrew->>China: I am good thanks!

解析后如下:

Created with Raphaël 2.1.2AndrewAndrewChinaChinaSays HelloChina thinksabout itHow are you?I am good thanks!

演示一

  1. Title: Here is a title
  2. A->B: Normal line
  3. B-->C: Dashed line
  4. C->>D: Open arrow
  5. D-->>A: Dashed open arrow

解析后如下:

Created with Raphaël 2.1.2Here is a titleAABBCCDDNormal lineDashed lineOpen arrowDashed open arrow

演示二

  1. participant C
  2. participant B
  3. participant A
  4. Note right of A: By listing the participants\n you can change their order

解析后:

Created with Raphaël 2.1.2CCBBAABy listing the participants you can change their order

演示三

  1. # Example of a comment.
  2. Note left of A: Note to the\n left of A
  3. Note right of A: Note to the\n right of A
  4. Note over A: Note over A
  5. Note over A,B: Note over both A and B

解析后:

Created with Raphaël 2.1.2AABBNote to the left of ANote to the right of ANote over ANote over both A and B

官网文档: https://bramp.github.io/js-sequence-diagrams/