Mermaid中文文档

Appearance

ZenUML ​

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

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

Code:
mermaid

语法 ​

参与者 ​

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

Code:
mermaid

注释器 ​

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

Code:
mermaid

以下是可用的注释器： img.png

别名 ​

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

Code:
mermaid

消息 ​

消息可以是：

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

同步消息 ​

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

Code:
mermaid

异步消息 ​

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

Code:
mermaid

创建消息 ​

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

Code:
mermaid

回复消息 ​

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

Code:
mermaid

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

Code:
mermaid

嵌套 ​

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

Code:
mermaid

注释 ​

可以使用// comment语法向序列图添加注释。注释将呈现于消息或片段之上。其他位置的注释将被忽略。支持Markdown。

请参见下面的示例：

Code:
mermaid

循环 ​

可以在ZenUML图中表达循环。这是通过以下任何一种表示法完成的：

  1. while
  2. for
  3. forEach, foreach
  4. loop
zenuml
while(condition) {
    ...statements...
}

请参见下面的示例：

Code:
mermaid

Alt ​

可以在序列图中表达备选路径。这是通过以下表示法完成的

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

请参见下面的示例：

Code:
mermaid

Opt ​

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

zenuml
opt {
  ...statements...
}

请参见下面的示例：

Code:
mermaid

并行 ​

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

这是通过以下表示法完成的

zenuml
par {
  statement1
  statement2
  statement3
}

请参见下面的示例：

Code:
mermaid

Try/Catch/Finally (Break) ​

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

这是通过以下表示法完成的

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

请参见下面的示例：

Code:
mermaid

集成到你的库/网站中 ​

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

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

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