跳到正文
Mernyx
打开菜单

Mermaid 时序图速查表

参与者之间的消息,按先后排在时间上。

这个页面上的每一张图都由Mernyx——macOS 上的原生 Mermaid 编辑器绘制。不是浏览器里跑的 Mermaid.js,而是 App 画布用的同一个渲染器。

参与者

声明它们来控制顺序。火柴人用 actor。

sequenceDiagram
  participant Alice
  actor Bob
  Bob->>Alice: Hi Alice
  Alice->>Bob: Hi Bob
一张时序图,Alice 是一个参与者框,Bob 是火柴人,两人交换了两条消息。放大图表

消息箭头

实心箭头是调用,开放箭头是回复,没有头的线只是注释。

sequenceDiagram
  Alice->>John: Hello John
  John-->>Alice: Hi Alice
  John-)Alice: A one-way note
两条生命线之间的三条消息:从 Alice 到 John 的实心箭头、一条回头的虚线箭头,以及一条没有箭头的线。放大图表

激活

加号在生命线上打开一条竖条,减号把它关上。这条竖条表示调用花了多久。

sequenceDiagram
  Alice->>+John: Hello
  John-->>-Alice: Hi
Alice 和 John 之间的两条消息,中间 John 的生命线上有一根细细的竖向激活条。放大图表

注释

注释挂在某个参与者上,或者横跨一段参与者浮着。

sequenceDiagram
  Alice->>John: Hello
  Note right of John: He answers later
  Note over Alice,John: A shared note
一张时序图,两个注释框,一个在 John 的生命线右边,一个横跨两条生命线。放大图表

循环

一个会重复的带标签的块。里面的东西每轮跑一次。

sequenceDiagram
  Alice->>John: Hello
  loop Every minute
    John->>Alice: Still there?
  end
一条从 Alice 到 John 的消息,然后是一个标着 Every minute 的块,里面有一条从 John 回给 Alice 的消息。放大图表

分支

alt 和 else 就是时序图里的 if/else。

sequenceDiagram
  Alice->>John: Hello
  alt John is a robot
    John-->>Alice: Beep
  else John is a human
    John-->>Alice: Hello there
  end
一条从 Alice 到 John 的消息,然后是一个 alt 块,分成两支,一支是机器人,一支是人。放大图表

给步骤编号

autonumber 给每条消息按顺序编上号。

sequenceDiagram
  autonumber
  Alice->>John: Hello
  John-->>Alice: Hi
  Alice->>John: Still there?
一张三条消息的时序图,每条消息的箭头上都带一个小小的编号徽章。放大图表

可选的步骤

opt 标出一个可能发生也可能不发生的块。

sequenceDiagram
  Alice->>John: Hello
  opt If he feels like it
    John-->>Alice: Hi
  end
一条从 Alice 到 John 的消息,然后是一个可选块,里面装着 John 的回复。放大图表

在 Mernyx 里画出来

打开一个 .mmd 文件,在画布上挪一个节点,源码跟着走。macOS 原生,不经过浏览器。

图表预览