LoginSignup
33
33

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-08-07

複雑なコードを解析するときなど、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

33
33
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
33
33