TL;DR
PlantUML Viewer가ReViewer엔진을 바탕으로 VS Code에서 PlantUML 다이어그램을 인터랙티브SVG로 미리 보기하며, 외부 서버·자바·Graphviz 설치 없이 완전한 오프라인 환경에서 실행됨.puml파일을 편집하면 미리보기가 실시간으로 갱신되고, 확대·축소·이동·창 맞춤 기능을 제공함- 표준
SVG마크업과 고해상도PNG이미지를 클립보드에 복사하고,SVG·PNG파일로 내보낼 수 있음 - VS Code의 어두운 테마·밝은 테마·고대비 테마를 자동으로 동기화함
- 시퀀스·활동·클래스·마인드맵·작업 분류 구조·타이밍·상태·데이터 다이어그램을 지원하며 다이어그램 코드는 컴퓨터 밖으로 전송되지 않음
개요
PlantUML Viewer는ReViewer엔진을 사용해 VS Code 안에서 PlantUML 다이어그램을 인터랙티브SVG미리보기로 변환함- 100% 오프라인·클라이언트 측 실행을 지원하며 서버 의존성이 없고 외부 자바(Java) 또는 Graphviz 설치가 필요하지 않음
- 라이선스는
MIT이며 서버 의존성이 없음
기능
- 즉시 실시간 미리보기:
.puml파일을 편집할 때 다이어그램을 실시간으로 자동 갱신함 - 인터랙티브 확대·축소 및 이동:
- 마우스 휠로 커서 방향을 정확히 기준으로 부드럽게 확대·축소함
- 끌어 놓기로 캔버스를 이동함
- 빠른 접근 기능으로 확대(
+), 축소(-), 초기화(100%), 창에 맞추기를 제공함 - 클립보드 복사:
SVG복사: 표준SVG마크업을 한 번에 복사함PNG복사: 고해상도 비트맵 이미지를 클립보드에 직접 복사함- 파일 내보내기:
- VS Code 저장 대화 상자를 통해 다이어그램을
.svg벡터 파일로 저장함 - 다이어그램을
.png이미지 파일로 저장함 - 테마 동기화: VS Code의 어두운 테마·밝은 테마·고대비 색상 테마에 자동으로 맞춤
- 100% 오프라인·비공개:
render.min.js를 사용해 다이어그램을 로컬에서 렌더링함- 다이어그램 코드는 컴퓨터 밖으로 전송되지 않음
빠른 시작
1. PlantUML 파일 열기
- 편집기에서 PlantUML 파일(
.puml,.plantuml,.wsd,.iuml)을 엶
2. 미리보기 실행
- 편집기 제목 표시줄에서
Reviewer: Open Preview to the Side아이콘을 클릭함 - 명령 팔레트를 열고 macOS에서는
Cmd+Shift+P, Windows·Linux에서는Ctrl+Shift+P를 누른 뒤 다음 명령을 실행함 Reviewer: Open Preview to the SideReviewer: Open PlantUML Preview
3. 실시간 편집
- 다이어그램 원본 코드를 편집하면 나란히 표시된 미리보기가 즉시 갱신됨
지원하는 다이어그램 유형
- 시퀀스 다이어그램(
@startuml ... @enduml) - 활동 다이어그램(
start ... stop,if (...) then (...)) - 클래스 및 객체 다이어그램(
class,interface, 관계) - 마인드맵(
@startmindmap ... @endmindmap) - 작업 분류 구조(WBS)(
@startwbs ... @endwbs) - 타이밍 다이어그램(
@starttiming ... @endtiming) - 상태 다이어그램(
@startstate ... @endstate) - 데이터 다이어그램(
@startjson,@startyaml)
지원 및 문의
- 작성자: Marius & Alexandru
- 웹사이트: https://www.chirila.ch
- 이메일 지원: info@chirila.ch
- 라이선스:
MIT(패키지에 포함됨)
댓글 (0)
로그인하면 이 기사에 내 생각을 남길 수 있어요