Mermaid

外觀

在 Mermaid Chart 中與隊友即時繪製圖表

類別圖 ​

「在軟體工程中，統一塑模語言 (UML) 中的類別圖是一種靜態結構圖，它透過顯示系統的類別、它們的屬性、操作 (或方法) 以及物件之間的關係來描述系統的結構。」

- 維基百科

類別圖是物件導向塑模的主要建構區塊。它用於應用程式結構的一般概念塑模，以及將模型轉換為程式碼的詳細塑模。類別圖也可用於資料塑模。類別圖中的類別代表應用程式中的主要元素、互動以及要程式化的類別。

Mermaid 可以呈現類別圖。

語法 ​

類別 ​

UML 提供機制來表示類別成員，例如屬性和方法，以及有關它們的額外資訊。圖表中的單個類別實例包含三個隔間

  • 頂部隔間包含類別的名稱。它以粗體和置中列印，並且第一個字母大寫。它也可能包含描述類別性質的選用註解文字。
  • 中間隔間包含類別的屬性。它們靠左對齊，並且第一個字母小寫。
  • 底部隔間包含類別可以執行的操作。它們也靠左對齊，並且第一個字母小寫。

定義類別 ​

有兩種定義類別的方式

  • 明確使用關鍵字 class，例如 class Animal，它將定義 Animal 類別。
  • 透過 關係，它會同時定義兩個類別及其關係。例如，Vehicle <|-- Car。

命名慣例：類別名稱應僅由字母數字字符（包括 Unicode）、底線和破折號 (-) 組成。

類別標籤 ​

如果您需要為類別提供標籤，可以使用以下語法

您也可以使用反引號來跳脫標籤中的特殊字元

定義類別成員 ​

UML 提供機制來表示類別成員，例如屬性和方法，以及有關它們的額外資訊。

Mermaid 會根據是否有 括號 () 來區分屬性和函數/方法。帶有 () 的會被視為函數/方法，而所有其他則視為屬性。

有兩種定義類別成員的方式，無論使用哪種語法來定義成員，輸出都將相同。兩種不同的方式是

  • 使用 : (冒號) 後接成員名稱來關聯類別的成員，適用於一次定義一個成員。例如
  • 使用 {} 括號來關聯類別的成員，其中成員在花括號內分組。適用於一次定義多個成員。例如

回傳類型 ​

您可以選擇性地以將回傳的資料類型結束方法/函數定義（請注意：最終的 ) 和回傳類型之間必須有一個空格）。一個範例

泛型類型 ​

泛型可以表示為類別定義的一部分，以及類別成員/回傳類型的一部分。為了將項目表示為泛型，您將該類型括在 ~ (波浪號) 內。支援 巢狀 類型宣告，例如 List<List<int>>，但目前不支援包含逗號的泛型。(例如 List<List<K, V>>)

注意 當在類別定義中使用泛型時，泛型類型不被視為類別名稱的一部分。也就是說：對於任何需要您參考類別名稱的語法，您需要刪除定義的類型部分。這也表示 mermaid 目前不支援具有相同名稱但不同泛型類型的兩個類別。

可見性 ​

若要描述屬於類別的屬性或方法/函數 (即類別成員) 的可見性 (或封裝)，可以在該成員的名稱之前放置選用符號

  • + 公開
  • - 私有
  • # 受保護
  • ~ 套件/內部

注意 您也可以透過將以下符號新增到方法的末尾，即在 () 或回傳類型之後，將其他分類器包含到方法定義中

  • * 抽象，例如：someAbstractMethod()* 或 someAbstractMethod() int*
  • $ 靜態，例如：someStaticMethod()$ 或 someStaticMethod() String$

注意 您也可以透過將以下符號新增到最後，將其他分類器包含到欄位定義中

  • $ 靜態，例如：String someField$

定義關係 ​

關係是一個通用術語，涵蓋在類別和物件圖上找到的特定類型邏輯連接。

[classA][Arrow][ClassB]

目前支援 UML 下為類別定義的八種不同類型的關係

類型描述
<|--繼承
*--組合
o--聚合
-->關聯
--連結 (實線)
..>依賴
..|>實現
..連結 (虛線)

我們可以使用標籤來描述兩個類別之間關係的性質。此外，箭頭也可以在相反方向使用

關係上的標籤 ​

可以在關係上新增標籤文字

[classA][Arrow][ClassB]:LabelText

雙向關係 ​

關係在邏輯上可以表示 N:M 關聯

以下是語法

[Relation Type][Link][Relation Type]

其中 關係類型 可以是以下之一

類型描述
<|繼承
\*組合
o聚合
>關聯
<關聯
|>實現

而 連結 可以是以下之一

類型描述
--實線
..虛線

棒棒糖介面 ​

類別也可以被賦予一個特殊的關係類型，該類型在類別上定義一個棒棒糖介面。棒棒糖介面是使用以下語法定義的

  • bar ()-- foo
  • foo --() bar

帶有棒棒糖的介面 (bar) 會連線到類別 (foo)。

注意：每個定義的介面都是唯一的，並且不應在類別之間共享/具有多個連線到它的邊緣。

定義命名空間 ​

命名空間將類別分組。

關係上的基數/多重性 ​

類別圖中的多重性或基數表示一個類別的實例可以連結到另一個類別的實例的數量。例如，每個公司都會有一名或多名員工（而不是零），而每位員工目前為零或一家公司工作。

多重性符號會放置在關聯的末端附近。

不同的基數選項為

  • 1 只有 1
  • 0..1 零或一
  • 1..* 一個或多個
  • * 多個
  • n n (其中 n>1)
  • 0..n 零到 n (其中 n>1)
  • 1..n 一到 n (其中 n>1)

可以藉由在給定的箭頭前後加上引號 " 中的文字選項，輕鬆定義基數。例如

[classA] "cardinality1" [Arrow] "cardinality2" [ClassB]:LabelText

類別上的註解 ​

可以使用標記來註解類別，以提供有關類別的其他元數據。這可以更清楚地指示其性質。一些常見的註解包括

  • <<Interface>> 表示介面類別
  • <<Abstract>> 表示抽象類別
  • <<Service>> 表示服務類別
  • <<Enumeration>> 表示列舉

註解定義在開頭的 << 和結尾的 >> 之間。有兩種方法可以將註解添加到類別，無論哪種方式，輸出都將相同

  • 在定義類別之後的單獨一行
  • 在與類別定義一起的巢狀結構中

註解 ​

可以在類別圖中輸入註解，這些註解將被解析器忽略。註解需要位於它們自己的行上，並且必須以 %%（雙百分號）開頭。直到下一個換行符號之前的所有文字都將被視為註解，包括任何類別圖語法。

設定圖表方向 ​

使用類別圖時，可以使用方向語句來設定圖表呈現的方向

互動 ​

可以將點擊事件綁定到節點。點擊可以導向 JavaScript 回呼或連結，連結將在新瀏覽器選項卡中打開。注意：當使用 securityLevel='strict' 時，此功能將被禁用；當使用 securityLevel='loose' 時，此功能將被啟用。

您會在宣告所有類別之後，在單獨的一行上定義這些動作。

action className "reference" "tooltip"
click className call callback() "tooltip"
click className href "url" "tooltip"
  • action 是 link 或 callback，具體取決於您要呼叫的互動類型
  • className 是將與動作關聯的節點 ID
  • reference 是 URL 連結或回呼的函式名稱。
  • （可選）tooltip 是滑鼠懸停在元素上時顯示的字串（注意：工具提示的樣式由類別 .mermaidTooltip 設定。）
  • 注意：回呼函式將以 nodeId 作為參數呼叫。

註記 ​

可以使用 note "line1\nline2" 在圖表上新增註記。可以使用 note for <CLASS NAME> "line1\nline2" 為特定類別新增註記。

範例 ​

URL 連結

回呼

html
<script>
  const callbackFunction = function () {
    alert('A callback was triggered');
  };
</script>

成功 工具提示功能和連結到 URL 的功能可從 0.5.2 版本開始使用。

初學者提示 - 在 HTML 頁面中使用互動式連結的完整範例

html
<body>
  <pre class="mermaid">
    classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal <|-- Zebra
    Animal : +int age
    Animal : +String gender
    Animal: +isMammal()
    Animal: +mate()
    class Duck{
      +String beakColor
      +swim()
      +quack()
      }
    class Fish{
      -int sizeInFeet
      -canEat()
      }
    class Zebra{
      +bool is_wild
      +run()
      }

      callback Duck callback "Tooltip"
      link Zebra "https://www.github.com" "This is a link"
  </pre>

  <script>
    const callback = function () {
      alert('A callback was triggered');
    };
    const config = {
      startOnLoad: true,
      securityLevel: 'loose',
    };
    mermaid.initialize(config);
  </script>
</body>

樣式設定 ​

設定節點樣式 ​

可以使用 style 關鍵字將特定的樣式（例如較粗的邊框或不同的背景顏色）應用於單個節點。

請注意，註記和命名空間無法單獨設定樣式，但支援主題。

類別 ​

定義樣式類別並將此類別附加到應具有不同外觀的節點，比每次都定義樣式更方便。

類別定義如下例所示

classDef className fill:#f9f,stroke:#333,stroke-width:4px;

此外，可以在一個語句中定義多個類別的樣式

classDef firstClassName,secondClassName font-size:12pt;

類別的節點附加按以下方式完成

cssClass "nodeId1" className;

也可以在一個語句中將類別附加到節點列表

cssClass "nodeId1,nodeId2" className;

新增類別的較短形式是使用 ::: 運算符將類別名稱附加到節點

或

預設類別 ​

如果類別命名為 default，它將應用於所有節點。應在之後定義特定樣式和類別，以覆蓋已應用的預設樣式。

classDef default fill:#f9f,stroke:#333,stroke-width:4px;

CSS 類別 ​

也可以在 CSS 樣式中預定義類別，這些類別可以從圖表定義中應用，如下例所示

範例樣式

html
<style>
  .styleClass > * > g {
    fill: #ff0000;
    stroke: #ffff00;
    stroke-width: 4px;
  }
</style>

範例定義

在使用關聯語句的同時，無法使用這種簡寫方法新增 cssClasses。

組態 ​

成員框 ​

可以隱藏類別節點的空成員框。

這是通過更改類別圖組態的 hideEmptyMembersBox 值來完成的。有關如何編輯 Mermaid 組態的更多資訊，請參閱組態頁面。