PlantUML

みなさん、シーケンス図は何を使って書いていますか？ エクセルとかスプレッドシート、はたまた、draw.ioなど使っているかと思います。 私は、最近は、VSCode + PlantUMLで、シーケンス図は書いています。 https://plantuml.com/ja/ PlantUMLであれば、テキストベースでデータを管理できるので、変更が発生した場合のやり直しやgit等で扱えば、履歴管理も楽に行えるので便利です。 シーケンス図だけでなく、 ユースケース図クラス図オブジェクト図コンポーネント図配置図状態遷移図タイミング図 等にも利用が可能です。 最近よく使うようになり、簡単な記述は本当に直感的にシンプルに記述できるのですがちょっと凝ったことをやろうとするとその都度、調べないといけなく面倒だったので、こちらにまとめてみることにしました。 VSCodeでPlantUMLを表示できるようにする VSCodeがインストールされている事が前提になります。 まずは、ローカルマシンに、いくつか必要なパッケージをインストールします。 JavaGraphvizPlantUML # 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のインストールは、以下から可能です。 https://azure.microsoft.com/ja-jp/products/visual-studio-code/ 私の環境では、VSCodeのバージョンは、1.62になります。 赤枠のアイコンをクリックし、「PlantUML」を検索して、一番最初のものをインストールします。 installをクリックしてインストールします。 VSCodeのプラグインの動作確認をする 前項のインストールが完了したら、新規でファイルを作成します。 拡張子は、以下のいづれかにします。 .wsd.pu.puml.plantuml.iuml 作成したら、以下のコードを貼り付けてみてください。 @startuml 自宅-&gt;会社:出社 会社--&gt;自宅:退社 @enduml この状態で、option + Dを押してみてください。 すると右側に、プレビューのウィンドウが表示されます。 こちらで動作確認としては、OKになります。 基本の書き方 以下の図では、自宅、会社が分類子になります。 シーケンスを-&gt;で記述して、分類子間をつなげていきます。 可読性という意味では、戻りのシーケンスは、&lt;-で記述した方がよいかもしれません。(下のコードの上下どちらも同じ表示になります。) @startuml 自宅-&gt;会社:出社 会社--&gt;自宅: 退社 自宅-&gt;会社:出社 自宅&lt;--会社:退社 @enduml 分類子の種類 分類子には、以下のようなものがあります。 participantactorboundarycontrolentitydatabasecollectionsqueue シーケンス図の色を変えてみる こちらの配色のサンプルをよく見るかと思います。 見やすいといえば見やすいのですが、ちょっと味気なさを感じます。 そこで、デフォルトで用意されているテーマを利用して、色を変えてみます。 個別に色を変えることもできます。 テーマによっては、文字が消えてしまうものもあるのでご注意ください。 テーマを利用する場合は、@startumlのあとに、!theme テーマ名と記述します。 @startuml !theme united 自宅-&gt;会社:出社 会社--&gt;自宅:退社 @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 テーマによっては、出社・退社の文字が消えてしまっているものがあるのでその場合は、&lt;color: 色&gt;&lt;/color&gt;でくくることにより色を変更することができます。 @startuml !theme united 自宅-&gt;会社:&lt;color:blue&gt;出社&lt;/color&gt; 会社--&gt;自宅:&lt;color:blue&gt;退社&lt;/color&gt; @enduml エイリアス機能 分類子の名前を毎回書くと可読性が悪くなります。 そこでキーワードasを使って分類子の別名をつけることができます。 @startuml hide unlinked participant Participant as Foo actor Actor as Foo1 boundary Boundary as Foo2 control Control as Foo3 Foo-&gt;Foo1: Participant-&gt;Actor Foo-&gt;Foo2: Participant-&gt;Boundary @enduml 上記の例では、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-&gt;s: スマホ利用 s-&gt;sv: アクセス sv-&gt;d: 検索 d--&gt;sv: 結果 sv--&gt;s: 表示 s-&gt;u:確認 @enduml シーケンス図にタイトルをつける なんのシーケン図なのかわかりやすくするために、タイトルをつけることができます。 title スマホでの検索について title スマホでの検索について\n改行もできます title 〜 endtitleで囲うと複数行の記入ができます。 title スマホでの検索について 改行もできます さらに改行 end title メッセージにノートをつける note right, note left, note overでメッセージにノートをつけることができます。 なぜに、centerではなく、overなのかと。overの方がしっくりくるけど、left, rightとあったらcenterがよかった。overが思い出せないですｗ @startuml title メモ書き A-&gt;B note left of A Aの左にメモ end note B-&gt;C note over of B Bの上にメモ end note C--&gt;B B--&gt;A note right of C Cの右にメモ end note @enduml ノートの形を変える 線上にボックスを配置したいこともあるかと思います。その際は、ボックスの形を変え、色を変えると 分類子の上に、ボックスを配置することができます。 キーワード hnote と rnote を使ってノートの形を変更できます。 @startuml title メモ書き A-&gt;B hnote left of A hnote: 六角形 end note B-&gt;C rnote over of B #red rnote: 四角 end note C--&gt;B B--&gt;A hnote right of C hnote: 六角形 end note @enduml 区切りをつける(境界線) シーケンスを書いていると、上の部分は、XX、これより下は、YYとか区切りをつけたくなることがあるかと思います。 == を利用します。 == ここから下は、別 == @startuml == 初期化処理 == ユーザ -&gt; サーバ: 認証要求 サーバ --&gt; ユーザ: 許可 == 通常処理 == ユーザ -&gt; サーバ: APIリクエスト ユーザ &lt;-- サーバ: レスポンス @enduml シーケンスに数字をつける autonumberと宣言すると、シーケンスに添え字をつけることができます。 @startuml autonumber # 添字開始 autonumber stop # 添字停止 autonumber 10 # 10から開始 autonumber resume # 再開 @startuml autonumber == 初期化処理 == ユーザ -&gt; サーバ: 認証要求 サーバ --&gt; ユーザ: 許可 autonumber stop == 通常処理 == autonumber 10 ユーザ -&gt; サーバ: APIリクエスト ユーザ &lt;-- サーバ: レスポンス autonumber stop @enduml

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