VS CodeでPlant UMLをプレビューする

これ何

この記事のセットアップをすれば、VS Code上でこんな感じでPlant UMLが見れるようになる。

いちばん簡単な方法が紹介されている日本語の記事が少なかった/見つからなかったので書いた。Dockerを使ってPlantUMLServerを立てる方法を説明する。ただの公式Docのサマリー。

ステップ1. Install PlantUML Extension

ただインストールするだけ。

ステップ2. PlantUMLServerをローカルで実行する

Dockerを使って実行する。楽ちん。

docker run -d -p <YOUR_FAVORITE_PORT>:8080 plantuml/plantuml-server:jetty

Ref

• https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml#use-plantuml-server-as-render
• https://github.com/plantuml/plantuml-server#how-to-run-the-server-with-docker

ステップ3. Extensionの設定を変更する

これをsettings.jsonに追記する。

{
  "plantuml.server": "http://localhost:<YOUR_FAVORITE_PORT>",
  "plantuml.render": "PlantUMLServer",
}

Ref

• https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml#use-plantuml-server-as-render

おしまい

opt + Dでプレビューが見れる。