PlantUML+Vimでシーケンス図をコーディングする

どうも、シローです。

今回はPlantUMLとVimを使って、UMLをVimでコーディングしてそれをブラウザで確認できる内容をまとめようと思います。

動作環境

OS Ubuntus 18.04.2 LTS
Chromeのバージョン 76.0.3809.100(Official Build) (64 ビット)

PlantUMLとは

UMLをコーディングで表現してくれるサービスです。(参照:http://plantuml.com/ja/index )

と書くと以下のシーケンス図を出力してくれます。

今まで、シーケンス図はdraw.ioを使って書いていたのですが、どうも細かい調整が難しかったので別のサービスを探して見たところ

コーディングでシーケンス図を表現できるコレは中々使えそうな印象。

Vimで保存したらブラウザで見れるようにしたい

僕は基本Vimでテキストファイルを編集するので。

PlantUMLのシーケンス図をテキストファイルで管理することができるという特性を活かしてVimで編集すると自動でUMLを出力してくれればいいなと思い調べた結果。

以下の記事にたどり着きました。https://genkiroid.github.io/2017/02/04/vim-and-plantuml/

必要なもの

Vimプラグイン “plantuml-syntax” をインストール

VimでUMLテキストの編集時にシンタックスハイライトをつけてくれたり、”OpenUml”というコマンドでUMLファイルを開くことができるプラグインです。(参照: https://github.com/aklt/plantuml-syntax )

“.vimrc”にインストールしてください。

以下、”Plugin”でのインストール方法です。(以下を記述して”PluginInstall”のコマンドを実行)

Chrome拡張機能 “PlantUML Viewer”をインストール

これは、ChromeでUMLテキストを PlantUMLを通じて見ることができるプラグインです。

以下から、インストールしてください。https://chrome.google.com/webstore/detail/plantuml-viewer/legbfeljfbjgfifnkmpoajgpgejojooj

ローカルファイルを閲覧できるように設定を変更

ただ、デフォルトではテキストがそのまま表示されてしまうので、設定を以下のように変更してください。

  1. Chromeの右上の”PlantUML Viewer”のアイコンをクリック
  2. “拡張機能を管理”をクリック
  3. “サイトへのアクセス”を”すべてのサイト”に設定
  4. ファイルのURLへのアクセスを許可する

.vimrcに”OpenUML”コマンドの実行時にChromeを立ち上げて開く処理を追加

“.vimrc”に以下の1行を追加してください。

“!google-chrome %”という部分はOSによって異なります。(OSによってChromeを立ち上げるコマンドが違うため)

Macの場合”!start chrome %”に置き換えると動作するみたいです。

実行結果

VimでUMLテキストを編集して”OpenUml”コマンドを実行すると”PlantUML Viewer”上でUML図が作成されます。

その後、ファイルを保存すると自動でUML図を更新されます。


タグ:

PlantUML+Vimでシーケンス図をコーディングする

どうも、シローです。

今回はPlantUMLとVimを使って、UMLをVimでコーディングしてそれをブラウザで確認できる内容をまとめようと思います。

動作環境

OS Ubuntus 18.04.2 LTS
Chromeのバージョン 76.0.3809.100(Official Build) (64 ビット)

PlantUMLとは

UMLをコーディングで表現してくれるサービスです。(参照:http://plantuml.com/ja/index )

と書くと以下のシーケンス図を出力してくれます。

今まで、シーケンス図はdraw.ioを使って書いていたのですが、どうも細かい調整が難しかったので別のサービスを探して見たところ

コーディングでシーケンス図を表現できるコレは中々使えそうな印象。

Vimで保存したらブラウザで見れるようにしたい

僕は基本Vimでテキストファイルを編集するので。

PlantUMLのシーケンス図をテキストファイルで管理することができるという特性を活かしてVimで編集すると自動でUMLを出力してくれればいいなと思い調べた結果。

以下の記事にたどり着きました。https://genkiroid.github.io/2017/02/04/vim-and-plantuml/

必要なもの

Vimプラグイン “plantuml-syntax” をインストール

VimでUMLテキストの編集時にシンタックスハイライトをつけてくれたり、”OpenUml”というコマンドでUMLファイルを開くことができるプラグインです。(参照: https://github.com/aklt/plantuml-syntax )

“.vimrc”にインストールしてください。

以下、”Plugin”でのインストール方法です。(以下を記述して”PluginInstall”のコマンドを実行)

Chrome拡張機能 “PlantUML Viewer”をインストール

これは、ChromeでUMLテキストを PlantUMLを通じて見ることができるプラグインです。

以下から、インストールしてください。https://chrome.google.com/webstore/detail/plantuml-viewer/legbfeljfbjgfifnkmpoajgpgejojooj

ローカルファイルを閲覧できるように設定を変更

ただ、デフォルトではテキストがそのまま表示されてしまうので、設定を以下のように変更してください。

  1. Chromeの右上の”PlantUML Viewer”のアイコンをクリック
  2. “拡張機能を管理”をクリック
  3. “サイトへのアクセス”を”すべてのサイト”に設定
  4. ファイルのURLへのアクセスを許可する

.vimrcに”OpenUML”コマンドの実行時にChromeを立ち上げて開く処理を追加

“.vimrc”に以下の1行を追加してください。

“!google-chrome %”という部分はOSによって異なります。(OSによってChromeを立ち上げるコマンドが違うため)

Macの場合”!start chrome %”に置き換えると動作するみたいです。

実行結果

VimでUMLテキストを編集して”OpenUml”コマンドを実行すると”PlantUML Viewer”上でUML図が作成されます。

その後、ファイルを保存すると自動でUML図を更新されます。

タグ: