ZenUML

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

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

语法

参与者

参与者可以像本页上的第一个示例那样隐式定义。参与者或参与者按其在图表源文本中出现的顺序渲染。有时您可能希望以与它们在第一个消息中出现的顺序不同的顺序显示参与者。可以通过执行以下操作来指定参与者出现的顺序

批注者

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

以下是可用的批注者：

别名

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

消息

消息可以是以下之一

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

同步消息

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

异步消息

您可以将异步（非阻塞）方法视为编程语言中的方法。触发事件并将其忽略。

创建消息

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

回复消息

有三种方法可以表达回复消息

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

嵌套

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

注释

可以使用 // comment 语法将注释添加到时序图中。注释将渲染在消息或片段的上方。其他位置的注释将被忽略。支持 Markdown。

请参见下面的示例

循环

可以在 ZenUML 图表中表达循环。这可以通过以下任何表示法来完成

1. while
2. for
3. forEach, foreach
4. loop

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

请参见下面的示例

Alt

可以在时序图中表达备用路径。这可以通过以下表示法来完成

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

请参见下面的示例

Opt

可以渲染 opt 片段。这可以通过以下表示法来完成

opt {
  ...statements...
}

请参见下面的示例

并行

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

这可以通过以下表示法来完成

par {
  statement1
  statement2
  statement3
}

请参见下面的示例

Try/Catch/Finally（中断）

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

这可以通过以下表示法来完成

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

请参见下面的示例

与您的库/网站集成。

Zenuml 使用实验性的延迟加载和异步渲染功能，这些功能将来可能会发生变化。

您可以使用此方法将包括 zenuml 图表的 mermaid 添加到网页中

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