TL;DR

  • PlantUML ViewerReViewer 엔진을 바탕으로 VS Code에서 PlantUML 다이어그램을 인터랙티브 SVG로 미리 보기하며, 외부 서버·자바·Graphviz 설치 없이 완전한 오프라인 환경에서 실행됨
  • .puml 파일을 편집하면 미리보기가 실시간으로 갱신되고, 확대·축소·이동·창 맞춤 기능을 제공함
  • 표준 SVG 마크업과 고해상도 PNG 이미지를 클립보드에 복사하고, SVG·PNG 파일로 내보낼 수 있음
  • VS Code의 어두운 테마·밝은 테마·고대비 테마를 자동으로 동기화함
  • 시퀀스·활동·클래스·마인드맵·작업 분류 구조·타이밍·상태·데이터 다이어그램을 지원하며 다이어그램 코드는 컴퓨터 밖으로 전송되지 않음

개요

  • PlantUML ViewerReViewer 엔진을 사용해 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 Side
  • Reviewer: 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(패키지에 포함됨)