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投げてね!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です