はじめに

最近社内でPlantUMLが流行り始めたので、使い方を簡単にまとめました。細かい設定項目については公式ページを参照ください。

PlantUML

PlantUMLは@startuml@endumlで囲んだ部分によってコードで簡単にフローチャートなどを描画できるものです。 Gitlabのマージリクエスト画面など、エディタが利用できる画面において、 ```plantuml```で挟んだコードブロック中で利用できます。
またVSCodeなどでも少しの設定で動かせるので、ローカルでも簡単な図を手早く作ることができ、コードで共有できるのでグラフィカルな情報でも差分が見やすく、Git等でも便利に扱えます。

UMLには大きく分けて構造図と振る舞い図という区分があります。この記事ではその区分に沿って説明します。

構造図

クラス図

クラス図はクラス間の関係を可視化するものです。具体的には以下のように定義されています。

@startuml class
class1 -- Extention_Class
class2 .. Extention_Class
class class1{
    field: string
    method()
    }
    
@enduml

このように--で直線、..で点線を描くことができます。これはplantUML全体で共通です。 またclassキーワードでクラスを定義でき、特定のクラス内部にフィールドとメソッドを含めることができます。

またオブジェクトは以下の4種類が使用できます。

オブジェクト名 キーワード
クラス class
インターフェース interface
抽象クラス abstract
列挙型 enum

意図的に上下左右に配置したい場合には

From_down ..down> to
From_right ..right> to
From_left ..left> to
From_up ..up> to 

で配置することができます。

加えてレイアウトに便利な機能として、.の数によって要素の位置する高さが変動するというものがあります。

例としてA ..> B の..>部分の.を増やしてみましょう。

  • 1つの時
@startuml try1
From1 .> to 
@enduml
  • 2つの時
@startuml try2
From1 .> to
From2 ..> to
@enduml
  • 3つの時
@startuml try3
From1 .> to
From2 ..> to
From3 ...> to
@enduml

このように要素の位置する高さが変動します。つまりmarkdownでの#のように階層が設定されています。これを利用すると

このように階層ごとにクラスを整列させて表示することができます。

関連するクラスをまとめる際にはこの階層を意識して描くと綺麗にまとまるかもしれません。 公式では..のように2つを基本的に利用し、plantUML側に任せるのが推奨されているようです。各々状況に応じて使い分けるのがいいかと思います。

コンポーネント図

コンポーネントとは、複数クラスがまとまってある動作を成す場合に、1つ以上のインターフェースを用意したもので、コンポーネント図はクラス図をより抽象化したものです。実際の例としては.exeファイルと.dllファイルの関係のようにファイル間の依存関係を表します。

component componentNameのほか、[componentName]でも定義されます。

[コンポーネント例1]
component コンポーネント例2
コンポーネント例1 <. コンポーネント例2

オブジェクト図

クラス図と同様にシステム構造を表すもので、クラス図との違いは具体的なオブジェクト関係を扱う点にあります。 記法はクラス図とほとんど変わらず、objectというキーワードを使用して定義すればよく、オブジェクト間の関係を表す線も同様です。

@startuml
object sampleObject
sampleObject : name = "takashi"
@enduml

フィールドの宣言はシンボル(例であればsampleObject):フィールド名のように宣言することができます。またクラス図と同様に{}で括る形で定義することもできます。


振る舞い図

ユースケース図

利用者とシステムがある中で、どういった機能が必要か確認するため、利用者と動作を結びつけるための図です。

actor "タカシ" as takashi
rectangle Restaurant {
  usecase "ご飯を食べる" as UC1
  usecase "お金を払う" as UC2
  usecase "飲む" as UC3
}
takashi --> UC1
takashi --> UC2
takashi --> UC3

アクティビティ図

アクティビティ図は一連の動作の流れを表現する図であり、一般にフローチャートと呼ばれるものです。

アクティビティ図を利用するにあたって、現在新記法がBeta版として実装されておりおよそ今後はこの新記法に切り替わるとされています。

よって今回は新記法を利用することとします。また実際に利用する場合に記事執筆時点からいくつか差分が出ている可能性があるので御留意下さい。2020/09/29の情報に従ってこの記事は作成されています。

start
:起床;
:水を飲む;
stop

まず基本的な記法としては、図全体はstartで始まり、endもしくはstopで終了します。各シークエンスは:で始まり;で終わります。

start 
if (ご飯食べた?) then (yes)
:歯を磨こう;
else (no)
:ご飯食べよう;
endif
end

また、条件分岐はif ,then,elseを利用して書きます。ラベルは()でつけることができます。

状態遷移図

システム中での振る舞い(状態)がどう遷移していくかを図に表したものです。 [*]が存在すれば状態遷移図と判断されます。

[*] --> 状態1
状態1 --> [*]
状態1 : String
状態1 : String2

状態1 -> 状態2
状態2 --> [*]

[*]が図中では始点終点を表しており、そのほかが各状態を表します。基本的な部分ではクラス図の通りなので直線の引き方も同様です。 クラス図でclassを用いてclassを定義したように、stateを用いて状態をより説明的にすることができます。

iOSでのViewControllerのライフサイクルの図をPlantUMLで示すと以下のようになります。

@startuml
[*] --> Appering
Appering -right-> Appered : viewDidAppear
Appered -down-> Disappering : viewWillDisapper
Disappering -left-> Disappered : viewDidDisappear
Disappered -up->  Appering : viewWillAppear
Appering -down-> Disappering : viewWillDisapper
Disappering -up-> Appering : viewWillAppear
Disappered --> [*]
@enduml

参考の図になるべく近づけようとしましたが円形の作図は難しく、四角形の図となりました。

ワイヤーフレーム

ワイヤーフレームは機能を最優先にUIを組む際のプロトタイプとしてや、機能を整理するなどのときに使います。 @startumlのところを@startsaltとすることで利用できるほか、@startumlのなかでsaltキーワードが存在する場合通常のUMLと共存できます。

ワイヤーフレームでは、{}で囲まれた部分をウィンドウと定義します。

@startuml guiUML-figure
salt
{+
{* ファイル | 編集 | ソース
}
{/ 一般 | よく使う項目 | 保存 }
{
{ ドロップリスト: | ^選択^ }
[X] チェックボックス
() ラジオボタン
[単純なボタン]
"テキストボックス"
}
[閉じる]
}
@enduml

また,表の罫線は以下のキーワードによって切り替えます。

シンボル 機能
# 縦横
! 縦線
- 横線
+ 枠線

ER図

データベースの構造を説明する図です。様々な情報の塊をエンティティ(Entity)と呼び、エンティティ間での関連(Relationship)を表現します。(E-R図) 実際の文法はクラス図と同様です。キーワードとしてentityを利用すること以外で違いはなく、クラス図と全く同様の動きをします。

ER図のエンティティ間における関係の数として多重度があり、線の本数によって以下のように記号が異なります。

種類 記号
0 or 1 o--
1 ||--
0以上 }o--
1以上 }|--
entity Entity01
entity Entity02
entity Entity03
entity Entity04
entity Entity05
entity Entity06
entity Entity07
entity Entity08

Entity01 }|..|| Entity02
Entity03 }o..o| Entity04
Entity05 ||--o{ Entity06
Entity07 |o--|| Entity08

ライブラリ

AWSなどのアイコンを利用できるライブラリが標準で入っています。 includeすることで利用可能になるようです。 アイコンが標準ライブラリに組み込まれているサービスはstdlibで確認できます。

```plantuml
@startuml
!include 
!include 
!include 
left to right direction
Users(sources, "Events", "millions of users")
APIGateway(votingAPI, "Voting API", "user votes")
sources --> votingAPI
@enduml
```

おわりに

今回記事を書くにあたってPlantUMLを調べてみて想像よりも多種多様な図が描けること、また今でも新しい記法、図が提案されていることに驚きました。

簡単なコードで整った図が生成できるPlantUMLは非常に使いやすいツールであると伝われば幸いです。実際に使ってみるとコードだけで完結する使い勝手の良さを感じられると思います。

公式ページにて実行環境も用意されているので、気軽に触ってみて下さい。



ギャップロを運営しているアップフロンティア株式会社では、一緒に働いてくれる仲間を随時、募集しています。 興味がある!一緒に働いてみたい!という方は下記よりご応募お待ちしております。
採用情報をみる