みなさん、シーケンス図は何を使って書いていますか?
エクセルとかスプレッドシート、はたまた、draw.ioなど使っているかと思います。
私は、VSCode + PlantUMLで、シーケンス図を書いています。
ちなみに読み方は、「プラントユーエムエル」です。
PlantUMLであれば、テキストベースのため、git管理でき、履歴管理できます。
シーケンスは、実装次第で変わっていきますよね。
シーケンス図だけでなく、
- ユースケース図
- クラス図
- オブジェクト図
- コンポーネント図
- 配置図
- 状態遷移図
- タイミング図
等にも利用が可能です。
最近知ったのですが、システム構成図もかけるのですね。システム構成図を描く方は、以下を見てみてください。
直感的にシンプルに記述できるのですが、ちょっと凝ったことをやろうとするとその都度、調べないといけなく面倒だったので、こちらにまとめてみることにしました。
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」を検索して、一番最初のものをインストールします。
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638050869/4b03ed345d6c153d983c926ac7b5ed73/4b03ed345d6c153d983c926ac7b5ed73.png?_i=AA 686w, https://res.cloudinary.com/dz7ruywxa/images/w_243,h_300,c_scale/f_auto,q_auto/v1638050869/4b03ed345d6c153d983c926ac7b5ed73/4b03ed345d6c153d983c926ac7b5ed73.png?_i=AA 243w)
installをクリックしてインストールします。
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638050866/d5f0a0f0b41461bbacc1d906c8523a29/d5f0a0f0b41461bbacc1d906c8523a29.jpg?_i=AA 962w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_274,c_scale/f_auto,q_auto/v1638050866/d5f0a0f0b41461bbacc1d906c8523a29/d5f0a0f0b41461bbacc1d906c8523a29.jpg?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_703,c_scale/f_auto,q_auto/v1638050866/d5f0a0f0b41461bbacc1d906c8523a29/d5f0a0f0b41461bbacc1d906c8523a29.jpg?_i=AA 768w)
VSCodeのプラグインの動作確認をする
前項のインストールが完了したら、新規でファイルを作成します。
拡張子は、以下のいづれかにします。
- .wsd
- .pu
- .puml
- .plantuml
- .iuml
作成したら、以下のコードを貼り付けてみてください。
@startuml
自宅->会社:出社
会社-->自宅:退社
@enduml
この状態で、option + D(Mac) or Alt + D(Windows)を押してみてください。
すると右側に、プレビューのウィンドウが表示されます。
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/w_1024,h_314,c_scale/f_auto,q_auto/v1638055129/38c3c11dda339b4fc90656b965dbcbf0/38c3c11dda339b4fc90656b965dbcbf0.png?_i=AA 1024w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_92,c_scale/f_auto,q_auto/v1638055129/38c3c11dda339b4fc90656b965dbcbf0/38c3c11dda339b4fc90656b965dbcbf0.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_236,c_scale/f_auto,q_auto/v1638055129/38c3c11dda339b4fc90656b965dbcbf0/38c3c11dda339b4fc90656b965dbcbf0.png?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055129/38c3c11dda339b4fc90656b965dbcbf0/38c3c11dda339b4fc90656b965dbcbf0.png?_i=AA 1322w)
こちらで動作確認としては、OKになります。
基本の書き方
以下の図では、自宅、会社が分類子になります。
シーケンスを->で記述して、分類子間をつなげていきます。
可読性という意味では、戻りのシーケンスは、”<–“で記述した方がよいかもしれません。(下のコードの上下どちらも同じ表示になります。)
@startuml
自宅->会社:出社
会社-->自宅: 退社
自宅->会社:出社
自宅<--会社:退社
@enduml
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055125/1fb6234c1dee3134224f15639fb59942/1fb6234c1dee3134224f15639fb59942.png?_i=AA 228w, https://res.cloudinary.com/dz7ruywxa/images/w_215,h_300,c_scale/f_auto,q_auto/v1638055125/1fb6234c1dee3134224f15639fb59942/1fb6234c1dee3134224f15639fb59942.png?_i=AA 215w)
分類子の種類
分類子には、以下のようなものがあります。
- participant
- actor
- boundary
- control
- entity
- database
- collections
- queue
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/w_1024,h_314,c_scale/f_auto,q_auto/v1638077910/124877d5fcc3316a7a3f20f646478f8f/124877d5fcc3316a7a3f20f646478f8f.png?_i=AA 1024w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_92,c_scale/f_auto,q_auto/v1638077910/124877d5fcc3316a7a3f20f646478f8f/124877d5fcc3316a7a3f20f646478f8f.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_768,h_235,c_scale/f_auto,q_auto/v1638077910/124877d5fcc3316a7a3f20f646478f8f/124877d5fcc3316a7a3f20f646478f8f.png?_i=AA 768w, https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638077910/124877d5fcc3316a7a3f20f646478f8f/124877d5fcc3316a7a3f20f646478f8f.png?_i=AA 1136w)
シーケンス図の色を変えてみる
こちらの配色のサンプルをよく見るかと思います。
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055126/e41b15e3fc3f7be94bdfd532044e3671/e41b15e3fc3f7be94bdfd532044e3671.png?_i=AA 232w, https://res.cloudinary.com/dz7ruywxa/images/w_220,h_300,c_scale/f_auto,q_auto/v1638055126/e41b15e3fc3f7be94bdfd532044e3671/e41b15e3fc3f7be94bdfd532044e3671.png?_i=AA 220w)
見やすいといえば見やすいのですが、ちょっと味気なさを感じます。
そこで、デフォルトで用意されているテーマを利用して、色を変えてみます。
個別に色を変えることもできます。
テーマによっては、文字が消えてしまうものもあるのでご注意ください。
テーマを利用する場合は、@startumlのあとに、!theme テーマ名と記述します。
@startuml
!theme united
自宅->会社:出社
会社-->自宅:退社
@enduml
_none_
!theme _none_
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055125/1fb6234c1dee3134224f15639fb59942/1fb6234c1dee3134224f15639fb59942.png?_i=AA 228w, https://res.cloudinary.com/dz7ruywxa/images/w_215,h_300,c_scale/f_auto,q_auto/v1638055125/1fb6234c1dee3134224f15639fb59942/1fb6234c1dee3134224f15639fb59942.png?_i=AA 215w)
amiga
!theme amiga
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055123/5ca0500c8a30671c8746293e56f6ff0f/5ca0500c8a30671c8746293e56f6ff0f.png?_i=AA 280w, https://res.cloudinary.com/dz7ruywxa/images/w_275,h_300,c_scale/f_auto,q_auto/v1638055123/5ca0500c8a30671c8746293e56f6ff0f/5ca0500c8a30671c8746293e56f6ff0f.png?_i=AA 275w)
aws-orange
!theme aws-orange
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055121/a364148cc208471896b240cb1add77f1/a364148cc208471896b240cb1add77f1.png?_i=AA 534w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_230,c_scale/f_auto,q_auto/v1638055121/a364148cc208471896b240cb1add77f1/a364148cc208471896b240cb1add77f1.png?_i=AA 300w)
black-knight
!theme black-knight
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055119/583061c67a118a5e5cd673e30cbc1dcb/583061c67a118a5e5cd673e30cbc1dcb.png?_i=AA 450w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_273,c_scale/f_auto,q_auto/v1638055119/583061c67a118a5e5cd673e30cbc1dcb/583061c67a118a5e5cd673e30cbc1dcb.png?_i=AA 300w)
bluegray
!theme bluegray
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055117/5e6f8ca72eb906bdc0da3129d1b4b051/5e6f8ca72eb906bdc0da3129d1b4b051.png?_i=AA 436w, https://res.cloudinary.com/dz7ruywxa/images/w_288,h_300,c_scale/f_auto,q_auto/v1638055117/5e6f8ca72eb906bdc0da3129d1b4b051/5e6f8ca72eb906bdc0da3129d1b4b051.png?_i=AA 288w)
blueprint
!theme blueprint
cerulean
!theme cerulean
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055113/3ad908e8763c3d22197f04c4d93fe922/3ad908e8763c3d22197f04c4d93fe922.png?_i=AA 442w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_276,c_scale/f_auto,q_auto/v1638055113/3ad908e8763c3d22197f04c4d93fe922/3ad908e8763c3d22197f04c4d93fe922.png?_i=AA 300w)
cerulean-outline
!theme cerulean-outline
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055112/90a916aac4fb7e1aba4cccad4504f43d/90a916aac4fb7e1aba4cccad4504f43d.png?_i=AA 436w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_274,c_scale/f_auto,q_auto/v1638055112/90a916aac4fb7e1aba4cccad4504f43d/90a916aac4fb7e1aba4cccad4504f43d.png?_i=AA 300w)
crt-amber
!theme crt-amber
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055110/6782b0b69e078fe2c157a98ff25fd022/6782b0b69e078fe2c157a98ff25fd022.png?_i=AA 264w, https://res.cloudinary.com/dz7ruywxa/images/w_262,h_300,c_scale/f_auto,q_auto/v1638055110/6782b0b69e078fe2c157a98ff25fd022/6782b0b69e078fe2c157a98ff25fd022.png?_i=AA 262w)
crt-green
!theme crt-green
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055107/6c5faf1b9193e797c7b410f7d875ce79/6c5faf1b9193e797c7b410f7d875ce79.png?_i=AA 254w, https://res.cloudinary.com/dz7ruywxa/images/w_251,h_300,c_scale/f_auto,q_auto/v1638055107/6c5faf1b9193e797c7b410f7d875ce79/6c5faf1b9193e797c7b410f7d875ce79.png?_i=AA 251w)
cyborg
!theme cyborg
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055106/44cf2900838e640023276bbed3c3779b/44cf2900838e640023276bbed3c3779b.png?_i=AA 432w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_276,c_scale/f_auto,q_auto/v1638055106/44cf2900838e640023276bbed3c3779b/44cf2900838e640023276bbed3c3779b.png?_i=AA 300w)
cyborg-outline
!theme cyborg-outline
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055104/e4147c39bdc41359fc2ca9ba429d188a/e4147c39bdc41359fc2ca9ba429d188a.png?_i=AA 434w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_278,c_scale/f_auto,q_auto/v1638055104/e4147c39bdc41359fc2ca9ba429d188a/e4147c39bdc41359fc2ca9ba429d188a.png?_i=AA 300w)
hacker
!theme hacker
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055102/a668121e2e4089deb4e64c16a6ca3cbe/a668121e2e4089deb4e64c16a6ca3cbe.png?_i=AA 444w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_274,c_scale/f_auto,q_auto/v1638055102/a668121e2e4089deb4e64c16a6ca3cbe/a668121e2e4089deb4e64c16a6ca3cbe.png?_i=AA 300w)
lightgray
!theme lightgray
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055100/ee3046e05d94ff4b38df1c6de68c57b8/ee3046e05d94ff4b38df1c6de68c57b8.png?_i=AA 436w, https://res.cloudinary.com/dz7ruywxa/images/w_268,h_300,c_scale/f_auto,q_auto/v1638055100/ee3046e05d94ff4b38df1c6de68c57b8/ee3046e05d94ff4b38df1c6de68c57b8.png?_i=AA 268w)
mars
!theme mars
materia
!theme materia
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055096/2e19bfe64e9f7c4992b2b613e897d33d/2e19bfe64e9f7c4992b2b613e897d33d.png?_i=AA 504w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_296,c_scale/f_auto,q_auto/v1638055096/2e19bfe64e9f7c4992b2b613e897d33d/2e19bfe64e9f7c4992b2b613e897d33d.png?_i=AA 300w)
materia-outline
!theme materia-outline
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055094/0e82142fbea11ad2699453e1c23def6a/0e82142fbea11ad2699453e1c23def6a.png?_i=AA 504w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_295,c_scale/f_auto,q_auto/v1638055094/0e82142fbea11ad2699453e1c23def6a/0e82142fbea11ad2699453e1c23def6a.png?_i=AA 300w)
metal
!theme metal
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055093/efed7a6d15b0cd23feb6f6f3ebcd099e/efed7a6d15b0cd23feb6f6f3ebcd099e.png?_i=AA 404w, https://res.cloudinary.com/dz7ruywxa/images/w_268,h_300,c_scale/f_auto,q_auto/v1638055093/efed7a6d15b0cd23feb6f6f3ebcd099e/efed7a6d15b0cd23feb6f6f3ebcd099e.png?_i=AA 268w)
mimeograph
!theme mimeograph
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055091/9da08f063a8cde9562cb42e1c0fc63e5/9da08f063a8cde9562cb42e1c0fc63e5.png?_i=AA 264w, https://res.cloudinary.com/dz7ruywxa/images/w_262,h_300,c_scale/f_auto,q_auto/v1638055091/9da08f063a8cde9562cb42e1c0fc63e5/9da08f063a8cde9562cb42e1c0fc63e5.png?_i=AA 262w)
minty
!theme minty
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055089/16a7e32441f7215caea5efcc11107f7f/16a7e32441f7215caea5efcc11107f7f.png?_i=AA 448w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_272,c_scale/f_auto,q_auto/v1638055089/16a7e32441f7215caea5efcc11107f7f/16a7e32441f7215caea5efcc11107f7f.png?_i=AA 300w)
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
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055071/d3d7306921f86fae8cedc97b4977ddd3/d3d7306921f86fae8cedc97b4977ddd3.png?_i=AA 442w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_274,c_scale/f_auto,q_auto/v1638055071/d3d7306921f86fae8cedc97b4977ddd3/d3d7306921f86fae8cedc97b4977ddd3.png?_i=AA 300w)
silver
!theme silver
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055069/48beea57438b2e8c40bc227abc83e6dc/48beea57438b2e8c40bc227abc83e6dc.png?_i=AA 420w, https://res.cloudinary.com/dz7ruywxa/images/w_275,h_300,c_scale/f_auto,q_auto/v1638055069/48beea57438b2e8c40bc227abc83e6dc/48beea57438b2e8c40bc227abc83e6dc.png?_i=AA 275w)
sketchy
!theme sketchy
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055067/a9a24668c125fa6ccb95e4f0efa54ba2/a9a24668c125fa6ccb95e4f0efa54ba2.png?_i=AA 438w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_279,c_scale/f_auto,q_auto/v1638055067/a9a24668c125fa6ccb95e4f0efa54ba2/a9a24668c125fa6ccb95e4f0efa54ba2.png?_i=AA 300w)
sketchy-outline
!theme sketchy-outline
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055065/0d367b8a4695189050591fa30ba2e152/0d367b8a4695189050591fa30ba2e152.png?_i=AA 432w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_279,c_scale/f_auto,q_auto/v1638055065/0d367b8a4695189050591fa30ba2e152/0d367b8a4695189050591fa30ba2e152.png?_i=AA 300w)
spacelab
!theme spacelab
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055064/99df8a5366d697f831074364f6f8854f/99df8a5366d697f831074364f6f8854f.png?_i=AA 446w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_272,c_scale/f_auto,q_auto/v1638055064/99df8a5366d697f831074364f6f8854f/99df8a5366d697f831074364f6f8854f.png?_i=AA 300w)
spacelab-white
!theme spacelab-white
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055061/28de0a49299ecaa8e0b585c349318f47/28de0a49299ecaa8e0b585c349318f47.png?_i=AA 444w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_278,c_scale/f_auto,q_auto/v1638055061/28de0a49299ecaa8e0b585c349318f47/28de0a49299ecaa8e0b585c349318f47.png?_i=AA 300w)
superhero
!theme superhero
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055059/d1ba1d39d051604d76ab9fb9a50838ce/d1ba1d39d051604d76ab9fb9a50838ce.png?_i=AA 446w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_274,c_scale/f_auto,q_auto/v1638055059/d1ba1d39d051604d76ab9fb9a50838ce/d1ba1d39d051604d76ab9fb9a50838ce.png?_i=AA 300w)
superhero-outline
!theme superhero-outline
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055057/b85fb1ef436e15cbd776708303f3ee91/b85fb1ef436e15cbd776708303f3ee91.png?_i=AA 448w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_272,c_scale/f_auto,q_auto/v1638055057/b85fb1ef436e15cbd776708303f3ee91/b85fb1ef436e15cbd776708303f3ee91.png?_i=AA 300w)
toy
!theme toy
united
!theme united
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055053/fd21e1b5d07a8237f8664e97cb38a75d/fd21e1b5d07a8237f8664e97cb38a75d.png?_i=AA 442w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_274,c_scale/f_auto,q_auto/v1638055053/fd21e1b5d07a8237f8664e97cb38a75d/fd21e1b5d07a8237f8664e97cb38a75d.png?_i=AA 300w)
vibrant
!theme vibrant
テーマによっては、出社・退社の文字が消えてしまっているものがあるのでその場合は、<color: 色></color>でくくることにより色を変更することができます。
@startuml
!theme united
自宅->会社:<color:blue>出社</color>
会社-->自宅:<color:blue>退社</color>
@enduml
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638055049/c2e04ab8184763048a4eb329ce77e9b3/c2e04ab8184763048a4eb329ce77e9b3.png?_i=AA 446w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_272,c_scale/f_auto,q_auto/v1638055049/c2e04ab8184763048a4eb329ce77e9b3/c2e04ab8184763048a4eb329ce77e9b3.png?_i=AA 300w)
エイリアス機能
分類子の名前を毎回書くと可読性が悪くなります。
そこでキーワード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(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638077907/13af91364aa7a0a0558fd3650c714f82/13af91364aa7a0a0558fd3650c714f82.png?_i=AA 586w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_253,c_scale/f_auto,q_auto/v1638077907/13af91364aa7a0a0558fd3650c714f82/13af91364aa7a0a0558fd3650c714f82.png?_i=AA 300w)
上記の例では、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(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638078805/6ef074ea8fd2b43952e69ffbf4f58b53/6ef074ea8fd2b43952e69ffbf4f58b53.png?_i=AA 558w, https://res.cloudinary.com/dz7ruywxa/images/w_224,h_300,c_scale/f_auto,q_auto/v1638078805/6ef074ea8fd2b43952e69ffbf4f58b53/6ef074ea8fd2b43952e69ffbf4f58b53.png?_i=AA 224w)
グループ分けをする
いくつかの処理をグループで分けて表示したいときがあります。
そういう場合は、altを利用します。
alt 認証が必要
u->s: 認証処理を実行
else 認証不要
u->s: 通常アクセス
end
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1659869556/c17fbf1a9c0f47c5810c21514fd0fe28/c17fbf1a9c0f47c5810c21514fd0fe28.png?_i=AA 634w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_224,c_scale/f_auto,q_auto/v1659869556/c17fbf1a9c0f47c5810c21514fd0fe28/c17fbf1a9c0f47c5810c21514fd0fe28.png?_i=AA 300w)
alt以外にも以下が利用可能です。
opt
loop
par
ref over
break
critical
group 任意のラベル名
利用するとラベルの部分が変わります。
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1659869553/17673ff6a537b629119c34739e8d91c1/17673ff6a537b629119c34739e8d91c1.png?_i=AA 414w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_165,c_scale/f_auto,q_auto/v1659869553/17673ff6a537b629119c34739e8d91c1/17673ff6a537b629119c34739e8d91c1.png?_i=AA 300w)
シーケンス図にタイトルをつける
なんのシーケン図なのかわかりやすくするために、タイトルをつけることができます。
title スマホでの検索について
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638079351/28d6121952fe864de6f4f8877617f989/28d6121952fe864de6f4f8877617f989.png?_i=AA 556w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_171,c_scale/f_auto,q_auto/v1638079351/28d6121952fe864de6f4f8877617f989/28d6121952fe864de6f4f8877617f989.png?_i=AA 300w)
title スマホでの検索について\n改行もできます
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638079347/22a9d091a38b2e7539ca49d1e4c613ee/22a9d091a38b2e7539ca49d1e4c613ee.png?_i=AA 664w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_212,c_scale/f_auto,q_auto/v1638079347/22a9d091a38b2e7539ca49d1e4c613ee/22a9d091a38b2e7539ca49d1e4c613ee.png?_i=AA 300w)
title 〜 endtitleで囲うと複数行の記入ができます。
title
スマホでの検索について
改行もできます
さらに改行
end title
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638079342/6b4322dabd2a4627aca101e067d424c3/6b4322dabd2a4627aca101e067d424c3.png?_i=AA 554w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_285,c_scale/f_auto,q_auto/v1638079342/6b4322dabd2a4627aca101e067d424c3/6b4322dabd2a4627aca101e067d424c3.png?_i=AA 300w)
メッセージにノートをつける
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(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638367260/559544fddcd3db636d7a974522cf9076/559544fddcd3db636d7a974522cf9076.png?_i=AA 580w, https://res.cloudinary.com/dz7ruywxa/images/w_280,h_300,c_scale/f_auto,q_auto/v1638367260/559544fddcd3db636d7a974522cf9076/559544fddcd3db636d7a974522cf9076.png?_i=AA 280w)
ノートの形を変える
線上にボックスを配置したいこともあるかと思います。その際は、ボックスの形を変え、色を変えると
分類子の上に、ボックスを配置することができます。
キーワード 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(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638367821/4b0c5ff0023fba712c136c8a073cc373/4b0c5ff0023fba712c136c8a073cc373.png?_i=AA 622w, https://res.cloudinary.com/dz7ruywxa/images/w_300,h_297,c_scale/f_auto,q_auto/v1638367821/4b0c5ff0023fba712c136c8a073cc373/4b0c5ff0023fba712c136c8a073cc373.png?_i=AA 300w, https://res.cloudinary.com/dz7ruywxa/images/w_150,h_150,c_fill,g_auto/f_auto,q_auto/v1638367821/4b0c5ff0023fba712c136c8a073cc373/4b0c5ff0023fba712c136c8a073cc373.png?_i=AA 150w)
区切りをつける(境界線)
シーケンスを書いていると、上の部分は、XX、これより下は、YYとか区切りをつけたくなることがあるかと思います。
== を利用します。
== ここから下は、別 ==
@startuml
== 初期化処理 ==
ユーザ -> サーバ: 認証要求
サーバ --> ユーザ: 許可
== 通常処理 ==
ユーザ -> サーバ: APIリクエスト
ユーザ <-- サーバ: レスポンス
@enduml
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638693913/ad18b0f664631f4afac2aef77f83e166/ad18b0f664631f4afac2aef77f83e166.png?_i=AA 370w, https://res.cloudinary.com/dz7ruywxa/images/w_181,h_300,c_scale/f_auto,q_auto/v1638693913/ad18b0f664631f4afac2aef77f83e166/ad18b0f664631f4afac2aef77f83e166.png?_i=AA 181w)
シーケンスに数字をつける
autonumberと宣言すると、シーケンスに添え字をつけることができます。
@startuml
autonumber # 添字開始
autonumber stop # 添字停止
autonumber 10 # 10から開始
autonumber resume # 再開
@startuml
autonumber
== 初期化処理 ==
ユーザ -> サーバ: 認証要求
サーバ --> ユーザ: 許可
autonumber stop
== 通常処理 ==
autonumber 10
ユーザ -> サーバ: APIリクエスト
ユーザ <-- サーバ: レスポンス
autonumber stop
@enduml
![PlantUML(プラントユーエムエル)でシーケンス図を書くぞ!](https://res.cloudinary.com/dz7ruywxa/images/f_auto,q_auto/v1638694727/29f71e34d06b5ef68e96f7e044da4401/29f71e34d06b5ef68e96f7e044da4401.png?_i=AA 414w, https://res.cloudinary.com/dz7ruywxa/images/w_204,h_300,c_scale/f_auto,q_auto/v1638694727/29f71e34d06b5ef68e96f7e044da4401/29f71e34d06b5ef68e96f7e044da4401.png?_i=AA 204w)