PlantUML サーバーをデプロイして UML 図を描けるようにする

PlantUML サーバーをデプロイすると、以下のような UML 図を描けるようになる。

Docker をインストールする

Docker をインストールしていない場合は、Docker をインストールする。

docker-compose.ymlを作成する。

docker-compose.yml
services:
  plantuml-server:
    image: plantuml/plantuml-server:latest
    ports:
      - 8080:8080
    restart: always

ポート番号は自由に変えて良い。8081:8080とすればhttp://localhost:8081でアクセスできるようになる。

docker compose up -dを実行してdocker-compose.ymlの内容をコンテナとして起動させる。

$ docker compose up -d
[+] Running 17/17
 ✔ plantuml-server Pulled 11.3s
[+] Running 1/1
 ✔ Container docker-plantuml-server-1  Started

http://localhost:8080にアクセスして、以下のような画面が表示されたら準備できている。

以下 VSCode 上で Markdown ファイルに UML 図を描いてみる。

PlantUML の拡張機能をインストールする。

VSCode に以下の設定を追加する。

settings.json
{
  "plantuml.server": "http://localhost:8080"
}

VSCode で UML 図を書いたらプレビューボタンを押す。

図が表示されない場合は右上のこのドキュメントで一部のコンテンツが無効になっていますボタンを押し、安全でないローカルコンテンツを許可するを選択する。

UML 図が表示された。