时序图(Sequence Diagram),又名序列图、循序图,是一种UML交互图。它通过描述对象之间发送消息的时间顺序显示多个对象之间的动态协作。— — 百度百科

时序图可以作为一个markdown扩展插件,常见的时序图有PlantUML、js-sequence等,并不是所有的Markdown编辑器都支持时序图,各个编辑器语法存在细微差异。开发者目录的时序图渲染引擎是js-sequence1

示例

# 这是注释
title: 这是标题
A->B: 正常的线
B-->C: 虚线
C->>D: 开口箭头
D-->>A: 虚线开口箭头
# 这是注释
title: 这是标题
A->B: 正常的线
B-->C: 虚线
C->>D: 开口箭头
D-->>A: 虚线开口箭头
participant C
participant B
participant A
Note right of A: 列举参与者\n 你可以修改它们的顺序
participant C
participant B
participant A
Note right of A: 列举参与者\n 你可以修改它们的顺序

语法

  • 主要关键词:
    • title:定义时序图的标题
    • participant:定义时序图中的对象
    • note:定义时序图中的备注说明
  • note的方位控制:
    • left of:表示当前对象的左侧
    • right of:表示当前对象的右侧
    • over:在当前对象的上面
  • 对象箭头标识符:
    • ->: 表示实线实箭头
    • -->: 表示虚线实箭头
    • ->>: 表示实线虚箭头
    • -->>:表示虚线虚箭头

下面这张图展示了 js-sequence-diagrams 的语法。有兴趣可以点击查看它的bison语法描述

js-sequence-diagrams 语法


  1. js-sequence-diagrams 是一个简单的用 javascript 编写的库,用来将文本转换为 UML 时序图。