그래프는 PlantUML 로 작성하자

블로그나 팀위키를 작성시에 다이어그램 같은 그래프를 그려야 할 경우가 종종 발생합니다.
그러면 powerpoint 나 draw.io 로 그리게 됩니다.

파워포인트나 draw.io 로 그린 그래프는 다른 사람이 수정하기가 어려운데
쉽게 수정할 수 있는 방법을 찾아보다가
PlantUML 을 관심있게 보게 되었습니다.

PlantUML

PlantUML 은 텍스트 기반으로 다이어그램을 그리는 오픈소스 입니다

일반적인 다이이그램 9종

  • Sequence diagram
  • Usecase diagram
  • Class diagram
  • Activity diagram
  • Component diagram
  • State diagram
  • Object diagram
  • Deployment diagram
  • Timing diagram

non-UML 다이어그램 9종

  • Wireframe graphical interface
  • Archimate diagram
  • Specification and Description Language
  • Ditaa diagram
  • Gantt diagram
  • MindMap diagram
  • Work Breakdown Structure diagram
  • Mathematic with AsciiMath or JLaTeXMath notation
  • Entity Relationship diagram

을 표현할 수 있습니다.

이렇게 작성하면

1
2
3
{% plantuml %}
Bob->Alice : hello
{% endplantuml %}

이렇게 보입니다

Hexo 에 설치방법

Hexo 에 PlantUML 을 적용하는 방법은 hex-tag-plantuml 을 설치하면 별도의 jar 파일을 설치할 필요없이 PlantUML 서비스와 직접 엮어서 표현해줍니다

설치

blog 의 루트 디렉토리에서 plugin을 설치 합니다

1
npm install hexo-tag-plantuml --save

옵션

_config.yml 에 설정을 추가합니다

1
2
3
## plantUML
tag_plantuml:
type: static

type 은
static 과 dynamic 이 있는데 이용하는데 차이는 없습니다.

POST 에 사용하기

포스트에서 글을 작성하다가 plantuml 의 시작과 끝을 선언해주면 된다

1
2
3
4
5
{% plantuml %} PlantUML 을 시작하는 태그
@startuml

@enduml
{% endplantuml %} PlantUML 을 끝내는 태그

UML 다이어그램 사용하기

다이어그램 시작태그 종료태그
시퀀스 @startuml @enduml
유스케이스 @startuml @enduml
클래스 @startuml @enduml
액티비티 @startuml @enduml
컴포넌트 @startuml @enduml
상태 @startuml @enduml
객체 @startuml @enduml
배치 @startuml @enduml
타이밍 @startuml @enduml

Non-UML 다이어그램 사용하기

다이어그램 시작태그 종료태그
Wireframe @startsalt @endsalt
Archimate @startuml @enduml
Ditaa @startuml @enduml
Gantt @startgantt @endgantt
MindMap @startmindmap @endmindmap
WBS @startwbs @endwbs
Mathematic @startuml @enduml
ERD @startuml @enduml