PlantUML(プラントユーエムエル)でシーケンス図を書くぞ！

Tweet

Pocket

みなさん、シーケンス図は何を使って書いていますか？

エクセルとかスプレッドシート、はたまた、draw.ioなど使っているかと思います。

私は、VSCode + PlantUMLで、シーケンス図を書いています。

ちなみに読み方は、「プラントユーエムエル」です。

PlantUMLであれば、テキストベースのため、git管理でき、履歴管理できます。

シーケンスは、実装次第で変わっていきますよね。

シーケンス図だけでなく、

• ユースケース図
• クラス図
• オブジェクト図
• コンポーネント図
• 配置図
• 状態遷移図
• タイミング図

等にも利用が可能です。

最近知ったのですが、システム構成図もかけるのですね。システム構成図を描く方は、以下を見てみてください。

Kubernetes-PlantUMLがいい感じ(システム構成図を描く)

PlantUMLで、Twitter検索していたら、こちらを見つけました。 Kub…

zaitakukinmu.com

直感的にシンプルに記述できるのですが、ちょっと凝ったことをやろうとするとその都度、調べないといけなく面倒だったので、こちらにまとめてみることにしました。

PlantUML以外では、最近GitHubで、「Mermaid」記法が使えるようになったので、こちらの利用者も増えていくことでしょう。

VSCodeでPlantUMLを表示できるようにする

VSCodeがインストールされている事が前提になります。

まずは、ローカルマシンに、いくつか必要なパッケージをインストールします。

• Java
• Graphviz
• PlantUML

# brew install --cask temurin # brew install --cask adoptopenjdkはエラーになったため
# brew install graphviz
# brew install plantuml

久しぶりにbrewコマンドを実行したため、エラーだらけになりました。

以下を実行して、brew updateしました。

# git -C /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core fetch --unshallow
# brew update

adoptopenjdkは500エラーとなったため、後継であるtemurinをインストールしています。

VSCodeのインストールは、以下から可能です。

私の環境では、VSCodeのバージョンは、1.62になります。

赤枠のアイコンをクリックし、「PlantUML」を検索して、一番最初のものをインストールします。

installをクリックしてインストールします。

VSCodeのプラグインの動作確認をする

前項のインストールが完了したら、新規でファイルを作成します。

拡張子は、以下のいづれかにします。

• .wsd
• .pu
• .puml
• .plantuml
• .iuml

作成したら、以下のコードを貼り付けてみてください。

@startuml
自宅->会社:出社
会社-->自宅:退社
@enduml

この状態で、option + D(Mac) or Alt + D(Windows)を押してみてください。

すると右側に、プレビューのウィンドウが表示されます。

こちらで動作確認としては、OKになります。

基本の書き方

以下の図では、自宅、会社が分類子になります。

シーケンスを->で記述して、分類子間をつなげていきます。

可読性という意味では、戻りのシーケンスは、”<–“で記述した方がよいかもしれません。(下のコードの上下どちらも同じ表示になります。)

@startuml
自宅->会社:出社
会社-->自宅: 退社

自宅->会社:出社
自宅<--会社:退社
@enduml

分類子の種類

分類子には、以下のようなものがあります。

• participant
• actor
• boundary
• control
• entity
• database
• collections
• queue

シーケンス図の色を変えてみる

こちらの配色のサンプルをよく見るかと思います。

見やすいといえば見やすいのですが、ちょっと味気なさを感じます。

そこで、デフォルトで用意されているテーマを利用して、色を変えてみます。

個別に色を変えることもできます。

テーマによっては、文字が消えてしまうものもあるのでご注意ください。

テーマを利用する場合は、@startumlのあとに、!theme テーマ名と記述します。

@startuml
!theme united
自宅->会社:出社
会社-->自宅:退社
@enduml

_none_

!theme _none_

amiga

!theme amiga

aws-orange

!theme aws-orange

black-knight

!theme black-knight

bluegray

!theme bluegray

blueprint

!theme blueprint

cerulean

!theme cerulean

cerulean-outline

!theme cerulean-outline

crt-amber

!theme crt-amber

crt-green

!theme crt-green

cyborg

!theme cyborg

cyborg-outline

!theme cyborg-outline

hacker

!theme hacker

lightgray

!theme lightgray

mars

!theme mars

materia

!theme materia

materia-outline

!theme materia-outline

metal

!theme metal

mimeograph

!theme mimeograph

minty

!theme minty

plain

!theme plain

reddress-darkblue

!theme reddress-darkblue

reddress-darkgreen

!theme reddress-darkgreen

reddress-darkorange

!theme reddress-darkorange

reddress-darkred

!theme reddress-darkred

reddress-lightblue

!theme reddress-lightblue

reddress-lightgreen

!theme reddress-lightgreen

reddress-lightorange

!theme reddress-lightorange

reddress-lightred

!theme reddress-lightred

sandstone

!theme sandstone

silver

!theme silver

sketchy

!theme sketchy

sketchy-outline

!theme sketchy-outline

spacelab

!theme spacelab

spacelab-white

!theme spacelab-white

superhero

!theme superhero

superhero-outline

!theme superhero-outline

toy

!theme toy

united

!theme united

vibrant

!theme vibrant

テーマによっては、出社・退社の文字が消えてしまっているものがあるのでその場合は、<color: 色></color>でくくることにより色を変更することができます。

@startuml
!theme united
自宅->会社:<color:blue>出社</color>
会社-->自宅:<color:blue>退社</color>
@enduml

エイリアス機能

分類子の名前を毎回書くと可読性が悪くなります。

そこでキーワードasを使って分類子の別名をつけることができます。

@startuml
hide unlinked
participant Participant as Foo
actor Actor as Foo1
boundary Boundary as Foo2
control Control as Foo3
Foo->Foo1: Participant->Actor
Foo->Foo2: Participant->Boundary
@enduml

上記の例では、controlも定義していますが、”hide unlinked”を入れることで、未接続の分類子(定義したけど利用していない分類子)が非表示になります。

hideキーワードには以下があります。

ボックスで分けたい

シーケンス図をかいていると、ここからここまでは、サーバ側、ここからここまでは、ユーザ側等で分けたくなることがあるかと思います。

そんなときは、キーワードboxを利用します。

@startuml
hide unlinked
actor ユーザ as u
participant スマホ as s
box サーバサイド                  # box タイトル名で始める
participant サーバ as sv
database DB as d
end box                              # end boxでボックスを閉じる
u->s: スマホ利用
s->sv: アクセス
sv->d: 検索
d-->sv: 結果
sv-->s: 表示
s->u:確認
@enduml

グループ分けをする

いくつかの処理をグループで分けて表示したいときがあります。

そういう場合は、altを利用します。

alt 認証が必要
u->s: 認証処理を実行
else 認証不要
u->s: 通常アクセス
end

alt以外にも以下が利用可能です。

opt
loop
par
ref over
break
critical
group 任意のラベル名

利用するとラベルの部分が変わります。

シーケンス図にタイトルをつける

なんのシーケン図なのかわかりやすくするために、タイトルをつけることができます。

title スマホでの検索について

title スマホでの検索について\n改行もできます

title 〜 endtitleで囲うと複数行の記入ができます。

title
スマホでの検索について
改行もできます
さらに改行
end title

メッセージにノートをつける

note right, note left, note overでメッセージにノートをつけることができます。

なぜに、centerではなく、overなのかと。overの方がしっくりくるけど、left, rightとあったらcenterがよかった。overが思い出せないですｗ

@startuml
title メモ書き
A->B
note left of A
Aの左にメモ
end note
B->C
note over of B
Bの上にメモ
end note
C-->B
B-->A
note right of C
Cの右にメモ
end note
@enduml

ノートの形を変える

線上にボックスを配置したいこともあるかと思います。その際は、ボックスの形を変え、色を変えると

分類子の上に、ボックスを配置することができます。

キーワード hnote と rnote を使ってノートの形を変更できます。

@startuml
title メモ書き
A->B
hnote left of A
hnote: 六角形
end note
B->C
rnote over of B #red
rnote: 四角

end note
C-->B
B-->A
hnote right of C
hnote: 六角形
end note
@enduml

区切りをつける(境界線)

シーケンスを書いていると、上の部分は、XX、これより下は、YYとか区切りをつけたくなることがあるかと思います。

== を利用します。

== ここから下は、別 ==

@startuml
== 初期化処理 ==
ユーザ -> サーバ: 認証要求
サーバ --> ユーザ: 許可
== 通常処理 ==
ユーザ -> サーバ: APIリクエスト
ユーザ <-- サーバ: レスポンス
@enduml

シーケンスに数字をつける

autonumberと宣言すると、シーケンスに添え字をつけることができます。

@startuml
autonumber # 添字開始
autonumber stop # 添字停止
autonumber 10 # 10から開始
autonumber resume # 再開

@startuml
autonumber
== 初期化処理 ==
ユーザ -> サーバ: 認証要求
サーバ --> ユーザ: 許可
autonumber stop
== 通常処理 ==
autonumber 10
ユーザ -> サーバ: APIリクエスト
ユーザ <-- サーバ: レスポンス
autonumber stop
@enduml