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

简单时序图

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

解析后如下:

AndrewChinaSays HelloChina thinks aboutitHow are you?I am good thanks!AndrewChinaHere is a title

演示一

Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

解析后如下:

ABCDNormal lineDashed lineOpen arrowDashed open arrowABCDHere is a title

演示二

participant C
participant B
participant A
Note right of A: By listing the participants\n you can change their order

解析后:

CBABy listing theparticipants youcan change theirorderCBAHere is a title

演示三

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

解析后:

ABNote to the left ofANote to the rightof ANote over ANote over both A and BABHere is a title

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

文档更新时间: 2026-03-13 21:54   作者:admin