VS CodeのRemote-ContainersでPlant UMLのコンテナ環境を作る

4256 ワード
Docker VSCode Remote-Containers uml uml テキストリンク

やりたいこと

UMLのサーバーをDockerで構築して，VS Codeの拡張機能を使って編集したい！Remote-Containersを使って簡単に環境構築出来たらうれしいな！

環境

  • Visual Studio Code
    • 拡張機能Remote-Containersを入れておく
    • 拡張機能Plant UMLはコンテナの中に入るときにコンテナ内に導入される
  • Docker

必要なファイルの用意

ディレクトリ構成

(root)
│
├─ test.pu
│
└─.devcontainer
        devcontainer.json
        docker-compose.yml

環境設定のファイルの中身

devcontainer.json
{
    "name": "dev container",
    "dockerComposeFile": "docker-compose.yml",
    "service": "plantuml-server",
    "workspaceFolder": "/workspace/",
    "extensions": [
        "jebbs.plantuml",
    ]
}
docker-compose.yml
version: '3'
services:
  plantuml-server:
    image: plantuml/plantuml-server
    container_name: plantuml-container
    ports:
      - "8080:8080"
    volumes:
      - ..:/workspace:cached

テスト用のUMLファイル

test.pu
@startuml sample
alice -> Bob: Hello, John!
alice <-- Bob: Hello, World!
@enduml

実行する

  1. コマンドパレットRemote-Containers: Rebuild and Reopen in containerからコンテナの中に入る
  2. エディタでtest.puを開く
  3. コマンドパレットPlantUML: Preview Current Diagramを実行
  4. プレビューが表示される

参考資料