PlantUML 에디터

Source: Dev.to

Introduction

이것은 dev.to에 올리는 첫 번째 글입니다. 커뮤니티에 참여하게 되어 기쁩니다. 여기서 많은 사람들이 멋진 소프트웨어를 공유하는 것을 보았고, 저도 똑같이 하고 싶습니다.

제 PlantUML Editor, 를 소개합니다. 이 글은 의 확장 버전입니다. 하지만 여기서는 좀 더 기술적인 세부 사항을 다루겠습니다. 여러분의 피드백을 기대합니다.

PlantUML Editor는 오픈소스입니다: . 클론하고, 로컬에서 실행하고, 포크하거나 심지어 기여할 수도 있습니다.

저는 일상 업무에서 PlantUML, 시스템, 시퀀스, 도메인‑주도 설계를 자주 사용합니다. 기존 도구들은 광고와 설치/설정 요구사항(특히 데스크톱 앱) 때문에 마음에 들지 않았습니다. 설치나 설정이 전혀 필요 없는 웹 기반 애플리케이션을 원했습니다. 지금까지 추가된 기능은 다음과 같습니다.

Front‑End / Web Renderer

가장 먼저 필요했던 기능은 백엔드나 서버 없이 PlantUML을 다이어그램으로 변환할 수 있는 웹 렌더러였습니다. 이는 라이브러리 덕분에 가능해졌습니다.

웹 렌더러이지만 CheerpJ 런타임이 인터넷에서 로드되기 때문에 여전히 인터넷 연결이 필요합니다. 추후에는 CheerpJ 로더를 로컬에 호스팅할 계획입니다.

Back‑End / (Java) Server Renderer

웹 렌더러는 느렸으며, 이는 첫 번째 라이브 스트림에서 확인할 수 있습니다: .
또한 구문 오류를 표시하지 않아 디버깅이 어려웠습니다.

덕분에 백엔드 렌더링이 가능해졌고, 이제 구문 오류가 사람 친화적인 이미지로 표시됩니다.

현재 PlantUML Editor는 두 종류의 렌더러를 지원합니다: 웹과 서버.

File Management System

다이어그램은 브라우저의 Web Storage API를 통해 로컬에 저장되므로 개인적으로 유지됩니다.

Share as URL

다이어그램은 URL로 공유하지 않는 한 비공개 상태를 유지합니다. 이 기능은 서버가 필요 없으며, PlantUML 인코드/디코드 기법을 사용합니다.

Responsive Layout with Mobile Tabs

사용자가 공유된 URL을 모바일 기기에서 열면, 에디터가 매끄럽게 동작합니다. 모바일 친화적입니다.

Preview Panel (Light/Dark) Theme Toggler

코드 에디터와 다이어그램 미리보기 모두에 대해 라이트와 다크 테마를 전환할 수 있습니다.

Multi‑tab Support

같은 브라우저 내에서 여러 탭을 열어 각각 다른 다이어그램을 작업할 수 있습니다. 각 탭은 자체 PlantUML 코드와 미리보기 이미지를 보유하고, 파일 관리 시스템이 모든 내용을 추적합니다. 직접 사용해 보세요!