VSCodeでWSLのPlantUMLをプレビュー

VSCode の Remote – WSL で、WSL 上の Ubuntu を開発環境にしています。この環境で PlantUML のプレビューをするためにやることのメモです。

VSCode のターミナルで、 Ubuntu 環境に Java をインストールします。Java で開発する予定はないので、JREにしときます。

(.venv) mtystg@devhost:~/dev$ sudo apt install openjdk-18-jre

次に Graphviz をインストールします。

(.venv) mtystg@devhost:~/dev$ sudo apt install graphviz

続いて、VSCode に PlantUML 拡張機能をインストールします。

1. 拡張機能(Ctrl+Shift+X)で「PlantUML」を検索します。
2. PlantUML をインストールします。

PlantUMLのファイルを開いて Alt+D でプレビュー画面を開きます。

それっぽく表示されましたが、文字が重なってしまって読めないような状態になってしまいました。

PlantUML でフォントリストを表示してみるとこんなかんじでした。

上のリストを表示するファイルはこんなやつです。

@startuml
listfonts あのイーハトーヴォのすきとおった風
@enduml

Ubuntu のデフォルトのフォントのメトリクスがおかしいのかな？と思い、デフォルトのフォントを fc-macth で調べます。

(.venv) mtystg@devhost:~/dev$ fc-match
DejaVuSans.ttf: "DejaVu Sans" "Book"

これをちゃんとしたフォントに変更するには、fontconfig の設定ファイルをいじります。

fontconfig の設定ファイルは /etc/fonts/fonts.conf で、マニュアルは、

(.venv) mtystg@devhost:~/dev$ man fonts.conf

で参照できます。

フォントリストの先頭に UDEV Gothic を持っていくには、$HOME/.config/fontconfig/fonts.conf を作成し、以下の内容を記述すればOKです。

<?xml version='1.0'?>
<!DOCTYPE fontconfig SYSTEM 'fonts.dtd'>
<fontconfig>

<!-- Default font -->
 <match>
  <edit mode="prepend_first" name="family">
   <string>UDEV Gothic JPDOC</string>
  </edit>
 </match>

</fontconfig>

再度デフォルトフォントを確認すると、指定した UDEV Gothic になっていることが確認できます。

(.venv) mtystg@devhost:~/dev$ fc-match
UDEVGothicJPDOC-Regular.ttf: "UDEV Gothic JPDOC" "Regular"

この状態で、VSCode の PlantUML ファイルをアクティブにして、Alt+D でプレビュー画面を再描画すると、文字の重なりもなくなり、きれいに表示されました。