Mermaid.js
分為兩個部份：「class 定義」、「class 間的關係」。
由於 generic type 的定義哏（後敘）， 先寫「class 定義」再寫「class 間的關係」比較保險。
有兩種方式，這裡只使用
{} 的定義法：class C_NAME ~G_TYPE~ {
<<S_TEXT>>
F_TYPE F_NAME
M_NAME(M_ARGS) R_TYPE
}
C_NAME：class 名稱，case sensitiveG_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跟)之間要有空格」，實測結果是不用... :roll_eyes:
M_ARGS：method 的參數。 跟F_TYPE一樣可以加上 generic type，單純的字串處理F_TYPE、M_NAME前面可以加上符號表現 visibility，單純的字串處理visibility符號public+protected#package~private-F_NAME/M_NAME()後面可以加$表示為 staticM_NAME()後面可以加*表示為 abstract method
完整語法：
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_TEXT與CLASS_B中間需有:，文字會顯示在連接線正中間，CM_TEXT前後用"夾起，文字會顯示在靠近對應 class 的地方
Mermain 只負責畫圖，不會判斷是否符合現實 / UML 規範。 要畫出
Foo <|--|> WTF 也是可以的 💃
Last modified 8mo ago