Help us understand the problem. What is going on with this article?

テキスト入力で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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした