成長するドメインモデリングと相性抜群!PlantUMLの紹介
ドメインモデルを図で理解するのに便利なPlantUML。レイアウト調整のノウハウと合わせてその魅力を紹介します。
はじめに
基盤本部(開発部門)の宮下です。
BIGLOBEではドメイン駆動設計(Domain Driven Design:DDD)を実践しています。
DDDではドメインモデルを育てていき、継続的にソフトウェアの価値を高めていくことが重要となります。
ドメインモデルとは、業務的な関心ごと(=ドメイン)の問題を解決するために表現するものです。そんなドメインモデルをみんなで設計するときに、BIGLOBEではPlantUMLというツールを使っています。キーボードだけでサクッと図を描けてしまう優れものです。
この記事では、PlantUMLに詳しくない方はもちろん、PlantUMLでもっと見やすい図を描きたいな!と思っている方向けのノウハウを紹介したいと思います。
対象読者
- PlantUMLに詳しくない方
- PlantUMLでもっと見やすい図を描きたいと思っている方
PlantUMLとは
PlantUMLはUML(Unified Modeling Language)をはじめとした図を作成するのに便利で商用利用可能なフリーツールです。
以下のような複雑な図も作成できます。
コンポーネント図
@startuml
interface "注文画面" as OrderWeb
actor "顧客" as Customer
package "販売管理" {
[受注管理] as OrderReceivingManagement
[在庫管理] as StockManagement
interface "在庫管理API" as StockManagementAPI
database "在庫DB" as StockDB
[出荷管理] as ShipmentManagement
interface "出荷管理API" as ShippingManagementAPI
}
Customer .> OrderWeb : 在庫確認, 注文
OrderWeb -- OrderReceivingManagement
OrderReceivingManagement ..> StockManagementAPI : 在庫確認
OrderReceivingManagement .left.> ShippingManagementAPI : 出荷指示
StockManagement --> StockDB : 在庫確認, 在庫更新
StockManagement -up- StockManagementAPI
ShipmentManagement ..> StockManagementAPI : 在庫更新
ShipmentManagement - ShippingManagementAPI
@enduml
シーケンス図
@startuml
hide footbox
actor "顧客" as Customer
participant "受注管理" as OrderManagement
queue "注文キュー" as OrderReceptionQueue
participant "在庫管理" as StockManagement #Plum
participant "出荷管理" as ShipmentManagement
Customer -> OrderManagement: 在庫確認
activate OrderManagement
OrderManagement -> StockManagement: 在庫確認API
activate StockManagement
StockManagement -> StockManagement: 在庫確認
StockManagement --> OrderManagement: Response
deactivate StockManagement
OrderManagement -> Customer: 在庫情報
deactivate OrderManagement
Customer -> OrderManagement: 注文
activate OrderManagement
OrderManagement -> OrderManagement: 注文受付
activate OrderManagement
OrderManagement -> OrderReceptionQueue: 注文キュー登録
deactivate OrderManagement
OrderManagement -> Customer: 注文情報
OrderManagement --> OrderReceptionQueue: Polling
OrderReceptionQueue --> OrderManagement: 注文キュー
OrderManagement -> ShipmentManagement: 出荷指示API
activate ShipmentManagement
ShipmentManagement -> ShipmentManagement: 出荷受付
activate ShipmentManagement
ShipmentManagement -> StockManagement: 在庫更新API
activate StockManagement
StockManagement -> StockManagement: 在庫更新
StockManagement --> ShipmentManagement: Response
deactivate StockManagement
deactivate ShipmentManagement
ShipmentManagement --> OrderManagement: Response
deactivate OrderManagement
@enduml
クラス図
@startuml
package "在庫" {
class "在庫" as Stock {
- List<商品ロット>
- 商品在庫数
- 在庫ステータス
+ 商品の在庫数を更新する()
+ 商品の在庫数を確認する()
- 商品在庫ステータスを更新する()
}
class "入出庫" as IncomingAndOutComing {
- 在庫
+ 商品を保管する()
+ 商品を取り出す()
}
enum "在庫ステータス" as ProductStatus {
在庫あり
在庫わずか
売り切れ
入荷待ち
}
}
package "商品" {
class "商品" as Product {
- 商品番号
- 商品名
}
class "商品ロット" as ProductLot {
- List<商品>
- ロット
}
class "ロット" as Lot {
- ロット番号
- 製造日付
- 消費期限
}
}
package "倉庫" {
class "倉庫" as Warehouse {
- 倉庫番号
- 住所
}
class "倉庫棚リスト" as WarehouseShelfList {
- 倉庫
- 棚リスト
+ 空いている棚を探す()
- 棚の空き状況を更新する()
}
class "棚リスト" as ShelfList {
- List<空き棚>
- List<使用中の棚>
}
class "空き棚" as EmptyShelf {
- 棚
}
class "使用中の棚" as UsingShelf {
- 棚
- 商品ロット
}
class "棚" as Shelf {
- 棚番号
- 位置
}
}
IncomingAndOutComing "1" *--> "1" Stock
IncomingAndOutComing ..> WarehouseShelfList
Stock "1" *--> "1.." ProductLot
Stock "1" *--> "1" ProductStatus
WarehouseShelfList "1" *--> "1" Warehouse
WarehouseShelfList "1" *--> "1" ShelfList
ShelfList "1" *--> "0.." EmptyShelf
ShelfList "1" *--> "0.." UsingShelf
EmptyShelf "1" *--> "1" Shelf
UsingShelf "1" *--> "1" Shelf
UsingShelf "1" *--> "1" ProductLot
ProductLot "1" *--> "1.." Product
ProductLot "1" *--> "1" Lot
@enduml
状態遷移図
@startuml
state "在庫ステータス" as StockStatus {
[*] --> 入荷待ち
入荷待ち -> 在庫あり: 入荷
在庫あり -> 在庫わずか: 在庫が10個以下
在庫わずか --> 売り切れ: 在庫が0個
売り切れ --> 入荷待ち: 入荷日が決定
}
@enduml
上記の図以外にも様々な図が作成できます。PlantUMLの日本語ページに例があるので、参考にしてください。
次に、個人的に感じるPlantUMLのメリットとデメリットを挙げます。
メリット
- テキストベースで記述できる
これがPlantUMLを利用するモチベーションとなる一番大きなメリットかと思います。バージョン管理システムで変更履歴を管理でき、メンテナンスがしやすいです。ドメインモデルを継続的に育てていくDDDと相性が良いのかなと思います。 - プラグインを入れると編集しながらリアルタイムで図をプレビューできる
IntelliJ IDEA、Visual Studio Code等、主要なIDEやテキストエディタでプラグインが公開されています。プレビューに即時編集内容が反映されるので、効率的に編集作業ができます。プレビューを見せながら議論をして修正するという使い方もできるので、コミュニケーションを取る際にも有用です。
※業務利用の場合はPlantUMLのオンラインサーバーを使用しないようにしています。
デメリット
- レイアウト調整に工夫が必要
PlantUMLでは図のレイアウトを自動で行ってくれますが、思うようにいかないことが多々あります。後述するテクニックを使えばある程度きれいに配置できますが、細かな調整をしたい場合には向かないです。
レイアウトを調整するためのテクニック
デメリットとして、レイアウト調整に工夫が必要と挙げましたが、ここでレイアウト調整するためのちょっとしたテクニックを紹介します。
-
や.
の数で調整@startuml
package Horizontal {
class A {}
class B {}
class C {}
class D {}
C . D
A - B
}
package Vertical {
class G {}
class H {}
class E {}
class F {}
E -- F
G .. H
}
package LongDependencyLine {
class I {}
class J {}
class K {}
class L {}
I --- J
I ---- K
I ..... L
}
@enduml-
や.
が1つの場合
水平方向に依存関係の線が伸びます。-
や.
2つの場合
垂直方向に依存関係の線が伸びます。- それ以上増やした場合
線を長さを変えられます。
要素や依存関係を定義する順番を変える
1.のソースコードを見て違和感を持った方がいるかと思いますが、要素や依存関係を定義した順番で配置が変わることがあります。
ソースコードを自然な順番で定義するよう修正してみましょう。@startuml
package Horizontal {
class A {}
class B {}
class C {}
class D {}
A . B
C - D
}
package Vertical {
class E {}
class F {}
class G {}
class H {}
E -- F
G .. H
}
@endumlすると、図はこのようになります。
配置が左から (C - D), (A - B), (G - H), (E - F)となり、違和感がありますよね。
このように配置に納得がいかない場合は、要素や依存関係の定義順を見直すのもありなのかもしれません。依存関係がある要素を左右入れ替える
以下の例を見てください。ソースコードはこちらです。
@startuml
class Fruit {}
class Orange {}
class Banana {}
class Apple {}
Fruit <|-- Orange
Fruit <|-- Banana
Apple --|> Fruit
@enduml図の配置とソースコードの関係を見ると以下のようになっています。
- Banana, Orange
- 図の配置:Fruitよりも下
- ソースコード:Fruitが左、Banana, Orangeが右
- Apple
- 図の配置:Fruitよりも上
- ソースコード:Appleが左、 Fruitが右
要素を左右入れ替えるだけで、配置が変わったことが分かります。
また、1.と関連しますが、-
,.
の数にも関係していて以下のようになります。-
,.
の数が1つの場合- 左側に定義した要素:左側に配置
- 右側に定義した要素:右側に配置
-
,.
の数が2つの場合- 左側に定義した要素:上側に配置
- 右側に定義した要素:下側に配置
- Banana, Orange
依存関係の方向を明示的に指定する
依存関係を結ぶ線の間にup
,down
,left
,right
のような指定が可能です。
※u
,d
,l
,r
のように省略も可能です。@startuml
class Center {}
class Up {}
class Left {}
class Right {}
class Down {}
Center -up- Up
' 垂直方向の場合、線を伸ばすことも可能
Center -down--- Down
Center -left- Left
Center -right- Right
@enduml[hidden]
の使用
依存関係はないけれど、配置上どうにかしたい場合は[hidden]
が使えます。
まずは以下の例を見てください。昆虫類(Insects)、 カブトムシ(Beatle) がAnimalと同階層に並んでいて気持ち悪いですね...
適切な配置にしたいため、[hidden]
を使うように修正します。@startuml
class Animal {}
' 哺乳類
class Mammalian {}
note left of Mammalian: 哺乳類
' 昆虫類
class Insects {}
class Dog {}
class Cat {}
class Monkey {}
class Beatle {}
Animal <|-- Mammalian
Mammalian <|-- Dog
Mammalian <|-- Cat
Mammalian <|-- Monkey
Animal <|-[hidden]- Insects
Insects <|-[hidden]- Beatle
@endumlいかがでしょうか?今度は昆虫類(Insects)、 カブトムシ(Beatle)が適切な階層に配置されました。 階層構造になっているようなものを図示したいときに有効なテクニックです。
...昆虫類も動物の一種だし、カブトムシは昆虫類でしょうが!依存関係を定義していないなんて!というツッコミはやめてください(笑)
さて、5つほどレイアウトのテクニックを紹介しましたが、ここで元も子もないことを言います。
レイアウト調整はほどほどにしてください(笑)
なぜならば、きれいな図を作ることが目的ではなく、図を使って議論したり、頭を整理したりすることが本来の目的となるはずだからです。
また、PlantUMLでレイアウトを細かく制御するのは難しいですし、あまりおすすめしません。ある程度のところで割り切るのが良いかと思います。
まとめ
PlantUMLの概要とちょっとしたテクニックを紹介しました。繰り返しになりますが、DDDを実践するには非常に有用なツールですし、ちょっとした図を作りたい場合でも便利なツールです。
ぜひPlantUMLを活用してみてください。
BIGLOBEでは、DDDを活用したサービス・アーキテクチャの設計・開発に取り組んでいます。DDDを実践してドメインモデルを継続的に成長させるために、ツールにもこだわりながら色々な工夫をしています。
興味のある方はぜひカジュアル面談にいらしてください。
※ UML、Unified Modeling Languageは、Object Management Group, Inc.の米国及びその他の国における登録商標または商標です。
※ IntelliJ、IntelliJ IDEAは、JetBrains s.r.o.の商標または登録商標です。
※ Visual Studioは、Microsoft Corporation の、米国およびその他の国における商標または登録商標です。
「ドメイン」をもっと詳しく
「ドメイン」のニュース
-
SNSアカウント・WEBサイト・中古ドメインの売買・譲渡専用プラットフォーム「M&Aクラブ(MAクラブ)」で案件成約数が700件を突破!5月7日18時0分
-
Xserverドメイン、登録ドメイン件数の累計が100万件を突破! 国内ドメイン取得サービスで成長率No.1に5月7日15時16分
-
更新プログラムKB5036909インストールでWindows Server認証トラフィック増加の不具合5月3日10時15分
-
2024年5月度パワーランクランキング掲載サイトのSEO観点でのドメインパワー「パワーランク」変動調査5月2日14時0分
-
公式キャラクターを決定!運転免許メディアサービスをリニューアル。幅広い層へのアプローチを目指してサービスサイトリニューアルとサイトドメイン統合を実施。5月2日10時0分
-
SNSアカウント・WEBサイト・中古ドメインの売買・譲渡専用プラットフォーム「M&Aクラブ(MAクラブ)」で案件成約数が600件を突破!4月26日14時30分
-
人間と地球の健康を守る人たち向けのドメイン「.earth」を半額以下で提供するアースデイプロモーションを実施4月19日10時16分
-
病理AI開発のメドメイン、シリーズA2ラウンドで8.5億円(累計20.5億円)の資金調達を実施4月18日10時46分
-
Notepad公式が非公式ファンサイトの閉鎖協力を要請4月10日10時41分
-
“お店”のためのドメイン「.shop」累計登録数600万件突破!【GMOドメインレジストリ】4月5日13時16分