ZenUML ​

序列图是一种交互图，展示了进程如何相互操作以及操作的顺序。

Mermaid 可以使用 ZenUML 渲染序列图。请注意，ZenUML 使用的语法与 Mermaid 中的原始序列图不同。

语法 ​

参与者 ​

参与者可以像本页的第一个示例中那样隐式定义。参与者或角色按照在图表源文本中出现的顺序呈现。有时您可能希望以不同于第一条消息中出现的顺序显示参与者。可以通过以下方式指定角色的出现顺序：

注释器 ​

如果您特别想使用符号而不仅仅是带有文本的矩形，您可以通过使用注释器语法来声明参与者，如下所示。

以下是可用的注释器：

别名 ​

参与者可以拥有一个方便的标识符和一个描述性的标签。

消息 ​

消息可以是以下之一：

1. 同步消息
2. 异步消息
3. 创建消息
4. 回复消息

同步消息 ​

你可以将其视为编程语言中的同步（阻塞）方法。

异步消息 ​

你可以将其想象为编程语言中的异步（非阻塞）方法。触发一个事件然后忘记它。

创建消息 ​

我们使用new关键字来创建一个对象。

回复消息 ​

有三种方式来表达回复消息：

第三种方式 @return 很少使用，但当你想返回到上一级时它很有用。

嵌套 ​

同步消息和创建消息自然可以使用{}进行嵌套。

评论 ​

可以使用// comment语法向序列图添加注释。注释将显示在消息或片段的上方。其他位置的注释将被忽略。支持Markdown格式。

请参见以下示例：

循环 ​

可以在ZenUML图表中表达循环。这可以通过以下任何一种符号来完成：

1. while
2. for
3. forEach, foreach
4. 循环

while(condition) {
    ...statements...
}

请参见以下示例：

Alt ​

在序列图中可以表达替代路径。这是通过符号完成的

if(condition1) {
    ...statements...
} else if(condition2) {
    ...statements...
} else {
    ...statements...
}

请参见以下示例：

优化 ​

可以渲染一个opt片段。这是通过以下符号完成的

opt {
  ...statements...
}

请参见以下示例：

并行 ​

可以显示并行发生的操作。

这是通过符号完成的

par {
  statement1
  statement2
  statement3
}

请参见以下示例：

尝试/捕获/最终（中断） ​

可以在流程中指示序列的停止（通常用于模拟异常）。

这是通过符号完成的

try {
  ...statements...
} catch {
  ...statements...
} finally {
  ...statements...
}

请参见以下示例：

与您的库/网站集成。 ​

Zenuml 使用了实验性的懒加载和异步渲染功能，这些功能在未来可能会发生变化。

你可以使用这个方法将包括zenuml图在内的mermaid添加到网页中：

<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  import zenuml from 'https://cdn.jsdelivr.net/npm/@mermaid-js/mermaid-zenuml@0.1.0/dist/mermaid-zenuml.esm.min.mjs';
  await mermaid.registerExternalDiagrams([zenuml]);
</script>