Zenn
🐡

WSL2 + VScode + PlantUML設定メモ

2021/01/13に公開
VS Code
tech

WSL2+VSCodeでPlantUML設定。

やりたいこと

wsl2のプロジェクトディレクトリにてUMLを作図、出力する。
ubuntu(wsl2)側にjava/graphvisを入れてやらないといけない。

  • java入れる
  • sudo apt install graphviz

基本操作

alt + D ：プレビューウィンド
ctrl + shift + P : コマンドパレット / 現在のページをエクスポートでファイル化

直したい１

ubuntuの日本語フォントが微妙？プレビュー表示の文字が非常に変。
そしてファイル出力もだめだった…。

Source Han Code JPを入れる。
でも、思ったより大変だ…

https://qiita.com/TomKid/items/2c914b691ab648627d40

ほとんどこの記事の通り。

$ sudo apt-get install git
$ git clone https://github.com/adobe-type-tools/afdko/
$ git clone https://github.com/adobe-fonts/source-han-code-jp

$ cd afdko

# パッケージなどのインストール
$ sudo apt-get install gcc-multilib g++-multilib
# $ sudo aptitude install python-pip # こいつダメだった
$ sudo apt install python3-pip
$ sudo pip install fonttools
$ sudo apt-get install python3-venv

# python3.6でafdkoするための環境を作成
$ python3 -m venv afdko_env
$ source afdko_env/bin/activate
$ pip install wheel
$ pip install afdko

# パス
$ echo "export PATH=xxx/afdko/afdko_env/bin:$PATH"　>> ~/.bashrc
# ライブラリのパスは不要かも．．．
$ echo "export $ LD_LIBRARY_PATH=$LD_LIBRARY_PATH:xxx/afdko/afdko_env/lib" >> ~/.bashrc

# addSVGtable.pyのコメントアウトは不要(source-han-code-jp対応済み)
$ cd ../source-han-code-jp
$ ./commands.sh
$ mkdir ~/.fonts
$ ls ./*/*.otf　# 作成されたかチェック
$ cp ./*/*.otf ~/.fonts/
$ sudo fc-cache -fv

# 確認
$ fc-list | grep Han

うれしい。

直したい2

vscodeのPlantUML拡張設定におけるサブフォルダに出力設定は、プロジェクトルートに対してのサブフォルダになってしまっている。
全然良くない。

仕方なく以下のような.vscodeのプロジェクト設定をしている…。

{
  "plantuml.exportFormat": "png",
  "plantuml.diagramsRoot": "designs/uml",
  "plantuml.exportOutDir": "designs/uml/out",
  "plantuml.exportSubFolder": false,
  "plantuml.commandArgs": [],
}

まぁ…。

終わり

今までdraw.ioでしょぼしょぼとUML作図してましたが、プロジェクトディレクトリにてテキストベースで設計資料を管理出来るようになったのはうれしいです。

PlantUML独自の記法に慣れないといけないですが、あまり難しくは無さそうです。

ではまた。

Discussion