PlantUMLを自動変換してLiveプレビューしてくれるAtom拡張 PlantUML-Viewer がイイ！
PlantUML とは
テキストベースでUMLのダイアグラムをサクサクかける ドメイン固有言語(DSL)です。
以下のような特徴があります。
参照
- Open-source tool that uses simple textual descriptions to draw UML diagrams.
⇒ PlantUML 公式サイト。リファレンスマニュアルがpdfファイルで公開されています（PlantUML_Language_Reference_Guide.pdf） - http://plantuml-ref-ja.github.io/
⇒ リファレンスマニュアルを日本語訳してくれているサイトです。 - PlantUML の使い方 | プログラマーズ雑記帳
⇒ 分かりやすく豊富な解説記事が参考になります。
Atom Editor でPlantUML
とても便利なPlantUMLなのですが、テキストをUMLに変換して、結果を確認するまでの手順が少々面倒であったりします。
- PlantUMLの書式に従ってテキストを編集する
- テキストファイルをUMLに変換して、画像ファイルとして出力
- できたファイルを画像ビューアやWebブラウザ等で開き、結果を確認する
- 1 に戻る
この辺りの手順を自動化して、結果をプレビュー表示してくれるツールを探していたのですが、最近見つけたAtom Editorのプラグインが素敵だったので、紹介したいと思います。
Atom
plantuml-viewer
- PlantUMLのテキストをUMLに変換して、エディタ右側の分割ペインに表示してくれます。
- テキストの編集に追従して、リアルタイムに図が更新されます。(Live Preview)
- 図はマウス操作で自由に拡大/縮小、移動することができます。
- 図は、PNG, SVG, EPS の3種類の形式で保存可能です。
導入手順
PlantUMLを使う準備
PlantUMLを使用するには、以下がインストールされている必要があります。
Java ランタイム(JRE)
PlanuUMLはJavaで動くので、Javaのランタイムがインストールされている必要があります。
インストールされていない場合は、以下から最新版をインストールすればよいと思います。
Graphviz
シーケンス図以外の図のレンダリングには、 Graphiviz の dot.exe というモジュールが必要になります。
http://www.graphviz.org/Download..php
なお、plantuml本体のモジュール plantuml.jar はplantuml-viewer に組み込まれているので別途インストールする必要はありません
Atomのインストール
以下のリンクからインストーラをダウンロードして、普通にインストールするのが一番簡単です。
Atom プラグインのインストール
Atomを起動したら、[File]メニューのSettings を開き、左側で[Install]を選ぶと、以下の画面になります。
ここで、”plantuml” と入力して表示される一覧からplantuml-viewer を探して[Install]ボタンをクリックします。
ついでに、PlantUMLで書かれたテキストをシンタックスハイライト表示してくれるパッケージ language-plantuml も入れておきましょう。
plantuml-viewer の設定
次に、plantuml-viewer の設定を行います。
先ほどのSettingsページで、今度は[Packages]を選択します。
すると、インストールしたプラグインのパッケージ一覧が表示されますので、ここでplantuml-viewer を探して[Settings]ボタンをクリックします。
設定項目
Charset
変換前のテキストのエンコーディングを指定します。指定しないとシステムのデフォルト(日本語環境のWindowsではCP932(Shift-jis))になります。当初、この設定項目がなく、Shift-jis以外で書くと文字化けしていました。この項目を指定できるようにカスタマイズして、プルリクエストしてみたところ、即日取り込んでいただき、V0.60から使用可能となっています。（感謝）
Config File
変換時に読み込まれる、共通の処理を記載しておくplantUMLファイルのパスを指定します。図の外観のカスタマイズする場合などに使用します。- Grammars
対象となるファイルの拡張子を指定します。 - Graphviz Dot Executable
インストールした Graphivizの dot.exe のパスを指定します。 - Live Update
チェックを外すと、図の自動更新を無効にできます。 - Open in Split Pane
チェックを外すと、図のプレビューを分割ペインではなく、通常のタブに表示するようになります。
最後に
plantuml-viewer はまだリリース間もない（8/9）のと、私も使い始めたばかりなので、もう少し使い込んでみる必要はあるかと思いますが、第一印象としてはかなりいい感じです。
この記事を読んで気になった方は、ぜひ試してみてください！
※ 2016/3/6追記
変換するUMLのサイズが大きいと、極端に重くなったり、入力したテキストの内容がちゃんと反映されなかったりする場合があります。
この辺の話と対処法を以下の記事に書きましたので、こちらもご参照ください。
