2022年2月19日 星期六

Mermaid.js Class Diagram 語法重點

備註:若後續有改動,此文件不會再更新,請改參考此文件

分為兩個部份:「class 定義」、「class 間的關係」。

由於 generic type 的定義哏(後敘),
先寫「class 定義」再寫「class 間的關係」比較保險。

class 定義

有兩種方式,這裡只使用 {} 的定義法:

class C_NAME ~G_TYPE~ {
    <<S_TEXT>>
	F_TYPE F_NAME
	M_NAME(M_ARGS) R_TYPE
}
  • C_NAME:class 名稱,case sensitive

  • G_TYPE:generic type,前後用 ~ 夾起,

    • 只有 class 第一次出現時要加、也只有第一次出現時加才有用
    • 多個 type 用 , 分隔(單純的字串處理)
    • 不支援 nested type(generic type 裡頭還有 generic type)
    • 忽略跟 C_NAME 之間的空格
  • S_TEXT:class 的 stereotype(官方用「annotation」),
    前後用 << / >> 夾起,單純的字串處理

    • 可以寫多個,但是只有第一個會顯示
    • 可以不用寫在 class 定義的第一行
  • F_NAME / M_NAME():field / method 的名稱

    • 每行第一個字串如果有 () 就是 method,沒有就是 field
  • F_TYPE / R_TYPE:field 的 type / method 的 return type

    • 可以加上 generic type,一樣用 ~ 夾起,
      但是 不會 忽略 跟 *_TYPE 之間的空格,
      不會 跟 diagram 的 class 定義有關聯,
      單純的字串處理。
    • R_TYPE 可不寫
    • 官方文件寫「R_TYPE) 之間要有空格」,實測結果是不用… 🙄
  • M_ARGS:method 的參數。
    F_TYPE 一樣可以加上 generic type,單純的字串處理

  • F_TYPEM_NAME 前面可以加上符號表現 visibility,單純的字串處理

    visibility 符號
    public +
    protected #
    package ~
    private -
  • F_NAME / M_NAME()後面可以加 $ 表示為 static

  • M_NAME() 後面可以加 * 表示為 abstract method

class 間的關係

完整語法:

CLASS_A "CM_TEXT" A_TYPE LINK A_TYPE "CM_TEXT" CLASS_B : L_TEXT
  • CLASS_A / CLASS_B:class 名稱,case sensitive

    • 如果給沒定義過的 class 就會視同定義一個新的 class
      (下接 generic type 哏)
    • CLASS_A / CLASS_B 可以相同
    • 畫成圖形時,CLASS_A 會在 CLASS_B 的上方
  • A_TYPE:端點類型(可以沒有)

    端點類型 符號
    實心三角 <| 或 |>
    實心菱形 *
    空心菱形 o
    箭頭 < 或 >
    • 對,沒有 空心三角形
  • LINK:線條樣式,限定只能兩個字元

    端點類型 符號
    實線
    虛線
  • CM_TEXT / L_TEXT:寫在連接線上的文字(可以沒有),單純的字串處理。

    • L_TEXTCLASS_B 中間需有 :,文字會顯示在連接線正中間,
    • CM_TEXT 前後用 " 夾起,文字會顯示在靠近對應 class 的地方

注意事項

Mermain 只負責畫圖,不會判斷是否符合現實 / UML 規範。
要畫出 Foo <|--|> WTF 也是可以的 💃

沒有留言:

張貼留言