Mermaid

外觀

在 Mermaid Chart 中使用視覺化編輯器來設計和建立圖表

ZenUML ​

循序圖是一種互動圖，顯示流程如何彼此互動以及依循的順序。

Mermaid 可以使用 ZenUML 渲染循序圖。請注意，ZenUML 使用與 mermaid 中原始循序圖不同的語法。

語法 ​

參與者 ​

參與者可以像本頁的第一個範例中那樣隱式定義。參與者或角色會按照圖表來源文字中出現的順序渲染。有時您可能希望以與他們在第一個訊息中出現的順序不同的順序顯示參與者。可以透過執行以下操作來指定角色出現的順序

註解器 ​

如果您特別想要使用符號而不是僅僅使用帶有文字的矩形，您可以透過使用註解器語法來宣告參與者，如下所示。

以下是可用的註解器： img.png

別名 ​

參與者可以有方便的識別碼和描述性標籤。

訊息 ​

訊息可以是以下其中一種

  1. 同步訊息
  2. 非同步訊息
  3. 建立訊息
  4. 回覆訊息

同步訊息 ​

您可以將同步（阻塞）方法視為程式語言中的同步方法。

非同步訊息 ​

您可以將非同步（非阻塞）方法視為程式語言中的非同步方法。觸發事件並忘記它。

建立訊息 ​

我們使用 new 關鍵字來建立物件。

回覆訊息 ​

有三種方式可以表達回覆訊息

第三種方式 @return 很少使用，但當您想要返回上一層時很有用。

巢狀結構 ​

同步訊息和建立訊息自然可以使用 {} 進行巢狀結構。

註解 ​

可以使用 // comment 語法將註解新增至循序圖。註解會渲染在訊息或片段上方。其他位置的註解將會被忽略。支援 Markdown。

請參閱以下範例

迴圈 ​

可以在 ZenUML 圖表中表達迴圈。這可以透過以下任何一種表示法來完成

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

請參閱以下範例

Alt ​

可以在循序圖中表達替代路徑。這可以透過以下表示法來完成

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

請參閱以下範例

Opt ​

可以渲染 opt 片段。這可以透過以下表示法來完成

zenuml
opt {
  ...statements...
}

請參閱以下範例

平行 ​

可以顯示平行發生的動作。

這可以透過以下表示法來完成

zenuml
par {
  statement1
  statement2
  statement3
}

請參閱以下範例

Try/Catch/Finally (中斷) ​

可以指示流程中循序的中斷（通常用於建模例外狀況）。

這可以透過以下表示法來完成

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

請參閱以下範例

與您的程式庫/網站整合。 ​

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>