1. ホーム /
  2. Blog /
  3. 開発 /
  4. [VSCode] PlantUMLでフロー図を描こう！
開発

[VSCode] PlantUMLでフロー図を描こう！

  • 2023.02.05
  • by ShinyaTomozumi
  • 0

組織で開発を行っていると、処理のフロー図が必要になってくるケースがあります。
特にフロントエンドからAPI連携や別サービスと連携する処理が多い場合に、シーケンス図で描くと理解しやすいです。
最近の開発はフロー図を使って開発するケースは少なくなっておりますが、過去に部下に実装指示する場合やクライアントに処理を説明する場合に「PlantUML」を使って行いました。
個人開発でも複雑な処理になるケースでは、一旦フロー図で全体を眺めるために設計する事はあります。
そこで「Visual Studio Code」を使って「PlantUML」で処理の設計書を描いていきましょう。

環境

  • Mac (Intel 2018) Ventura 13.1
  • Java8(1.8.0)

「VisualStudioCode」に「PlantUML」をインストールしよう

「VisualStudioCode」(以降は「VSCode」と省略)をインストールします。
「VSCode」をインストールした状態で、以下のページにアクセスして「PlanUML」のプラグインをインストールします。

https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml
 上記のページ内にある「install」ボタンを押せば、「VSCode」プラグインとしてインストールされます。
また使用する場合には「Java」も、インストールする必要があります。
なおMac環境では、様々な「Java」をインストールする方法がありますが、私の環境では「Homebrew」を使用してインストールしております。

「PlantUML」でシーケンス図を作成する

「VSCode」を開き、新規作成を行います。

VSCode画面

「VSCode」の左下（図の①)をクリックします。
図の②の検索欄にカーソルがいくので、「plantuml」と入力すると「PlantUML」が現れるので選択します。
これでPlantUMLを描くようになります。
まずはサンプルとして以下の内容を記述してみましょう。 

@startuml
Alice -> Bob: Authentication Request
Bob --> Alice: Authentication Response

Alice -> Bob: Another authentication Request
Alice <-- Bob: another authentication Response
@enduml

UML図を表示するためにキーボードショートカット「option + d」を押します。

UML図の表示

上記のようにUML図が表示され、処理の流れがわかるようになります。
保存する場合は、拡張子に「.pu」形式で保存するようにします。
「PlantUML」の仕様は、以下のサイトを参考にしながら記述するとよろしいかと思います。

https://plantuml.com/ja/

「PlantUML」の記述例

先ほど説明しただけでは内容が完結すぎるので、私がよく使ってる方法を公開します。
「PlantUML」の記述方法も、プログラム同様に変数やインデントを意識して記述した方が、後からみた時に編集や確認する場合に、記述箇所がわかりやすくなります。 

@startuml
title シーケンス図

participant メイン処理 as Main
participant サービスA as ServiceA

' サービス処理Aについて記述
group サービスAの処理 
    
    Main -> ServiceA : データを送る 
    ServiceA -> Main : 結果を受け取る

    alt エラー発生時
        Main -> Main: エラー処理
        note over Main #FFAAAA: エラーを表示
    end
end

@enduml

上記の「PlantUML」で説明すると、まず「title」で説明を記述します。
次に分類子の宣言を行い、日本語と英語のキーボード変換を行わないようにすると、少しでも面倒くささが無くなります。
長い処理の場合には、処理をグループごとで分類しておくと乱雑にならなくなります。
またコメントを記述は「‘ (シングルクォート)」になります。
if文は「alt」となり、この辺りはよく使う内容となります。
またエラー時のメッセージの色を赤くする等、メッセージの種類によって色を変更すると、図が見やすくなります。

PlantUMLの記述例

組織で開発する場合に、よく設計書を行いますので、記述のフォーマットを決めておくといいかもしれません。

作成したシーケンス図を画像として書き出す

シーケンス図をWordやExcelに貼り付けたい場合があります。
その場合は、画像に書き出すことが可能です。

画像の書き出し

「VSCode」上で「Shift + Command(Ctrl) + P」を同時に押すと、以下のように実行メニューが表示されます。

実行メニュー

このメニューに「PlantUML」と入力すると、「PlantUML: ファイル内のダイアグラムをエクスポート」がありますので選択します。
選択すると、以下のように画像の拡張子を選択して書き出しを行います。

画像の拡張子を決定する

以下が書き出した画像となります。

書き出した画像

書き出し時には、「graphviz」というライブラリが必要となりますので、もしエラーとなった場合は正しくインストールされているかご確認ください。