PlantUML(puml) 가이드

PlantUML 은 글로 쓴 코드로 다이어그램을 그리는 도구입니다. 기본 문법과 DocLoom puml 편집기의 사용법, 기본 제공 예제를 정리했습니다.

PlantUML 이란

도형을 마우스로 배치하는 대신 Alice -> Bob : 안녕 처럼 관계를 글로 적으면 시퀀스·클래스·유스케이스·상태·액티비티 같은 다이어그램이 자동 배치되어 그려집니다. 코드가 곧 원본이라 고치기 쉽고, 텍스트라서 변경 내역을 비교하기도 좋습니다. DocLoom 은 .puml 파일로 저장하며, 그림은 PlantUML 엔진을 이 브라우저 안에서 실행해 그립니다. 코드는 서버로 보내지 않습니다.

첫 다이어그램 그리기

  1. 홈에서 "새 문서 > PUML" 을 눌러 예제 갤러리를 열고, 그리려는 종류에 가까운 예제를 고릅니다(빈 다이어그램도 있습니다).
  2. 왼쪽 코드를 고치면 오른쪽 그림이 곧바로 갱신됩니다. 문법 오류가 있으면 오류 패널이 어느 줄이 왜 틀렸는지 알려 줍니다.
  3. 모든 다이어그램은 @startuml 로 시작해 @enduml 로 끝나야 합니다(마인드맵은 @startmindmap 처럼 종류별 짝이 있습니다).
  4. Ctrl+S 로 .puml 을 저장하거나, 파일 메뉴에서 PNG·SVG 로 내보내고 이미지·코드를 복사합니다.

문법 요약

기본 틀

  • @startuml
    Alice -> Bob : 안녕
    @enduml

    모든 다이어그램은 @startuml 로 시작해 @enduml 로 끝납니다(마인드맵은 @startmindmap …)

  • ' 한 줄 주석

    ' 로 시작하는 줄은 주석

  • title 제목

    다이어그램 제목

시퀀스

  • participant 서버

    참여자(actor·database·boundary·control·entity·queue 도 가능)

  • participant "긴 이름" as L

    긴 이름에 별칭 붙이기

  • A -> B : 요청

    실선 화살표 (--> 점선, ->> 얇은 화살, ->x 실패)

  • alt 성공
      A -> B : ok
    else 실패
      A -> B : 오류
    end

    분기 (opt·loop·par·group 도 같은 모양)

  • note right of A : 메모

    노트 (left/right/over)

  • activate A
    deactivate A

    활성 구간

  • autonumber

    메시지 번호 자동 매기기

클래스

  • class 이름 {
      +필드 : String
      +메서드()
    }

    클래스(+ public, - private, # protected)

  • A <|-- B

    상속 (B 가 A 를 상속)

  • A *-- B

    합성 (o-- 집합, --> 연관, ..> 의존)

  • A "1" --> "0..*" B : 설명

    다중도와 설명

  • interface I
    enum E

    인터페이스·열거형

유스케이스·컴포넌트·상태

  • actor 사용자
    usecase (로그인) as UC1
    사용자 --> UC1

    유스케이스

  • [웹] --> [서버] : HTTP

    컴포넌트 (대괄호)

  • [*] --> 대기
    대기 --> 실행 : 시작
    실행 --> [*]

    상태 전이 ([*] 는 시작/끝)

액티비티

  • start
    :단계;
    stop

    시작·단계·끝

  • if (조건?) then (예)
      :가;
    else (아니오)
      :나;
    endif

    분기

  • while (계속?)
      :반복;
    endwhile

    반복

그 밖의 종류

  • @startmindmap
    * 중심
    ** 가지
    @endmindmap

    마인드맵 (별표 개수 = 깊이)

  • @startgantt
    [작업] lasts 5 days
    @endgantt

    간트

  • @startjson
    {"a": 1}
    @endjson

    JSON 시각화

  • entity 고객 {
      *id : int
    }

    ER 엔티티

꾸미기

  • skinparam monochrome true

    흑백 (툴바 "스킨" 으로도 고를 수 있음)

  • skinparam defaultFontName Noto Sans KR

    글꼴 지정 — 직접 쓰면 툴바 글꼴보다 우선합니다

  • !theme cerulean

    내장 테마(plain·cerulean·cyborg·minty …). 파일·URL include 는 지원하지 않습니다

  • A -[#red]> B : 빨간 화살표

    화살표 색

  • rectangle 이름 #lightblue

    요소 배경색

그림에서 바로 고치기

오른쪽 그림의 요소를 클릭하면 해당 코드 줄로 이동하고, 더블클릭하면 글자를 바로 수정하며, Delete 로 삭제하고, 우클릭(또는 도구 모음의 "추가")으로 요소를 더할 수 있습니다. 이런 이미지 편집은 한 번의 실행 취소(Ctrl+Z)로 되돌아갑니다. 지원 범위는 다이어그램 종류마다 다르고, 편집기의 도움말 > "문법 치트시트·편집 지원 범위"에 표로 있습니다. 코드를 방금 고쳐 그림이 아직 최신이 아닐 때는 이미지 편집이 잠깁니다.

내보내기와 보기 옵션

  • PNG 내보내기: 배율(1배·2배·3배)과 배경(흰색·투명)을 골라 이미지로 저장합니다. 문서에 붙이거나 메신저로 보낼 때 씁니다.
  • SVG 내보내기: 확대해도 선명한 벡터 이미지로 저장합니다.
  • 이미지로 복사 · 코드 복사: 클립보드로 복사해 다른 문서에 바로 붙여 넣습니다.
  • 배치와 배경: 코드와 그림을 좌우 또는 상하로 배치하고, 그림 배경을 라이트·다크로 볼 수 있으며, 확대·축소와 창에 맞춤을 지원합니다. 스킨(흑백 등)은 내보내기에도 반영됩니다.
  • 글꼴: 글꼴 파일은 번들하지 않고 이름만 지정합니다. 코드에 skinparam defaultFontName 이름 을 직접 쓰면 그 글꼴이 우선합니다. !theme 의 내장 테마는 쓸 수 있지만 파일·URL include 는 지원하지 않습니다.

기본 제공 예제 15종

빈 문서

  • 빈 다이어그램 — @startuml 틀과 한 줄 예시

시퀀스

  • 로그인 흐름 — 사용자·서버·DB 사이의 요청/응답과 분기
  • 주문·결제 — 활성 구간과 반복 호출

클래스

  • 도메인 클래스 — 상속·합성·연관

유스케이스

  • 쇼핑몰 유스케이스 — 액터와 시스템 경계

액티비티

  • 요청 처리 흐름 — 조건 분기와 반복

컴포넌트

  • 서비스 구성 — 모듈 사이 의존

상태

  • 주문 상태 — 상태 전이

ER

  • 주문 ER 도 — 엔티티와 관계(IE 표기)

배치

  • 배포 구성 — 서버·클라우드·DB

오브젝트

  • 객체 스냅샷 — 인스턴스와 값

마인드맵

  • 프로젝트 아이디어 — 가지치기

WBS

  • 작업 분해 — 단계별 작업 구조

간트

  • 일정표 — 작업 기간과 선후 관계

JSON

  • JSON 시각화 — 데이터 구조 그리기

예제 고르고 새 다이어그램 만들기 · 사용 가이드로 돌아가기