PlantUMLを使って、図を描く仕事を楽にしよう

テックメンターのかなしーです。
今回はシーケンス図作成の効率化について紹介します。


シーケンス図を書くたびに、ExcelやPowerPointを開いていないだろうか。

• 矢印を動かしたら全体が壊れる
• 人によって書き方が違う
• 差分が取れない
• 直すのが面倒で放置される

おそらく多くのSEが、すでに一度は通ってきた道だと思う。 PlantUMLは、このような悩みに一筋の光を差し込むツールだ。
「図をきれいに描く」のではなく、 「書くことそのものを楽にする」ためのツールである。

図を「描く」のをやめて、コードで書く。

PlantUMLでは、図はコード。

• 登場人物を書く
• 処理を上から順に並べる

マウス操作も、配置調整もいらない。 コードを書いていると、勝手に図になっていく。

導入：最小構成で始める

筆者の環境は以下。

• Windows 11
• VS Code
• Java Runtime

これだけで PlantUML は動く。

1. Java が入っていることを確認する
PlantUMLはJava上で実行される。 JDKは不要、runtimeだけで十分。

java -version</pre>
が通れば準備完了。<br>
<br>
<b>2. VS Code に PlantUML 拡張を入れる</b><br>
VS Codeの拡張機能から <b>PlantUML</b> をインストールする。 追加のバイナリや plantuml.jar は不要。<br>
拡張機能が内部でPlantUMLを実行してくれる。<br>
<br>
<b>3. 以上で準備完了</b><br>
<span style="font-size: 120%">例1：2段階認証のシーケンス</span>
メールで一時キーを送る、よくある2段階認証。

<pre><code>@startuml
actor ユーザー as User
participant WEBアプリ as webapp
participant 認証システム as AuthService
participant メールサービス as MailService

User -> webapp++: ID/パスワード入力
webapp -> AuthService: 認証要求を非同期実行
return httpStatus 200

AuthService -> AuthService++: 一時キー生成
AuthService -> MailService--++: 一時キー送信
MailService -> User--:認証メール

User -> webapp++: 一時キー入力
webapp -> AuthService++: 一時キー検証
return 認証成功
return ログイン完了
@enduml

↑このコードが ↓こうなる

これを書くだけで、

• 一時キーのライフサイクル
• Webアプリがロジックを持たない構造
• 非同期処理の境界

が自然に整理される。
完成形を考えてから描く必要はない。 書いている途中で設計が見えてくる。

例2：承認フロー（差戻しあり）
業務システムでよくある承認フロー。

@startuml
actor 申請者 as user1
participant Webアプリ as webapp
participant 承認サービス as ApprovalService
participant 通知サービス as NotifyService
actor 承認者 as Approver

user1 -> webapp : 申請作成
webapp -> ApprovalService : 下書き保存
note right of ApprovalService : 状態=下書き

user1 -> webapp : 申請提出
webapp -> ApprovalService++ : 申請提出
note right of ApprovalService : 状態=承認待ち

ApprovalService -> NotifyService--++ : 承認依頼通知
NotifyService -> Approver-- : 通知

Approver -> webapp++: 申請内容確認

alt 承認
    webapp -> ApprovalService++ : 承認
    note right of ApprovalService : 状態=承認済
    ApprovalService -> NotifyService--++ : 承認通知
    NotifyService -> user1-- : 通知
else 差戻し
    webapp -> ApprovalService--++ : 差戻し
    note right of ApprovalService : 状態=差戻し
    ApprovalService -> NotifyService--++ : 差戻し通知
    NotifyService -> user1-- : 通知
end
@enduml

↑このコードが ↓こうなる

ここで見たいのは、

• 主役は「申請データ1件」
• 状態がどう遷移するか
• 誰が、どこまで操作できるか

Excelだと、これを書くのはかなりしんどい作業になると思う。 筆者は、構想後、実際にplantumlでのコードを書く作業自体は10分ほどで終わっている。

テキストで管理できるのが強い

PlantUMLは、ただのテキストファイル。

• Gitで差分が取れる
• PRでレビューできる
• Markdownと同じ感覚で管理できる
• 書き方が自然に揃う

バイナリファイル管理のしんどさから解放される。

まとめ

PlantUMLは、

• 図を書くハードルを下げる
• 途中でも成立する
• 壊れても直しやすい

「またExcelで図を描くのか…」と思ったら、 PlantUMLを使って、図を書こう。