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種類が使用できます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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で確認できます。