Visual Studio Codeでシーケンス図を描く(PlantUML拡張機能)

VSCodeでシーケンス図などのUMLを描くことができる拡張機能を紹介します。

ドキュメントに関しては、テーブル定義やAPI仕様など必要最低限のみを作成するようにしているのですが、シーケンス図は詳細設計や実装前のフローの整理ということでよく描きます。
この拡張機能を使うと、楽に作成できるようになり、Git上でも管理できるようになります。

PlantUML

PlantUMLはUML図を記述するためのドメイン特化言語です。

シーケンス図の書き方については、こちらの方の記事に詳しく記載されています。

PlantUML - シーケンス図 | プログラマーズ雑記帳

PlantUML拡張機能

VSCodeで、PlantUMLのシンタックスハイライトやプレビュー、ファイルへの出力などを行う拡張機能が開発されています。

marketplace.visualstudio.com

"PlantUML"で検索して、インストールします。

f:id:ohke:20171122084120p:plain

この拡張機能は、拡張子.puのファイルをPlantUMLファイルとして認識しますので、.puファイルにPlantUMLで記述していきます。
例えば、簡単なブログページの表示をシーケンス図をPlantUMLで表現すると、こんなコードになります。

/'
ブログのシーケンス図
- ブラウザでトップページを表示する
- JavaScriptで通知件数を表示する
'/

@startuml

actor Browser as browser
participant BlogWeb as web
participant BlogAPI as api
database BlogDB as db

activate browser

group 画面の表示
    browser -> web :トップページにランディング\nGET: ohke.hogeblog.jp
    activate web
    web -> db :トップに表示するエントリを取得
    db --> web :
    web --> browser :トップページを表示
    deactivate web
end

group 通知の表示
    browser ->> api :ユーザへの通知情報をリクエスト\nGET api.hogeblog.jp/notify/ohke
    activate api
    api -> db :ohkeへの通知を取得
    db --> api :
    api --> browser :通知情報をレスポンス\n{"count":2,"messages":[...]}
    deactivate api
    alt countが1以上
        browser -> browser :件数をアイコンの横に表示
    end
end
note right: ロードしたnotify.jsから実行

deactivate browser

@enduml

.puファイルを編集中に、Alt+Dでプレビューを表示できます。

f:id:ohke:20171123104021p:plain