仕事でシーケンス図を書く機会があったのでDockerでPlantUMLを起動して作業をしていたんですが、作成したコードをいちいちコピペして送信して画像を表示するという作業が結構面倒だったんですよね。
もしかしたらVisual Studio Codeにプラグインがあるんじゃないかと思って調べてみたらやっぱりありました。今回は備忘録としてVisual Studio CodeでPlantUMLを使う方法をまとめてみました。
PlantUMLのプラグインをインストール
Visual Stuio CodeのPlantUMLのプラグインはこちらですね。
Visual Stuio Codeの拡張機能のところでPlantUMLで検索をかければ出てくるのでこれをインストール。
VS Codeのプラグインをインストール
Visual Stuio Code上の作業はこれだけです。
PlantUMLを使うための各種ソフトウェアをインストール
PlantUMLで画像をレンダリングするためには各種ソフトウェアが必要になります。それらのソフトウェアをインストールしていきます。
Macの場合はbrewで全てインストールできるのですが、Windowsの場合は手作業でJDKやGraphvizといったソフトをインストールする必要があります。WindowsでもChocolateyというパッケージ管理ソフトを使うと簡単にインストールできるので、今回はこちらを使っていきます。
作業としては「 Chocolatey インストール」と「各種ソフトウェアのインストール」の２つです。
まずはコマンドプロンプトを起動します。ただしコマンドプロンプトを普通に起動するとエラーが出てしまうので管理者権限で起動します。起動方法は以下。
コマンドプロンプトを管理者として実行
コマンドプロンプトが起動したらChocolateyをインストールするために以下のコマンドを入力します。（少し長いですが．．．）
@”%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe” -NoProfile -ExecutionPolicy Bypass -Command “iex ((New-Object System.Net.WebClient).DownloadString(‘https://chocolatey.org/install.ps1’))” && SET “PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin”
Chocolateyインストール完了
Chocolateyのインストールはこれで完了です。いくつか警告が出ていますが特に問題ないでしょう。
次にChocolateyを使用して各種ソフトウェアをインストールします。コマンドプロンプトに更に以下のコマンドを入力します。
choco install plantuml
各種ソフトウェアのインストール完了
3回ほど「スクリプトを実行しても良いか？」という確認あります。確認が表示されたら「Y+Enter」を入力してインストールを継続して下さい。
これでVisual Studio CodeでPlantUMLを使う全ての準備が完了しました。
Visual Studio CodeでUMLを書く
ダイアグラムを表示
ではVisual Studio Codeでコードを書いていきます。PlantUMLは様々なダイアグラムに対応していますが今回はシーケンス図で。
新規でファイルを作成します。拡張子としては「*.wsd, *.pu, *.puml, *.plantuml, *.iuml」などが利用できますが、私は「*.pu」を使っています。一番入力文字数が少ないのでw
コードが入力出来たら「Alt+D」を押すとダイアグラムのプレビューが表示されます。
シーケンス図が表示された！
更にプレビューを表示した状態でコードを変更するとリアルタイムでダイアグラムが更新されます。これは便利ですね！
画像のエクスポート
当然ですが出力された画像をエクスポートすることもできます。
メニューから「表示」⇒「コマンドパレット(Ctrl+Shift+P)」を選択して「plantuml」と入力します。「plantuml」と入力するといくつか選択肢が表示されます。エクスポートする場合は「カーソル位置のダイアグラムをエクスポート」を選択すると、カレントフォルダ内のoutフォルダに画像が保存されます。
※保存フォルダは設定で変更することができます。
エクスポートも可能
ちなみにコードにタイトルをつけておくとタイトル名で画像が出力されるので便利です。
タイトルをつけておくと便利
サーバを使う場合
今回はローカル環境にレンダリングするためのソフトウェアをインストールしましたが、PlantUMLのサーバがあればそちらを使用することもできます。
サーバを使用する場合はVisual Studio CodeのPlantUMLの設定で以下をセットします。
“plantuml.render”: “PlantUMLServer”,
“plantuml.server”: “http://192.168.1.100:8080”,
GUIでも設定できる
おわりに
Visual Studio CodeでPlantUMLを使ってリアルタイムにダイアグラムが確認できるようになってかなり効率が上がりました。これからはこれを使って他のダイアグラムも書いていこうかな。
そういえば昔UMLの資格も取ったなー。実業務だとクラス図とシーケンス図くらいしか使った覚えないけどw
