ZenUML

时序图是一种交互图，它展示了各个过程如何相互操作以及操作的顺序。

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

【Mermaid can render sequence diagrams with ZenUML. Note that ZenUML uses a different syntax than the original Sequence Diagram in mermaid.】

语法

【Syntax】

参与者

【Participants】

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

【The participants can be defined implicitly as in the first example on this page. The participants or actors are rendered in order of appearance in the diagram source text. Sometimes you might want to show the participants in a different order than how they appear in the first message. It is possible to specify the actor's order of appearance by doing the following:】

注释员

【Annotators】

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

【If you specifically want to use symbols instead of just rectangles with text you can do so by using the annotator syntax to declare participants as per below.】

以下是可用的标注者：

【Here are the available annotators: 】

别名

【Aliases】

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

【The participants can have a convenient identifier and a descriptive label.】

消息

【Messages】

消息可以是以下之一：

【Messages can be one of:】

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

同步消息

【Sync message】

你可以把它看作编程语言中的同步（阻塞）方法。

【You can think of a sync (blocking) method in a programming language.】

异步消息

【Async message】

你可以把编程语言中的异步（非阻塞）方法想象成这样：触发一个事件，然后不必理会它。

【You can think of an async (non-blocking) method in a programming language. Fire an event and forget about it.】

创建消息

【Creation message】

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

【We use new keyword to create an object.】

回复消息

【Reply message】

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

【There are three ways to express a reply message:】

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

【The third way @return is rarely used, but it is useful when you want to return to one level up.】

嵌套

【Nesting】

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

【Sync messages and Creation messages are naturally nestable with {}.】

注释

【Comments】

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

【It is possible to add comments to a sequence diagram with // comment syntax. Comments will be rendered above the messages or fragments. Comments on other places are ignored. Markdown is supported.】

请参见下面的示例：

【See the example below:】

循环

【Loops】

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

【It is possible to express loops in a ZenUML diagram. This is done by any of the following notations:】

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

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

请参见下面的示例：

【See the example below:】

替代

【Alt】

在时序图中可以表示备用路径。这是通过符号表示的。

【It is possible to express alternative paths in a sequence diagram. This is done by the notation】

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

请参见下面的示例：

【See the example below:】

选项

【Opt】

可以呈现一个 opt 片段。这可以通过符号表示来完成

【It is possible to render an opt fragment. This is done by the notation】

opt {
  ...statements...
}

请参见下面的示例：

【See the example below:】

平行

【Parallel】

可以显示同时发生的动作。

【It is possible to show actions that are happening in parallel.】

这是通过符号表示完成的

【This is done by the notation】

par {
  statement1
  statement2
  statement3
}

请参见下面的示例：

【See the example below:】

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

【Try/Catch/Finally (Break)】

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

【It is possible to indicate a stop of the sequence within the flow (usually used to model exceptions).】

这是通过符号表示完成的

【This is done by the notation】

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

请参见下面的示例：

【See the example below:】

与你的库/网站集成

【Integrating with your library/website.】

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

【Zenuml uses the experimental lazy loading & async rendering features which could change in the future.】

你可以使用这种方法将包括 ZenUML 图在内的 Mermaid 添加到网页中：

【You can use this method to add mermaid including the zenuml diagram to a web page:】

<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>