よーし、Mermaidでクラス図書いちゃうぞ〜！ 目指せ、 #ちょうぜつ本 UML章の図の再現！🧜‍♀️

はじめに

ミリアニ2幕、ありがとおおおおおおおおおお！！nikkieです。

書式に従ってテキストファイルを作るだけで図を描画できるツール、Mermaid。
今回はMermaidでクラス図を書いてみました。
執筆時点の理解をまとめたもので、今後ドキュメントを読み込んでいくとよりよい方法が見つかる可能性はかなりあると思っています。

目次

動作環境

• Node.js v18.13.0
• npm 8.19.3
• @mermaid-js/mermaid-cli 10.4.0

環境構築ご参考

• VS Codeに「Markdown Preview Mermaid Support」拡張を入れてMarkdownファイルを編集。プレビューを見ながら試行錯誤
• クラス図をどう書けばいいかが固まったら、mmdファイルに保存しmmdcコマンドで画像にする

mermaidでクラス図

こちらのドキュメントを参考にしながら再現していくのです！

クラス図はclassDiagramとして書いていきます¹

---
title: Example
---
classDiagram

それでは、ちょうぜつ本 第4章 UML で見かけたクラス図と同様のものをMermaidで再現していきます！

Car

https://raw.githubusercontent.com/ftnext/transcendent-book-py/c10379b6407ea3f5a08c74cffdafbce0c369dca2/chapter4/car_classes.mmd

クラス図におけるCarクラスの定義はこんな感じです。
ref: https://mermaid.js.org/syntax/classDiagram.html#defining-members-of-a-class

    class Car
    Car : Engine engine
    Car : Wheel[] wheels
    Car : +startEngine()

これは以下でもいいようです²（2通りある！）

    class Car {
        Engine engine
        Wheel[] wheels
        +startEngine()
    }

()を付けるとメソッド、付けなければ属性です

• visibility
  • https://mermaid.js.org/syntax/classDiagram.html#visibility
  • 例えばPublicな属性やメソッドには、先頭に+を付けます
• Composition (relationship)
  • https://mermaid.js.org/syntax/classDiagram.html#defining-relationship
  • Car *-- Engineで、CarクラスはEngineクラスのインスタンスをcompositionとして所有するという理解です
• cardinality
  • https://mermaid.js.org/syntax/classDiagram.html#cardinality-multiplicity-on-relations
  • Car *-- "4" Wheelと4つのWheelインスタンスを（compositionとして）所有することを示しています

Pet

https://raw.githubusercontent.com/ftnext/transcendent-book-py/c10379b6407ea3f5a08c74cffdafbce0c369dca2/chapter4/pet_classes.mmd

2つのrelationshipを定義しました。
https://mermaid.js.org/syntax/classDiagram.html#defining-relationship

• Association
  • PetShopCustomer --> Pet
  • PetShopCustomerはPetに依存することを表します
• Inheritance
  • Dog --|> Pet
  • DogクラスはPetクラスを継承することを表します

Petは抽象クラスですが、「Annotations on classes」を参考にしました。
https://mermaid.js.org/syntax/classDiagram.html#annotations-on-classes

<<Abstract>> To represent an abstract class

ちょうぜつ本にはパッケージ単位が示されているのですが、Mermaidがサポートしているかは現時点で分かっていません（今回見た範囲では見つけられていません）

Article Operation

https://raw.githubusercontent.com/ftnext/transcendent-book-py/c10379b6407ea3f5a08c74cffdafbce0c369dca2/chapter4/news_site_classes.mmd

ArticlePresenter --|> ArticlePresenterInterfaceと、Inheritanceのrelationshipでinterfaceの実装も表しています³。

現時点で分かっていないことが1つあります。
ちょうぜつ本ではインターフェースが省略表記されています。
インターフェースの省略表記がMermaidでサポートされているのかは、今回見た範囲では不明です。

終わりに

Mermaidのクラス図の素振りに、ちょうぜつ本で見たクラス図を写経してみました。
ドキュメントを参照しつつ、同様の意味内容のクラス図は作れていると思います（写経達成！）。
一方、ちょうぜつ本と同様の表記をするにはどうすればいいかがぱっと分からなかったところもありました（パッケージ単位の示し方、インターフェースの省略表記）

今回題材にした3つの図がどういうものなのかは、ぜひちょうぜつ本でお確かめください！⁴

---

1. フローチャートのときはflowchartでした↩
2. Defining Members of a classより「Associate members of a class using {} brackets, where members are grouped within curly brackets. Suitable for defining multiple members at once.」↩
3. https://mermaid.js.org/syntax/classDiagram.html#labels-on-relations に、classA <|-- classBにimplementsとラベルを付ける例を見つけました↩
4. 3章と関わりますよ〜 ↩