Edited at

テキスト入力でUMLをライブプレビューしてくれるツール(plantuml-viewer:Atomプラグイン)

More than 3 years have passed since last update.

複雑なコードを解析するときなど、UMLが簡単に書けるツールがほしかったところ、良いツールがあったので導入してみました。

Mac OS X El Capitan‎に導入する場合にplantuml-viewerが表示されないなど、少しハマったのでメモを残します。


ツール

Atom(テキストエディタ) + PlantUML(プラグイン)

※Macの場合、上記を利用するために「Java実行環境(JRE)」「Homebrew」「Graphviz」が必要

PlantUML


導入経緯


  • ExcelでUMLを書くのが煩わしい

  • 本格的なツールを導入するほどでもない

  • テキストのメモを残す感覚で作成したい

  • SVNでバージョン管理したい


手順


Atomのインストール(テキストエディタ)

下記サイトよりインストール

https://atom.io/


JREのインストール(Java実行環境)

下記サイトよりインストール

http://java.com/ja/


Homebrewのインストール(Macのパッケージ管理ソフト)


<環境変数の設定>

$ vi ~/.bash_profile

export PATH=/usr/local:$PATH

# 即時反映
$ source ~/.bash_profile


<インストール>

#インストールコマンド

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

#確認
$ brew -v
Homebrew 0.9.9 (git revision b8ce; last commit 2016-08-06)


Graphvizのインストール

Graphvizはdot言語で記述されたプレーンテキストを画像ファイルのフォーマットへ出力するツール

#インストールコマンド

$ brew install graphviz

#テスト
$ vi Sample.dot
graph g{
"地球" -- "海" -- "九十九里";
}

#pdfファイルへ出力
$ dot -T pdf Sample.dot -o Sample.out.pdf

Sample.out.pdfを開くと「地球」「海」「九十九里」と書かれた図が出力されているのが確認できます


PlantUMLのインストール

メニューバー -> Package -> Settings View -> Install Packages/Themes

Search packages -> plantumlと入力


<パッケージのインストール>

下記をインストール(2つ目は任意)


  • plantuml-viewer

  • language-plantuml


<plantuml-viewerの設定>

メニューバー -> Package -> Settings View -> Manage Packages -> plantuml-viewer

Graphviz Dot Executableに下記実行ファイルのパスを指定

/usr/local/Cellar/graphviz/2.38.0/bin/dot


実行

Package -> plantuml-viewer -> Toggle

選択後、左側のタブにテキストをを入力するとライブプレビューでUMLが描画されます

Androidの場合のサンプル


sampleAcvity.pu

@startuml{plantuml_seq_sample.png}

title SampleActivityシーケンス図
hide footbox

actor ユーザー as user
participant SampleActivity as sampleActivity <<Contoroller>>
participant "<u>ApiRequest</u>" as model <<Model>>
participant DB as db <<Store>> #98AAAA
participant Sample.xml as xml <<View>> #98FB98

user -> sampleActivity : 表示
activate sampleActivity

'View初期化
sampleActivity -> xml : 初期化
activate xml

'APIリクエスト生成
create model
sampleActivity -> model : <<new>>
activate model

'APIリクエスト
sampleActivity -> model : データ取得
activate model
model ->> db : 非同期データ検索
|||
model <<- db : 非同期データ返却

'API結果返却
sampleActivity <-- model : 取得結果
note right : ヒットしたものをリストで返却
deactivate model
deactivate model
destroy model

'表示処理
sampleActivity -> xml : 表示(結果を設定)
deactivate sampleActivity

'データセット
loop 1, データ数
xml -> xml : データセット
end
xml --> user
deactivate xml

@enduml


スクリーンショット 2016-08-08 0.37.26.png


参考サイト

<環境変数の設定>

http://qiita.com/soarflat/items/d5015bec37f8a8254380

<Homebrewのインストール>

http://qiita.com/is0me/items/475fdbc4d770534f9ef1

<Graphvizのインストール>

http://qiita.com/yasuto777/items/c1c4e583f393b27ebb7a

<PlantUMLのインストール>

http://pierre3.hatenablog.com/entry/2015/08/23/220217

<PlantUML詳しい使い方>

http://yohshiy.blog.fc2.com/blog-entry-153.html#seq_notes