こんばんは！
仕様書に書く図ってチームで管理する上で統一感を出すのって難しいですよね。 私の場合、色や枠線などのデザインも人によって微妙に違ったりすることも多かったのですが、 そのせいで別の仕様書にコピペするとデザインが合わずキモチワルイ感じになってしまい、 結局デザイン修正に工数がかかり、本来やるべきプログラミングの時間が削られて…といった具合でした。
ではデザインのルールを決めて順守すれば良いのかといえばそれも正直ツラいので、つい先日ツールで図を自動生成する方向に舵を切ることにしました。
今回、その生成に「PlantUML」を使ったので紹介していきたいと思います。
PlantUMLとは
テキストベースでクラス図、シーケンス図、ER図といった仕様をまとめる際に使うグラフを記述し、出力できるコンポーネントです。
Javaで開発されており、様々な環境で利用することが可能です。 当記事ではVSCodeでの利用方法を紹介していきます。
つべこべ言わずに試したい！
公式でWebで実行できる環境を用意してくれています。 テキストボックスに記述すれば図が随時出力されますので、いろいろ弄ってみると良いと思います。
メリット
テキストデータとしてER図を管理できる
PlantUMLの良いところはなんといってもソースコードのようにテキストで記述できることです。 つまりGitでバージョン管理も容易にできるということですね。
エクセルのようなバイナリデータと違って差分を確認しやすいので、変更が多いケースでは力を発揮するのではないでしょうか。
誰が書いても同じER図が作成できる・レイアウトで悩まない
図を書くとなると厳格にルールを決めない限り、どうしても人によって見た目のブレが出てきます。 PlantUMLで図を出力すると誰が書いても同じデザインになるので、記述する内容自体に集中できます。
図ってほんとルールを決めないと人によってブレが大きいんですよね…😑
VSCodeでリアルタイムにプレビューを確認しながら書ける
VSCodeでプログラミングする感覚で図が書けます。 記述した内容は別タブで図として随時確認も可能。
VSCodeでPlantUMLを使ってみる
実行環境
OS: Windows 10 Home 20H2
$ java -version java version "1.8.0_291" Java(TM) SE Runtime Environment (build 1.8.0_291-b10) Java HotSpot(TM) Client VM (build 25.291-b10, mixed mode, sharing)
実行環境を用意
実行にはJavaが必要です。 公式でガイドに沿って、必要なエンジン、ソフトをインストールしておきます。
VSCodeの拡張機能を追加
VSCodeでリアルタイムにプレビューしたり、画像出力できる便利な拡張機能PlantUMLがありますので追加しましょう。
ER図を書く
では、単純な１対多の関係を持つテーブルのER図を書いてみます。
uml-test.wsd
@startuml
entity user {
* user_id(pk)
--
name
create_at
update_at
}
entity favorite_movie {
* favorite_movie_id(pk)
--
user_id(fk)
name
create_at
update_at
}
user ||--|{ favorite_movie
@enduml
文頭に@startuml、文末に@endumlを記述し、PlantUMLの記法であることを明示します。
entity *** { *** }はテーブルを示しています。
{ }の中にはカラムを記述しています。
ここではuserテーブルとfavorite_movieテーブルの２つがあるという想定になっています。
user ||--|{ favorite_movieは、テーブル同士の相関関係を示しています。
この例ではuserテーブルとfavorite_movieテーブルは１対多の関係であることを示しています。
細かい記述のルールは下記を参照ください。
プレビューする
F1キーを押し、PlantUML: Preview Current Diagramを選択します。
すると横にタブが開き、記述したテキストをもとに図が表示されるはずです。 もし、表示されない場合はJavaがインストールされていない等といった実行環境の不備がないか確認しましょう。
ER図を出力する
今度はPNG出力してみましょう。
F1キーを押し、PlantUML: Export Current Diagramを選択します。
出力ファイル形式がさらに選択できるのでpngを選択します。
成功すればダイアログが表示され、ファイルと同名の新規ディレクトリ内にpngファイルが生成されます。 ただ私の環境では若干フォントがプレビュー時と異なる形で出力されたので、完全にプレビュー時と同じものというわけではないようです。
使ってみて
ER図以外にもシーケンス図もPlantUMLで書くようにしたのですが、デザインに悩む時間が大幅に減ったのでかなり時間的にも精神的にも楽になりました。
記述するテキスト側はエンティティ同士の関係性を書くことが主軸になるところが、プログラムチックで良いと思いました。 継続して使っていきたいツールです😆
