PreVimでPlantUMLをPreviewできるようにする

概要

以前、このブログで、Google Chromeの拡張機能を使って、PlantUMLのシーケンス図を書く記事を書きました。すごく便利ですが、Chromeの拡張機能が必要なので、環境によっては使えない方法でした。

今日は、previmという素晴らしいPluginを見つけたので、これの利用方法を書いておきます。

何のPluginか

プレビュー用のVim プラグインです。

何ができるか

Markdown文書の編集をリアルタイムに確認できる
- Vimではてなブログを書ける!
PlantUMLにも対応

インストール方法

vimの設定

.vimrcに以下を追加(vim-plugの場合)

call plug#begin('~/.vim/plugged')
...省略...
Plug 'godlygeek/tabular'
Plug 'plasticboy/vim-markdown'
Plug 'previm/previm'
...省略...
call plug#end()

let g:previm_open_cmd = 'open -a Safari'
nnoremap <Leader>p :PrevimOpen<CR>
let g:vim_markdown_folding_disabled = 1
let g:previm_enable_realtime = 1

上記設定により、filetypeがMarkdownのファイル（拡張子がmd）を編集する時に、コマンドで:PrevimOpen を実行すればSafariにてほぼリアルタイムで確認することが可能となる。

ブラウザの設定

.vimrcではプレビューにSafariを使う設定したため、Safariブラウザに次のように設定変更する 1. メニューバーの Safari > 環境設定 > 詳細 > メニューバーに"開発"メニューを表示にチェック 1. メニューバーの開発 > ローカルファイルの制限を無効にするを選択

動作確認

PlantUMLのマインドマップを描いてみる

@startmindmap
+[#orange] 人
++[#pink] 女
++[#lightblue] 男
++[#lightgreen] その他
@endmindmap

Safari上では、以下のように表示される。

f:id:lgx:20210111010151p:plain:w200

まとめ

previmプラグインを使えれば、普通のブラウザで簡単にVimでPlantUMLを含めた形式の画像をプレビューすることができた。今後自分がはてなブログをVimで書きながらプレビューで確認できるようになったため、超楽になります。

gxliuのブログ