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図が表示された。