Vim+Chrome+PlantUML Viewer→UML Sequence Diagram

TL;DR

Vimでテキストファイルを作成/編集すると、Google Chromeブラウザ上でシーケンス図がリアルタイムに書ける/変更されるようにするための手順をまとめる。

メリット

作図ソフトウェア等に頼らなくてもよい
普段慣れているエディタだけですらすら書ける
シーケンス図（に限らず、クラス図やアクティビティ図など）をテキストファイル形式でgit等でバージョン管理できる

環境

macOS Catalina 10.15.7
Vim 8.2
Google Chrome 87.0.4280.88（Official Build）x86_64）

手順

必要なもの

Vim へ “plantuml-syntax” Pluginをインストール
Chromeに "PlantUML Viewer" 拡張機能をインストール

Vim へ “plantuml-syntax” Pluginをインストール

本家：https://github.com/aklt/plantuml-syntax

.vimrcとかに以下を追加（vim-plug方式の例）

call plug#begin('~/.vim/plugged')
Plug 'aklt/plantuml-syntax'
call plug#end()

保存後、以下のコマンドでインストール

:PlugInstall

VimからChromeを起動できるコマンドを追加 .vimrcとかに以下を追加

au FileType plantuml command! OpenUml :!open "/Applications/Google Chrome.app" --args --disable-web-security --user-data-dir="dummy" file:///Users/liu/dev/plantuml/%

各オプションの説明

オプション	意味
plantuml	plantuml形式のファイルの場合（@startumlで始まる）
OpenUml	vimにて:OpenUml コマンドで打つ場合
open "/Applications/Google Chrome.app"	MacでGoogle Chrome.app をダブルクリックして開く
--args	おまじない。openコマンドに送っているオプションなので必ず必要
--disable-web-security	ChromeにCORS制限解除のオプション
--user-data-dir="dummy"	ユーザデータフォルダを切り替えるオプションらしいが、--disable-web-security とセットで使わないと、CORS制限解除できなかったため、追加設定した。値がないと動かないため、ダミーを設定した
file:///Users/liu/dev/plantuml/%	Chrome起動時に開くファイルURLを設定（任意。ない場合、Chromeから直接開けばいいので）

これで、（自分の環境の場合）Vimの設定が整えた。

Chromeに "PlantUML Viewer" 拡張機能をインストール

本家：PlantUML Viewer - Chrome ウェブストア

インストール後、以下の設定にする f:id:lgx:20210102152059p:plain:w450

動作確認

plantuml形式のテキストファイルを作成
（自分の環境の場合）file:///Users/liu/dev/plantuml/ 以下に、vimで以下のテキストファイルを作成（hoge.uml）

@startuml
participant User

User -> A: DoWork
activate A

A -> B: << createRequest >>
activate B

B -> C: DoWork
activate C
C --> B: WorkDone
destroy C

B --> A: RequestCreated
deactivate B

A -> User: Done
deactivate A

@enduml

VimからChromeブラウザを起動できるようコマンドを実行

:OpenUml

注意点：Chromeブラウザを閉じた状態で実行する必要がある、さもなければ、CORS制限解除にならない。

Chromeが立ち上がり、以下の警告メッセージが出ていればCORS制限解除になっている証拠。
f:id:lgx:20210102135517p:plain

Chromeに実際に表示されているシーケンス図：

Vimでテキストファイルを編集すると、Chrome場ではリアルタイムに反映されることを確認済。

応用

Yahoo!ID連携（YConnect V2）のクライアントアプリの認可フローをVimでシーケンス図を書いてみた。

Yahoo! ID連携:Authorization Codeフロー - Yahoo!デベロッパーネットワーク

書いたシーケンス図（名称や番号は異なる）

まとめ

Vim+Chrome+PlantUML Viewer→UML Sequence Diagram を、環境整備から動作確認まで一通り終えたが、順調ではなくて、一番手こずったのは、ChromeのCORS 制限解除の設定あたりで、シーケンス図がうまく表示できない。javaやplantumlのソフトウェアをinstallしたり、試してNGしてはまたuninstallしたりしていた。

手軽にシーケンス図を作成できて、またテキストファイルなので、簡単にgit等でバージョン管理できる。現役エンジニア時代に出会っていればよかった。

以下のドキュメントが大変参考になり、ありがとうございます。