VimのプラグインにPrevimというMarkDownプレビュー用のプラグインがある。それを改造してMarkDown中に書かれたPlantUMLのコードをプレビューするようにしたものを公開している@kazuphという人がいたので、それを参考にUbuntu上のVimでPlantUMLのプレビューができるようにしてみた。
筆者の環境
GraphVizのインストール
PlantUMLはGraphVizを利用しているらしいのでインストールする。Ubuntu 16.04のパッケージリポジトリには記事執筆時で最新の(Version 2.38.0)GraphVizが収録されているのでそれを使う。
sudo apt install graphviz
PlantUMLのインストール
PlantUMLのインストールは以下の手順で行う。
- Ubuntu 16.04パッケージリポジトリからのPlantUMLのインストール
- 最新のplantuml.jarのダウンロード
- スクリプトplantumlの書き換え
の３つである。
Ubuntu 16.04パッケージリポジトリからのPlantUMLのインストール
PlantUMLは、これもUbuntu 16.04のパッケージリポジトリに、パッケージplantumlが収録されているので、これをインストールする。するとPlantUML本体のjavaプログラムplantuml.jarやその他シェルスクリプト等がインストールされる。
sudo apt install pantuml
最新のplantuml.jarのダウンロード
Ubuntu 16.04のパッケージリポジトリのplantumlパッケージには問題が１つあって、実はplantuml.jarのバージョンが古い。なので最新のplantuml.jarをダウンロードし、任意のディレクトリに置く。
スクリプトplantumlの書き換え
先にapt installしたplantumlにはシェルスクリプトplantumlがバンドルされている。シェルスクリプトplantumlは
java -jar /usr/share/plantuml/plantuml.jar ${@}
を実行するだけのスクリプトなのだけど、当然のようにplantumlはパッケージリポジトリ由来のバージョンの古いplantuml.jarを使っている。これではまずいので
sudo vim /usr/bin/plantuml
を実行し
java -jar /foo/bar/plantuml.jar ${@}
と先ほどダウンロードした最新のplantuml.jarのパスに書き換える。
kazuph版Previmのインストール
Previmは本来MarkDownをプレビューするためのVim Pluginだった。それを@kazuph氏が改造してPlantUMLのソースファイルをプレビューできるようにした。なので@kazuph氏版のPrevimをインストールする。
@kazuph氏はVim Pluginの管理にNeoBundleを使っていらっしゃるようだけども、筆者はDeinを使っている。なのでPrevimのインストールには.vimrcに
call dein#add('kazuph/previm', {'rev': 'feature/add-plantuml-plugin'})
と書く。またopen-browser.vimを使う場合は.vimrcに
call dein#add('tyru/open-browser.vim')
も書く。あとは
:call dein#install()
を実行すれば良い。
kazuph版Previmの設定
@kazuph版Previmの設定はごくわずかで
nnoremap <silent><Space><Space>p :PrevimOpen<CR>
を.vimrcに書くだけで良い。これでスペースキーを２度押し、続けてpキーを押せばプレビューが実行される。もちろんコマンドラインで
:PrevimOpen
と打ち込んでもいい。
umlファイル作成上の注意点
Previmでプレビューするumlファイルを書く上で注意しなければならない以下の点がある
- ソースファイルはPlantUMLのソースファイルではなくMarkDownファイルでなければならない。
- ソースファイルはMarkDown記法のコードのコードの挿入で記述しなければならない
ソースファイルはPlantUMLのソースファイルではなくMarkDownファイルでなければならない
これはどういうことかというと、ソースファイルの拡張子はpuやuml、pumlではいけない、ということだ。拡張子はMarkDownのソースファイルの拡張子でなければならない。
またその際、拡張子mdはMarkDownと認識されないので、
augroup PrevimSettings
autocmd!
autocmd BufNewFile,BufRead .{md,mdwn,mkd,mkdn,mark} set filetype=markdown
augroup END
と.vimrcに記述する。
ソースファイルはMarkDown記法のコードのコードの挿入で記述しなければならない
これはどういうことかというと、以下ではだめで
@startuml
title シーケンス図
アリス -> ボブ: リクエスト
ボブ --> アリス: レスポンス
@enduml
以下のように書かねばならない。
```uml
@startuml
title シーケンス図
アリス -> ボブ: リクエスト
ボブ --> アリス: レスポンス
@enduml
```
Previmの実行
ソースファイルが書けたらスペースを２回叩き、pキーを叩く。もしくは
:PrevimOpen
を実行しても良い。
すると上の例のソースの場合、下図のようにブラウザにUML図が表示される。