그래프는 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 | {% plantuml %} |
이렇게 보입니다
Hexo 에 설치방법
Hexo 에 PlantUML 을 적용하는 방법은 hex-tag-plantuml 을 설치하면 별도의 jar 파일을 설치할 필요없이 PlantUML 서비스와 직접 엮어서 표현해줍니다
설치
blog 의 루트 디렉토리에서 plugin을 설치 합니다
1 | npm install hexo-tag-plantuml --save |
옵션
_config.yml
에 설정을 추가합니다
1 | ## plantUML |
type 은
static 과 dynamic 이 있는데 이용하는데 차이는 없습니다.
POST 에 사용하기
포스트에서 글을 작성하다가 plantuml 의 시작과 끝을 선언해주면 된다
1 | {% plantuml %} 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 |