Visual Studio Code에서 미리보기를 보면서 PlantUML을 작성할 수있는 환경을 Docker로 만듭니다.
3548 단어 VisualStudioCode도커VSCodeplantuml
Visual Studio Code에서 미리보기를 보면서 PlantUML을 작성할 수있는 환경을 Docker로 만듭니다.
소개
PlantUML을 사용할 수 있는 환경을 구축하려고 하면 Java나 Graphviz software 의 인스톨이 필요해 조금 수고입니다.
Docker Hub에서 PlantUML Server의 공식 이미지을 사용하면 PlantUML을 그리는 환경을 편하게 구축할 수 있었으므로 소개합니다. 또, Visual Studio Code와 그 확장 기능을 조합하면 plantUML을 쓰기 쉬운 환경이 생겼으므로 함께 소개합니다.
구축 후 이미지
![](https://s1.md5.ltd/image/26c4f227a549f16d7fbdd4c6fffc543c.gif)
시도한 환경
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을 엽니다. 이 화면이 나오면 예상대로 움직이고 있는 것입니다.
![](https://s1.md5.ltd/image/4d9ea862625d576d266fd524f1bf159a.png)
Visual Studio Code의 PlantUML 설정
PlantUML 렌더링은 PlantUML Server에서 수행하도록 설정합니다.
설정 화면을 열고 다음 설정을 합니다. (windows라면 "ctrl + ,", mac라면 "⌘ + ,"로 열립니다)
plantuml과 검색 키워드를 넣으면 설정 항목이 표시됩니다.
![](https://s1.md5.ltd/image/cb3d5d170029d51d4678f900fd6ca682.png)
이상으로 구축은 완료입니다.
사용법
시험에 test.puml이라는 파일을 만듭니다.
파일에 다음 내용을 입력합니다.
@startuml test
@enduml
파일을 연 상태에서 Visual Studio Code의 명령 팔레트 (windows라면 "ctrl + shift + p", mac이라면 "⌘ + shift + p")를 열고,
PlantUML로 치십시오.
"PlantUML : 커서 위치 다이어그램 미리보기"라는 것이 목록에 있으므로 선택하십시오.
미리보기 화면이 나타납니다.
![](https://s1.md5.ltd/image/728ad921b706a95278ef774b857a5db6.png)
텍스트를 업데이트하면 그에 따라 미리보기 내용도 업데이트됩니다.
![](https://s1.md5.ltd/image/26c4f227a549f16d7fbdd4c6fffc543c.gif)
PlantUML 문법이거나 어색하거나 오류가 발생하면,
빨간색 표시가 나타납니다. 커서를 마크에 맞추면 무엇으로 에러가 되고 있는지를 알 수 있습니다.
![](https://s1.md5.ltd/image/a673b59b4573efaa7320c42236f676c0.png)
이상입니다.
docker 덕분에 도구 설치가 쉽고 좋다고 생각했습니다. (작은 느낌)
Reference
이 문제에 관하여(Visual Studio Code에서 미리보기를 보면서 PlantUML을 작성할 수있는 환경을 Docker로 만듭니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/1021ky@github/items/e11948eaaa8a141068d3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)