コーディングを始める前の設計段階で作成するクラス図。
今回はVisual Studio Codeと拡張機能のPlantUMLを使ってクラス図を描く方法をまとめました。
目次
環境構築
手元の環境は
- MacOS Catalina 10.15.4
- Visual Studio Code Version: 1.45.1
- PlantUML 2.13.11
となっています。
Visual Studio CodeはDownload Visual Studio Codeからダウンロードできます。
PlantUMLのインストールは下記の写真のように、Visual Studio Codeの拡張機能としてインストールできます。
最後に、PlantUMLでクラス図を作成しながらプレビューを見るためにGraphvizが必要になります。
brew install graphviz
でインストールしておきます。
ファイルの作成
PlantUMLでクラス図を書く際のファイルの拡張子は.puになります。
サンプルとしてuml.puというファイルを作成します。
試しに、ファイルに下記のコードを打ち込んでみてください。
@startuml
class Enemy {
- string name
+ void Attack()
}
@enduml
そして、command+shift+Pを押すとVSCodeのコマンドパネルが表示されるので、
>PlantUML: Preview CurrentDiagram
と入力すると、プレビューが表示されます。
下記のようなクラス図が表示されていたらセットアップは完了です。
アクセス修飾子
セットアップが完了したので、実際に書き方を説明していこうと思います。
まずは、アクセス修飾子の表記方法についてです。
| 表記 | アクセス修飾 | 意味 |
|---|---|---|
| + | public | 全てにおいて参照可能 |
| ~ | package private | 同一パッケージ内でアクセス可能 |
| # | protected | 自クラス及びその派生クラスのみ参照可能 |
| - | private | 自クラス内のみ参照可能 |
@startuml
class Enemy {
+ string type
~ string name
# void SayHello()
- void Attack()
}
@enduml
上記のコードから生成されるクラス図は下記になります。
abstractとstatic
静的または抽象的なメソッドやフィールドは{static}, {abstract}でそれぞれ表記できます。
@startuml
class Person {
+ {static} string staticId
+ string id
+ {abstract} void AbstractSayHello()
+ void SayHello()
}
@enduml
上記のようなコードで下記のようなクラス図が表現できます。
staticは下線で、abstractは斜体で表記されることがわかります。
抽象クラス、インタフェース、enumの表記
抽象クラスや、インタフェース、enumといったものの表記も準備されています。
@startuml
abstract class AbstractAudioPlayer {
+ {abstract} void Play()
}
interface IPlayable {
+ void Play()
}
enum Skill {
Attack,
Defence,
}
@enduml
それぞれ、abstract interface enum のキーワードを用いることで表記可能となっています。
上記のコードから生成されるクラス図が下記の通りです。
クラス間の関係性の表記
次にクラス間の関係性を表す方法について説明します。
主要なものを下記の表にまとめました。
| 表記 | 関係 | 説明 |
|---|---|---|
| <|-- | 継承 | 汎化と表記される場合がある「is a」の関係を表すもの |
| *-- | コンポジション | 集約より結び付きが強く「全体-部分」の双方が存在することで成り立つもの |
| o-- | 集約 | 関連の一種で「全体-部分」の関係が成り立っているもの |
| -- | 関連 | クラス間で結び付きがあるもの |
| <|.. | 実現 | interfaceを実装している |
| <.. | 依存 | 相手の状態やイベントに対し影響を受ける関係性 |
これらを実際に使ってみたコードを下記に示します。
@startuml Japanese --|> Human : 継承 Wheel "4" --* "1" MotorVehicle : コンポジション Employee "many" --o "1" Company : 集約 Car -- VehicleInspection : 関連 List ..|> IList : 実現 Runner ..> Marathon : 依存 interface IList abstract class Human @enduml
ノートの追加
大規模なクラス図になった場合、コメントを付加したい場合があると思います。
そういった際に利用できるノートの追加も説明しておきます。
ノートにはいくつかのHTMLタグを利用できるようになっており、下記のように表記することができます。
利用できるHTMLタグには下記のようなものがあります。
| HTMLタグ | 機能 |
|---|---|
| <size:18> | フォントサイズを変更します |
| <b> | 太字表記になります |
| <u> | 下線を引きます |
| <s> | |
| <color:#FF0000> | 文字カラーを変更します |
@startuml
class GameManager {
+ {static} int Id
+ int PlayerCount
+ void StartGame()
}
note top of GameManager
これは<size:18>ゲーム全体を管理する</size>GameManagerクラスです。
end note
note left of GameManager
<b>太字のコメントも可能です</b>
end note
note bottom of GameManager
<u>下線を引くことや</u><i>斜体にすることもできます</i>
end note
note right of GameManager
<s>打ち消し線もできます</s>
<color:#FF0000>色の指定も可能です</color>
end note
@enduml
上記のコードにより、下記のようなクラス図が生成されます。
画像ファイルに書き出す
最後に、作成したクラス図を画像ファイルに書き出す方法を説明します。
command+shift+Pを押すとコマンドパネルが表示されます。
そこに
>PlantUML: Export Current Diagram
と入力すると、次に画像ファイルの拡張子を指定できます。
pngなどの拡張子を指定してenterを押すと書き出しが実行されます。
