プラントユーエムエル

みなさん、シーケンス図は何を使って書いていますか？ エクセルとかスプレッドシート、はたまた、draw.ioなど使っているかと思います。 私は、VSCode + PlantUMLで、シーケンス図を書いています。 ちなみに読み方は、「プラントユーエムエル」です。 https://plantuml.com/ja/ PlantUMLであれば、テキストベースのため、git管理でき、履歴管理できます。 シーケンスは、実装次第で変わっていきますよね。 シーケンス図だけでなく、 ユースケース図クラス図オブジェクト図コンポーネント図配置図状態遷移図タイミング図 等にも利用が可能です。 最近知ったのですが、システム構成図もかけるのですね。システム構成図を描く方は、以下を見てみてください。 https://zaitakukinmu.com/2022/10/29/kubernetes-plantuml/ 直感的にシンプルに記述できるのですが、ちょっと凝ったことをやろうとするとその都度、調べないといけなく面倒だったので、こちらにまとめてみることにしました。 PlantUML以外では、最近GitHubで、「Mermaid」記法が使えるようになったので、こちらの利用者も増えていくことでしょう。 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(Mac) or Alt + D(Windows)を押してみてください。 すると右側に、プレビューのウィンドウが表示されます。 こちらで動作確認としては、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 グループ分けをする いくつかの処理をグループで分けて表示したいときがあります。 そういう場合は、altを利用します。 alt 認証が必要 u-&gt;s: 認証処理を実行 else 認証不要 u-&gt;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-&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(プラントユーエムエル)でシーケンス図を書くぞ！