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

複雑なコードを解析するときなど、UMLが簡単に書けるツールがほしかったところ、良いツールがあったので導入してみました。
Mac OS X El Capitan‎に導入する場合にplantuml-viewerが表示されないなど、少しハマったのでメモを残します。

#ツール
Atom（テキストエディタ） + PlantUML（プラグイン）
※Macの場合、上記を利用するために「Java実行環境(JRE)」「Homebrew」「Graphviz」が必要

#導入経緯

• 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

#参考サイト
＜環境変数の設定＞
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