ZenUML

时序图是一种交互图，显示进程如何彼此运行以及以什么顺序运行。

¥A Sequence diagram is an interaction diagram that shows how processes operate with one another and in what order.

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. 同步消息

   ¥Sync message

2. 异步消息

   ¥Async message

3. 创建消息

   ¥Creation message

4. 响应消息

   ¥Reply message

同步消息

¥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. loop

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（中断）

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