えんじにあメモ

試してみた技術とか、たまに家電ネタ

VimでUMLを編集しDocker+ブラウザでプレビューする

Vim UML docker

VimでのUMLプレビューは検索すると様々な記事が見つかりますが、以下のような点から導入を躊躇ってました

  • 事前インストールが必要な依存関係が多い
  • 外部のUMLサーバへの接続が行われる
  • 可視化性が低い

そこでDockerでローカルに起動したPlantUML Serverを利用し、Vimで編集中のUMLをブラウザでプレビューできるようにした

事前準備

DockerでPlantUML Serverを起動する

$ docker run -d -p 8080:8080 plantuml/plantuml-server

vimrcに以下を追記

nmap <leader><Space><Space> :! curl -s -i http://localhost:8080/form -H "Content-Type: application/x-www-form-urlencoded" --data-urlencode text@% \| grep "^Location:" \| awk '{print $2}' \| sed -e "s/\/uml\//\/png\//" \| xargs open<CR><CR>

（/png/PlantUMLの圧縮文字列のendpointでも生成できるが圧縮文字列を生成するのが面倒くさいのでformに投げつけてる）

プレビュー

例として以下のUMLをVimで開く

@startuml
アリス -> ボブ: Authentication Request
ボブ --> アリス: Authentication Response

アリス -> ボブ: Another authentication Request
アリス <-- ボブ: another authentication Response
@enduml

開いた状態で <leader> -> space -> space でブラウザでプレビュー画像が開かれる

f:id:shosfs:20211228163122p:plain

ﾖｼ！