どうも、シローです。
今回は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 )
|
1 2 3 4 5 6 7 |
@startuml Alice -> Bob: Authentication Request Bob --> Alice: Authentication Response Alice -> Bob: Another authentication Request Alice <-- Bob: another authentication Response @enduml |
と書くと以下のシーケンス図を出力してくれます。
今まで、シーケンス図はdraw.ioを使って書いていたのですが、どうも細かい調整が難しかったので別のサービスを探して見たところ
コーディングでシーケンス図を表現できるコレは中々使えそうな印象。
Vimで保存したらブラウザで見れるようにしたい
僕は基本Vimでテキストファイルを編集するので。
PlantUMLのシーケンス図をテキストファイルで管理することができるという特性を活かしてVimで編集すると自動でUMLを出力してくれればいいなと思い調べた結果。
以下の記事にたどり着きました。https://genkiroid.github.io/2017/02/04/vim-and-plantuml/
必要なもの
- Vim
- chrome
Vimプラグイン "plantuml-syntax" をインストール
VimでUMLテキストの編集時にシンタックスハイライトをつけてくれたり、"OpenUml"というコマンドでUMLファイルを開くことができるプラグインです。（参照： https://github.com/aklt/plantuml-syntax )
".vimrc"にインストールしてください。
以下、"Plugin"でのインストール方法です。（以下を記述して"PluginInstall"のコマンドを実行)
|
1 |
Plugin 'aklt/plantuml-syntax' |
Chrome拡張機能 "PlantUML Viewer"をインストール
これは、ChromeでUMLテキストを PlantUMLを通じて見ることができるプラグインです。
以下から、インストールしてください。https://chrome.google.com/webstore/detail/plantuml-viewer/legbfeljfbjgfifnkmpoajgpgejojooj
ローカルファイルを閲覧できるように設定を変更
ただ、デフォルトではテキストがそのまま表示されてしまうので、設定を以下のように変更してください。
- Chromeの右上の"PlantUML Viewer"のアイコンをクリック
- "拡張機能を管理"をクリック
- "サイトへのアクセス"を"すべてのサイト"に設定
- ファイルのURLへのアクセスを許可する
.vimrcに"OpenUML"コマンドの実行時にChromeを立ち上げて開く処理を追加
".vimrc"に以下の１行を追加してください。
|
1 |
au FileType plantuml command! OpenUml : !google-chrome % |
"!google-chrome %"という部分はOSによって異なります。（OSによってChromeを立ち上げるコマンドが違うため)
Macの場合"!start chrome %"に置き換えると動作するみたいです。
実行結果
VimでUMLテキストを編集して"OpenUml"コマンドを実行すると"PlantUML Viewer"上でUML図が作成されます。
その後、ファイルを保存すると自動でUML図を更新されます。
Vimは開発者やサーバ管理者だけでなく，幅広いユーザをカバーする強力なテキストエディタです。本書は「もう少し文字入力を楽にしたい」「バッファ操作をもっと強化したい」といった誰しもが抱く要望を，ちょっとしたテクニックやプラグインの導入で改善する「作業効率に特化した逆引きリファレンス」です。日本で名立たる有数のVimハッカーがあらゆる角度から150のTipsを紹介します。さらに最終章では，「anything.el」のVim版である「unite.vim」を作者自ら詳しく解説しています。