PlantUML使い向け、Mermaid記法も覚えてGitHub等で書こう クラス図編

概要

テキストでUMLの図を書けるPlantUMLを知っているでしょうか？便利ですよね。

しかし、GitHubやNotionなどが対応しているのは、もっと軽量なMermaidです。こちらも書けるようにしておかないと、issueなどを書く時に困ってしまいます。

フル文法は公式ドキュメントを見れば良いので、ここではPlantUML使いをターゲットにして、「PlantUMLで書いているこれは、Mermaidではこう書く」という切り口で記事を書いてみます。

今回はクラス図です。

最初に結論まとめ

クラス図に関しては、普段から使っている基本的な記法はだいたい同じ事が実現できるようです。ただ、矢印の方向をコントロールする構文はありませんでした。PlantUMLよりもMermaidの方が、機能が少なく軽量な印象です。

先に簡単な一覧表を書くと、次の通りです。

	PlantUML	Mermaid クラス図
エイリアス	有り 例: class "表示名" as alias	有り 例: class alias [”表示名”]
グループ化	有り 例: package "グループ1 （詳細）"{}	有り 例: namespace グループ1_詳細 {} ※スペース・かっこ使用不可
ノート	有り 例: note bottom of yy: ノート1	有り 例: note for yy "ノート1"
色付け	有り 例: class "xxxxxxxx" as yy #red	有り 例: style bb fill:#ffff00ff
レイアウト調整	矢印にu,d,l,rなどを入れて方向をある程度調整可能	無し
クラスの詳細	メンバの定義、可視性、多重度、リレーションシップとそのテキストなど全て有り	同じく全て有り、記法も同じ

全体的にPlantUMLは図によらず共通の文法がありますが、Mermaidは図によって構文がかなり違うようなので、ここでは「Mermaidのクラス図」の記法を扱います。他の図でも使えるかどうかは項目によって違います。

詳しく

エイリアスの作成（as）は？

PlantUML

PlantUMLでは、全ての図で、 "表示名" as alias のようにasを付けることで、yyというエイリアスを追加できます。次のような使い方で、同じ名前が何度も出る場合に記載を単純化できます。

@startuml
class "xxxxxxxx" as yy
class "aaaaaaaa" as bb

yy o-- bb
@enduml

Mermaid

Mermaidでは図によって構文が違うようで、シーケンス図にはエイリアスという構文がありますが、クラス図にはありません。

クラス図では、表示名（ラベル）という構文でそれに近い事が実現できます。 class alias ["表示名"] になります。次のように使えます。

classDiagram
class yy ["xxxxxxxx"]
class bb ["aaaaaaaa"]

yy o-- bb

グループ化の囲み（package）は？

PlantUML

PlantUMLでは、複数のクラスをグループ化するように四角で囲むことができます。packageという構文があり、次のような使い方ができます。グループ名は””で囲めばスペースも含めて任意の文字で書けます。

@startuml

package "グループ1 （詳細）" {
    class "xxxxxxxx" as yy
    class "aaaaaaaa" as bb
    
    yy o-- bb
}
@enduml

Mermaid

Mermaidのクラス図では、namespaceという構文で同じことができます。ただし、ラベルと違って””で囲むことが出来ず、スペースやかっこを使うと半角・全角を問わず使用不可でした（スペースは無視され、かっこはエラーになる）。_など使える記号もあるようなので、上手く組み合わせる必要がありそうです。

classDiagram
    namespace グループ1_-詳細 {
			class yy ["xxxxxxxx"]
			class bb ["aaaaaaaa"]
    }

noteは？

PlantUML

PlantUMLでは、任意の要素に対してnote（吹き出しのような形）を付けることができます。大まかではありますが、top,bottom,left,rightなど位置も指定可能です。複数行に分けることも可能で、次のような書き方になります。

@startuml
class "xxxxxxxx" as yy
class "aaaaaaaa" as bb

note bottom of yy: ノート1

note right of bb
ノート2
yyy
zzz
yy o-- bb
endnote

@enduml

Mermaid

Mermaidのクラス図でも、同じようなnote構文があり、少し書き方は違いますが同じように書けます。ただし位置指定はありません。

classDiagram
class yy ["xxxxxxxx"]
class bb ["aaaaaaaa"]

note for yy "ノート1"

note for bb "ノート2
yyy
zzz"

色付けは？

PlantUML

PlantUMLでは、図によって書く場所が違いますが、#でカラー名称やカラーコード指定ができます。クラス図でクラスの色を変える場合、次のようになります。

@startuml
class "xxxxxxxx" as yy #red
class "aaaaaaaa" as bb #ffff00ff
@enduml

Mermaid

Mermaidのクラス図では、クラス名に対してスタイルを別途指定する形で書けます。記法はCSSそのままっぽいです。（色の書き方がたまたま一致しているだけかもしれません）

classDiagram
class yy ["xxxxxxxx"]
class bb ["aaaaaaaa"]

style yy fill:red
style bb fill:#ffff00ff

レイアウト調整は？

PlantUMLでは、矢印の中にu,d,r,lなどを入れることで、ある程度レイアウトをコントロールできます。item1 -u-> item2 と書くと、item2が出来るだけ上方向になるように矢印が引かれる、などです。

Mermaidにはこのような機能は無いようです。

クラスの詳細は？

メンバの定義、可視性、多重度、リレーションシップとそのテキストなど、クラス図を書くために必須となる機能はどちらにも有り、記法も同じでした。この辺りは迷うことも無いと思うので、省略します。

まとめ

クラス図について、PlantUMLで普段使いしそうな基本的な記法は、Mermaidでもだいたい書けるようです。ただし全体的にMermaidの方が軽量な印象で、特にレイアウト調整系の機能がありません。似たような記法ではあるので、完全に片方だけ使うのではなく、両方とも覚えて使い分けていくのが良さそうです。