Kroki
Kroki 통합을 사용하면 AsciiDoc, Markdown, reStructuredText 및 Textile에서 코드로서 다이어그램을 생성할 수 있습니다.
GitLab에서 Kroki 활성화하기
관리자 계정으로 로그인하여 다음 단계를 따라 설정 > 일반으로 이동하여 Kroki 섹션을 확장한 후 Kroki 활성화 확인란을 선택하세요.
- 좌측 사이드바에서 가장 아래쪽에 있는 관리 영역(Admin Area)을 선택합니다.
- 설정 > 일반으로 이동합니다.
- Kroki 부분을 확장합니다.
- Kroki 활성화 확인란을 선택합니다.
-
Kroki URL을 입력합니다. 예를 들어,
https://kroki.io
.
Kroki 서버
Kroki를 활성화하면 GitLab은 다이어그램을 이미지로 표시하기 위해 Kroki 인스턴스로 보냅니다. 무료 공용 클라우드 인스턴스 https://kroki.io
를 사용하거나 자체 인프라에 Kroki를 설치할 수 있습니다. Kroki를 설치한 후, 설정에서 Kroki URL을 업데이트하여 해당 인스턴스를 가리키도록 해야 합니다.
Docker
Docker를 사용하여 다음과 같이 컨테이너를 실행할 수 있습니다:
docker run -d --name kroki -p 8080:8000 yuzutech/kroki
Kroki URL은 컨테이너를 실행하는 서버의 호스트명입니다.
yuzutech/kroki
Docker 이미지는 대부분의 다이어그램 유형을 기본적으로 지원합니다. 전체 디렉터리은 Kroki 설치 문서를 참조하세요.
지원되는 다이어그램 유형은 다음과 같습니다:
- Bytefield
- D2
- DBML
- Ditaa
- Erd
- GraphViz
- Nomnoml
-
PlantUML
- C4 model (PlantUML 포함)
- Structurizr (C4 Model 다이어그램에 적합)
- Svgbob
- UMlet
- Vega
- Vega-Lite
- WaveDrom
추가 다이어그램 라이브러리를 사용하려면 Kroki 설치를 참조하여 Kroki 동반 컨테이너를 시작하는 방법을 알아보세요.
다이어그램 생성
Kroki 통합이 활성화되고 구성된 후, ASCII Doc 또는 Markdown 문서에 다이어그램을 추가하기 위해 구분된 블록을 사용할 수 있습니다.
-
Markdown
```plantuml Bob -> Alice : hello Alice -> Bob : hi ```
-
AsciiDoc
[plantuml] .... Bob->Alice : hello Alice -> Bob : hi ....
-
reStructuredText
.. code-block:: plantuml Bob->Alice : hello Alice -> Bob : hi
-
Textile
bc[plantuml]. Bob->Alice : hello Alice -> Bob : hi
위 블록은 HTML 이미지 태그로 변환되어 Kroki 인스턴스를 가리키도록 합니다. Kroki 서버가 올바르게 구성되었다면, 블록 대신 멋진 다이어그램을 렌더링해야 합니다.
Kroki는 다채로운 다이어그램 라이브러리를 지원합니다. 아래는 AsciiDoc을 위한 몇 가지 예시입니다:
GraphViz
[graphviz]
....
digraph finite_state_machine {
rankdir=LR;
node [shape = doublecircle]; LR_0 LR_3 LR_4 LR_8;
node [shape = circle];
LR_0 -> LR_2 [ label = "SS(B)" ];
LR_0 -> LR_1 [ label = "SS(S)" ];
LR_1 -> LR_3 [ label = "S($end)" ];
LR_2 -> LR_6 [ label = "SS(b)" ];
LR_2 -> LR_5 [ label = "SS(a)" ];
LR_2 -> LR_4 [ label = "S(A)" ];
LR_5 -> LR_7 [ label = "S(b)" ];
LR_5 -> LR_5 [ label = "S(a)" ];
LR_6 -> LR_6 [ label = "S(b)" ];
LR_6 -> LR_5 [ label = "S(a)" ];
LR_7 -> LR_8 [ label = "S(b)" ];
LR_7 -> LR_5 [ label = "S(a)" ];
LR_8 -> LR_6 [ label = "S(b)" ];
LR_8 -> LR_5 [ label = "S(a)" ];
}
....
C4 (PlantUML 기반)
[c4plantuml]
....
@startuml
!include C4_Context.puml
title System Context diagram for Internet Banking System
Person(customer, "Banking Customer", "은행 고객, 개인 은행 계좌를 소유합니다.")
System(banking_system, "Internet Banking System", "고객이 자신의 계좌를 확인할 수 있는 시스템.")
System_Ext(mail_system, "E-mail system", "내부 Microsoft Exchange 이메일 시스템.")
System_Ext(mainframe, "Mainframe Banking System", "핵심 은행 정보를 저장하는 시스템.")
Rel(customer, banking_system, "사용")
Rel_Back(customer, mail_system, "이메일을 보냄")
Rel_Neighbor(banking_system, mail_system, "이메일 보냄", "SMTP")
Rel(banking_system, mainframe, "사용")
@enduml
....
Nomnoml
[nomnoml]
....
[Pirate|eyeCount: Int|raid();pillage()|
[beard]--[parrot]
[beard]-:>[foul mouth]
]
[<abstract>Marauder]<:--[Pirate]
[Pirate]- 0..7[mischief]
[jollyness]->[Pirate]
[jollyness]->[rum]
[jollyness]->[singing]
[Pirate]-> *[rum|tastiness: Int|swig()]
[Pirate]->[singing]
[singing]<->[rum]
....