PlantUMLでテキストベースのER図・フロー図などのダイアグラムを書いてみる

皆さん設計書ってどのようにつくってますか？

通常ですと、ExcelやWord、デザインツールやER図などはWorkbentchなどの自動出力にお任せしていると思います。

ただ、こういったツールだと変更にとても時間がかかる場合があります。（そもそもソフトが重かったり…）

そんなときに便利なのがPlantUMLです！

PlantUMLってなんなのさ？

簡単なテキストベースで記述することで自動でビジュアライズしてくれる言語(Dot言語がベースらしい)です。

作れるダイアグラムは2019年10月現在で下記の通りサポートが充実

• シーケンス図
• ユースケース図
• クラス図
• アクティビティ図（古い文法はこちら）
• コンポーネント図
• 状態遷移図（ステートマシン図）
• オブジェクト図
• 配置図
• タイミング図
• ワイヤーフレーム
• アーキテクチャ図
• 仕様及び記述言語 (SDL)
• Ditaa
• ガントチャート
• マインドマップ
• WBS図(作業分解図)
• AsciiMath や JLaTeXMath による、数学的記法
• ER図

いまいち流行っている気がしませんが、是非とも流行らせたい。

テキストベースなので、git管理も楽チン。変更点もわかりやすくなります。

出力もpng,svgもサポートしていてweb描画もコマンド一発で簡単です。

触ってみた欠点

htmlクライアントベースでのjs描画ツールがなさそう…なところ(nodeではありますのでサーバーインストールできれば問題ないかも)

公式サイトにダイアグラムをエンコードしてgetリクエストを投げると画像が取得できるみたいだが、

オープンにしたくない非公開情報は困りです。

オンラインパーサーはこちら

サンプル

@startuml

' hide the spot
hide circle

' avoid problems with angled crows feet
skinparam linetype ortho

entity "Entity01" as e01 {
  *e1_id : number <<generated>>
  --
  *name : text
  description : text
}

entity "Entity02" as e02 {
  *e2_id : number <<generated>>
  --
  *e1_id : number <<FK>>
  other_details : text
}

entity "Entity03" as e03 {
  *e3_id : number <<generated>>
  --
  *e1_id : number <<FK>>
  other_details : text
}

e01 ||..o{ e02
e01 |o..o{ e03

@enduml

インストール方法

PlantUML自体はJavaで作られているらしいので、下記を参照に自身のローカル環境にインストールしてください。

グラフ描画にGraphvizも利用しているらしいので別途インストールします。

http://plantuml.com/ja/starting

個人的にはnodeで移植されたnode-plantumlがおすすめ。

npmが利用できていれば下記でインストールできます。

npm install node-plantuml -g

Visual Studio Codeのプラグインや
Intellijのプラグインもあるので
そこまで困りません。

その他詳しい使い方はググってみてもらえた方がいいかと…

PHPのパーサーを作ってみた

とりあえず、私の場合ER図を読み取り・出力をPHPからやりたかったのでpackageを作ってみました。

https://github.com/ateliee/plantuml-parser

できることとしてはファイルからの読み取り(テキストパース)、書き込み(出力)でノードオブジェクトとして入出力ができる簡単なものです。

frameworkのmodelからプロパティやリレーションを読み取り、自動でダイアグラム出力…とかもできると思います。

いまのところシンプルなER図のみなのでさらに拡張していくかも(?)

コミッターも募集してますので気軽にPullRequest投げてね！