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

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

2021年11月28日
ツール
Pocket

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

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

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

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

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

シンプルなテキストファイルで UML が書ける、オープンソースのツール

シンプルなテキストファイルから UML ダイアグラムを作成することができます。作…
plantuml.com

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

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

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

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

等にも利用が可能です。

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

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

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のインストールは、以下から可能です。

Visual Studio Code – コード エディター | Microsoft Azure

ほぼすべての言語で動作し、任意の OS で実行される強力なコード エディターであ…
azure.microsoft.com

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

基本の書き方

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

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

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

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

自宅->会社:出社
自宅<--会社:退社
@enduml
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

分類子の種類

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

  • participant
  • actor
  • boundary
  • control
  • entity
  • database
  • collections
  • queue
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

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

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

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

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

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

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

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

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

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

_none_

!theme _none_

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

amiga

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

aws-orange

!theme aws-orange
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

black-knight

!theme black-knight
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

bluegray

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

blueprint

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

cerulean

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

cerulean-outline

!theme cerulean-outline
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

crt-amber

!theme crt-amber
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

crt-green

!theme crt-green
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

cyborg

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

cyborg-outline

!theme cyborg-outline
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

hacker

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

lightgray

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

mars

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

materia

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

materia-outline

!theme materia-outline
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

metal

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

mimeograph

!theme mimeograph

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

minty

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

plain

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

reddress-darkblue

!theme reddress-darkblue
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

reddress-darkgreen

!theme reddress-darkgreen
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

reddress-darkorange

!theme reddress-darkorange
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

reddress-darkred

!theme reddress-darkred
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

reddress-lightblue

!theme reddress-lightblue
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

reddress-lightgreen

!theme reddress-lightgreen
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

reddress-lightorange

!theme reddress-lightorange
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

reddress-lightred

!theme reddress-lightred
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

sandstone

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

silver

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

sketchy

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

sketchy-outline

!theme sketchy-outline
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

spacelab

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

spacelab-white

!theme spacelab-white
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

superhero

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

superhero-outline

!theme superhero-outline
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

toy

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

united

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

vibrant

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

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

@startuml
!theme united
自宅->会社:<color:blue>出社</color>
会社-->自宅:<color:blue>退社</color>
@enduml
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

エイリアス機能

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

そこでキーワード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
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

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

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

記述方法内容
hide unlinked未接続の分類子は非表示にする
hide footbox分類子の下のボックスを非表示にする

ボックスで分けたい

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

そんなときは、キーワード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

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

グループ分けをする

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

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

alt 認証が必要
u->s: 認証処理を実行
else 認証不要
u->s: 通常アクセス
end
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

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

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

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

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

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

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

title スマホでの検索について
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!
title スマホでの検索について\n改行もできます

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

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

title
スマホでの検索について
改行もできます
さらに改行
end title
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

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

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

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

@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
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

ノートの形を変える

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

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

キーワード 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
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

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

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

== を利用します。

== ここから下は、別 ==
@startuml
== 初期化処理 ==
ユーザ -> サーバ: 認証要求
サーバ --> ユーザ: 許可
== 通常処理 ==
ユーザ -> サーバ: APIリクエスト
ユーザ <-- サーバ: レスポンス
@enduml
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!

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

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

@startuml
autonumber # 添字開始
autonumber stop # 添字停止
autonumber 10 # 10から開始
autonumber resume # 再開
@startuml
autonumber
== 初期化処理 ==
ユーザ -> サーバ: 認証要求
サーバ --> ユーザ: 許可
autonumber stop
== 通常処理 ==
autonumber 10
ユーザ -> サーバ: APIリクエスト
ユーザ <-- サーバ: レスポンス
autonumber stop
@enduml
PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!