VisualStudioCodeでPlantUMLを使う

PlantUMLというUMLのダイアグラム各種を簡単に書けるツールがある。
WordやExcelでフローチャートやらを描いていると、実に面倒である。GUIでクラス図を描いたりするソフトがあるけれども、シーケンス図やアクティビティ図が必要なのだ。で、それを簡単な記法からササッと生成してくれる素敵ツールがPlantUMLである。

シーケンス図の例

例えば、WordPressのテーマを自動デプロイする記事で紹介したような、WordPressのテーマ自動ビルド&デプロイを自分はこういう手順を仕込んでいる。
GitHubのマスターへのプッシュを起点に…
1. GitHubのマスターへプッシュ
2. GitHubがTravisCIへマスターをプッシュ
3. TravisCIがマスターからプレリリースブランチを切る
4. TravisCIでコードチェックと自動ビルド
5. TravisCIがリリースへプッシュ
6. GitHubのWebhooksで本番のWordPressへコミット内容を送信
7. プラグインのWP-Pusherが受け取って、テーマディレクトリを更新
文字だけだと何だか分かりづらい。
これをシーケンス図で表すとこうである。
上から下へ時間が進む、おおむね左から右へデータが渡されていく。
WordPressテーマ自動デプロイ シーケンス図
これを生成するためのテキストが、

Master -> PreRelease:Push & Checkout
Activate PreRelease
PreRelease -> PreRelease :CodeSniffer

このように簡単に書けるので、図を作るのが楽です。
ただし、レイアウトの融通はほとんど利かない。
これがVisual Studio Codeのプラグインになっているので、プレビュー&画像書き出しまでやってくれる。SVGファイルで書き出せるので印刷もOK。
まさに、こういうのを探していた。

PlantUMLの環境を用意する

Visual Studio Codeのインストールと使い方は、この記事では割愛します。
(執筆時点での最新版はVer1.13.1)
VSCodeの拡張機能からPlantUMLを検索してインストール。
Visual Studio Code プラグイン インストール
最低限必要なのがJava Runtime環境
あと、シーケンス図を描くには、 Graphizの最新安定版。

Graphviz – Graph Visualization Software

様々な「グラフ」を描画してくれるツール・ライブラリ群ですね。
どちらも入れてなかったら、プラグインがエラー画面で教えてくれます。
Graphizはなくても、シーケンス図以外は描けると思います。

PlantUMLを記述する

では、簡単にテキストを書いてみて、図のプレビューと書き出しをしてみます。
こういう感じで書いたら…
PlantUML 簡単なサンプル
Alt+d でプレビューです。コマンドパレットからも、もちろんできます。
一旦プレビューを表示するとキャッシュされて、テキストを変更すると自動的に図が更新されていきます。
プレビュー生成とUML図作成のアニメーション
後はもうサクサクと図を描いていきます。描ける図は以下の通り。

PlantUMLは以下のような図を手早く書くためのオープンソースプロジェクトです。
シーケンス図
ユースケース図
クラス図
アクティビティ図 (here is the legacy syntax)
コンポーネント図
状態遷移図
オブジェクト図
Deployment diagram
Timing diagram

記法は公式サイトにリファレンスがありますが、サイトでは広告多くて見づらいです。PDF版もあるので参照しましょう。
PlantUML Language Reference Guide
こちらのサイトも分かりやすいです。
PlantUML の使い方 ―プログラマーズ雑記帳

画像を書き出す

PlantUML対応の拡張子ならば右クリックでメニューを呼び出すこともできます。
「ダイアグラムをエクスポート」
PlantUMLの画像書き出しスクリーンショット
次に出力ファイルのフォーマットを選びます。
PlantUML 書き出しファイル選択
様々なフォーマットで書き出せますが、特にSVGで出力ができるのが便利です。今はSVGのWEBページ埋め込みも簡単ですね。
SVGによる自動デプロイのシーケンス図
UML図を描くのは手段です。ササッと描いて、本来の目的であるリファクタリングなりプレファクタリングなり、問題の把握や解析をしようじゃないか。
今回作成したシーケンス図は下記の通り。

Comments