PlantUMLの基礎

はじめに

PlantUMLはオープンソースのUML描画ツールです。シーケンス図をはじめとしたUMLを書くことに特化したツールで、コードベースで書けるのが特徴です。無料で使えるのはもちろんのこと、作成するダイアグラムのファイルが軽量であるのと、動作も軽快で使い勝手が良い点も魅力です。エクセル、Visio等のGUIベースのツールとは全く違った使い勝手なので、慣れるまでは少し戸惑うかもしれませんが、それに余りあるほどのメリットがあります。今回はこのPlantUMLをインストールから簡単な使い方までを学んでいきましょう。

レッスン１．なぜPlantUMLを使うのか

PlantUMLは導入の部分でも説明したように、コードベースのUML描画ツールです。テキストエディタで書いたコードがダイアグラムとして出力されます。まずは、簡単なサンプルをご覧ください。左がコードで、右がそのプレビューです。見て分かる通り、たったこれだけのコードでシーケンス図が描けてしまいます。

コードも上記のように
-> が矢印、 <-- が点線矢印 など、直感的に分かりやすい文法になっています。 また、コードベースのUML描画ツールが持つメリットが３点ほどありますので、ご紹介します。

1.ファイルサイズが軽量

PlantUMLで描画したファイルは、先ほど例に示した左側のテキストエリアに書かれていたコードを保存します。画像ファイルとしての書き出しも可能ですが、オリジナルファイルとしてはテキストファイルになります。そのため非常に軽量に扱えるというのがメリットです。

2.バージョン管理ができる

PlantUMLの成果物をGit/SVNのリポジトリに保存しておけば、ダイアグラムのどの部分が変更されたのか、詳細な変更履歴を追うことができます。GUIベースのツールではバイナリデータ等で保存されているので、何が変更されたのかは追うことが難しいです。PlantUMLはダイアグラムをテキストファイルとして扱えるので、ソースコードのように扱うことができるのです。

3.比較、マージができる

巨大なUMLになってくると、複数人で分担して作ることもあります。その際に、ファイル同士を比較ツールを使ってマージすることができます。これによって同時編集が可能となるので、チーム開発においてはかなりのメリットとなることでしょう。

上記がGUIベースのツールにはないメリットになります。また、PlantUMLで書ける図はシーケンス図だけではありません。UMLのほとんどをサポートしています。

• シーケンス図
• ユースケース図
• クラス図
• アクティビティ図
• コンポーネント図
• ステートマシン図
• オブジェクト図
• 配置図
• タイミング図

他にも、ガントチャートやマインドマップ、ER図など多彩なダイアグラムを作成できます。

レッスン２．環境構築をする

PlantUMLを使うためには、下記のソフトウェアが必要になります。

1. Javaのランタイム
2. Visual Studio Code(VS Code)PlantUMLプラグイン
   • VS Code本体は事前にインストールされているものとします
   • シーケンス図、アクティビティ図以外の図を生成したいときにはGraphvizが必要（今回は使用しないので割愛します）

では、一つずつインストールを進めていきたいと思います。

Javaランタイムのインストール

まずはJavaのランタイムをインストールします。インストールパッケージを入手するために、下記のURLにアクセスします。
https://www.java.com/ja/download/

ページにアクセスしたら、赤いボタンの「同意して無料ダウンロードを開始」を押します。

ファイルがダウンロードされたら、さっそく実行してみましょう。「インストール」を押してください。

暫く待つとインストールが完了します。

完了したら、ウィンドウを閉じてください。

VS Codeプラグインのインストール

では続いて、VS Codeのプラグインをインストールします。VS Codeを開いて、左のツリーから拡張機能の検索ウィンドウを開きます。

検索ウィンドウにplantと入力すると、一番上に「PlantUML」が表示されると思いますので、インストールを押します。

インストールが完了したら、PlantUMLを使う準備ができました。

レッスン３．基本操作

では、インストールが終わったので、早速基本操作を学んでみましょう。今回は最も基本となるシーケンス図を描いてみたいと思います。VS Codeで新規ファイルを開いてください。

お試しで、以下のコードを入れてみましょう。

@startuml
Bob -> Alice
@enduml

コードが準備出来たら一旦ファイルを保存します。「Ctrl+S」で保存ダイアログを出します。ファイルの種類は「PlantUML」を選択しましょう。

ファイル名は「test」と付けました。これで保存しましょう。

保存が無事出来たら、シンタックスハイライトが効くようになり、コードに色が付いたと思います。

ではシーケンス図を表示してみましょう。キーボードの「Alt+D」を押します。

シーケンスが表示されたでしょうか？表示されない場合には、一度コード内をクリックする等をお試しください。それでもプレビューウィンドウが表示されない時には下記の方法をお試しください。

右クリックから表示する

コード内を右クリックし、コンテキストメニューから「カーソル位置のダイアグラムをプレビュー」を選んでください。

コマンドパレットから表示する

コンテキストメニューからも表示できない場合は、メニューバーから「表示→コマンドパレット」と進みます。

コマンドパレットが表示されたら、「plant」と入力し、「カーソル位置のダイアグラムをプレビュー」を選びます。

これらいずれかの方法でプレビューウィンドウが表示されるかと思います。では、表示されたダイアグラムを画像として保存する方法も試してみましょう。コードウィンドウを右クリックして、「ファイル内のダイアグラムをエクスポート」を選びましょう。

保存したい形式を選びます。今回は画像ファイルにしたいので「PNG」を選びます。

拡張子を選ぶと即座に保存されますので、この「test.wsd」が保存されているディレクトリに移動すると、testというフォルダがあり、その中に画像ファイルが保存されています。他の拡張子で保存した場合もこのフォルダに一緒に格納されていきます。

ファイル形式は様々なものに対応しており、SVGやテキストなどにも対応しています。ちなみに、テキストとして出力すると、下記のようになります。画像が使えないケースで役立つことでしょう。

最後にファイルの編集についてですが、ファイルが編集されると即座にプレビューに反映されます。試しに行をコピーして少し変更してみましょう。ここはお好みで自由に変更してみてください。右側のプレビューウィンドウに随時反映されると思います。

このように、ダイアグラムの出来上がりを確認しながら作成ができますので、とアイアン度エラーを繰り返しながら効率よく進めることができます。以上が基本操作になります。

おわりに

PlantUMLを使えば、バージョン管理ツールで管理ができますので、ソースコードと同じ場所に保存しておくことも可能です。それによって、紛失する恐れがないですし、手軽に更新も可能です。ソースコードの実態に即したUMLがすぐそばにある状態にしておけるのは様々なメリットがあります。ソフトウェア設計書を適切に管理するというのは思いのほか難しく、更新が続かないことが良くありますので、PlantUMLを活用して、低コストで運用できるよう考えてみるのが良いと思います。最後までお読みいただきありがとうございました。

次は、PlantUMLの実践応用としてシーケンス図を作成する記事を紹介します。