PlantUMLでシーケンス図を書くぞ!

PlantUMLでシーケンス図を書くぞ!

2021年11月28日
ツール
Pocket

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

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

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

シンプルなテキストファイルから UML ダイアグラムを作成することができます。作ることのできるダイアグラムには、多くの種類があります。それらは、PNG、LaTe…
plantuml.com

PlantUMLであれば、テキストベースでデータを管理できるので、変更が発生した場合のやり直しやgit等で扱えば、履歴管理も楽に行えるので便利です。

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

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

等にも利用が可能です。

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

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

PlantUMLでシーケンス図を書くぞ!
ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプ…
azure.microsoft.com

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

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

PlantUMLでシーケンス図を書くぞ!

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

PlantUMLでシーケンス図を書くぞ!

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

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

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

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

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

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

この状態で、option + Dを押してみてください。

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

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でシーケンス図を書くぞ!

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

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

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でシーケンス図を書くぞ!