Visual Studio Code에서 미리보기를 보면서 PlantUML을 작성할 수있는 환경을 Docker로 만듭니다.

소개

PlantUML을 사용할 수 있는 환경을 구축하려고 하면 Java나 Graphviz software 의 인스톨이 필요해 조금 수고입니다.
Docker Hub에서 PlantUML Server의 공식 이미지을 사용하면 PlantUML을 그리는 환경을 편하게 구축할 수 있었으므로 소개합니다. 또, Visual Studio Code와 그 확장 기능을 조합하면 plantUML을 쓰기 쉬운 환경이 생겼으므로 함께 소개합니다.

구축 후 이미지

시도한 환경

mac OS 10.14.3
Visual Studio Code 1.33.1
Docker 18.09.2

설치할 것

Visual StudioCode

PlantUML Visual Studio Code 확장

도커

각 설치 절차는 생략합니다.

구축 절차

PlantUML Server 시작

docker run -d -p 8080:8080 plantuml/plantuml-server:jetty

여기는 이것뿐입니다.
브라우저에서 http:localhost:8080을 엽니다. 이 화면이 나오면 예상대로 움직이고 있는 것입니다.

Visual Studio Code의 PlantUML 설정

PlantUML 렌더링은 PlantUML Server에서 수행하도록 설정합니다.

설정 화면을 열고 다음 설정을 합니다. (windows라면 "ctrl + ,", mac라면 "⌘ + ,"로 열립니다)
plantuml과 검색 키워드를 넣으면 설정 항목이 표시됩니다.

Plantuml : previewAutoUpdate 확인

Plantuml : Render를 PlantUMLServer로 선택

Plantuml: Server http://localhost:8080으로 설정

이상으로 구축은 완료입니다.

사용법

시험에 test.puml이라는 파일을 만듭니다.
파일에 다음 내용을 입력합니다.

@startuml test
@enduml

파일을 연 상태에서 Visual Studio Code의 명령 팔레트 (windows라면 "ctrl + shift + p", mac이라면 "⌘ + shift + p")를 열고,
PlantUML로 치십시오.
"PlantUML : 커서 위치 다이어그램 미리보기"라는 것이 목록에 있으므로 선택하십시오.
미리보기 화면이 나타납니다.



텍스트를 업데이트하면 그에 따라 미리보기 내용도 업데이트됩니다.



PlantUML 문법이거나 어색하거나 오류가 발생하면,
빨간색 표시가 나타납니다. 커서를 마크에 맞추면 무엇으로 에러가 되고 있는지를 알 수 있습니다.



이상입니다.
docker 덕분에 도구 설치가 쉽고 좋다고 생각했습니다. (작은 느낌)