하고 싶은 일

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

실행하다

명령 팔레트 Remote-Containers: Rebuild and Reopen in container 에서 컨테이너 안으로 들어가기

편집기에서 test.pu 열기

명령 팔레트 PlantUML: Preview Current Diagram 실행

미리보기 표시

참고 자료

UML의 폭속 미리보기 환경을 Visual Studio Code + PlantUML Server on Docker로 쉽게 구축

Docker로 PlantUML Server 환경을 구축해 보았습니다.

PlantUML 서버를 Docker로 1분만에 빨리 구축 + VSCode로 미리보기