Kroki
Kroki 통합을 사용하면 AsciiDoc, Markdown, reStructuredText 및 Textile에서 코드로 다이어그램을 생성할 수 있습니다.
GitLab에서 Kroki 활성화
관리자 영역의 설정에서 Kroki 통합을 활성화해야 합니다. 관리자 계정으로 로그인한 후 다음 단계를 따릅니다.
- 왼쪽 사이드바에서 가장 아래쪽에 있는 관리를 선택합니다.
- 설정 > 일반으로 이동합니다.
- Kroki 섹션을 확장합니다.
- Kroki 활성화 확인란을 선택합니다.
- 예를 들어
https://kroki.io와 같은 Kroki URL을 입력합니다.
Kroki 서버
Kroki를 활성화하면 GitLab은 다이어그램을 이미지로 표시하기 위해 Kroki 인스턴스로 전송합니다.
무료 공용 클라우드 인스턴스 https://kroki.io를 사용하거나
자체 인프라에 Kroki를 설치할 수 있습니다.
Kroki를 설치한 후 Kroki URL을 설정에서 자체 인스턴스를 가리키도록 업데이트하세요.
참고: Kroki 다이어그램은 GitLab에 저장되지 않으므로 표준 GitLab 액세스 제어 및 다른 사용자 권한 제한이 적용되지 않습니다.
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 통합이 활성화되고 구성된 상태에서는 다음과 같이 분할된 블록을 사용하여 AsciiDoc 또는 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
위 블록은 Kroki 인스턴스를 가리키도록 한 HTML 이미지 태그로 변환됩니다. 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", "A customer of the bank, with personal bank accounts.")
System(banking_system, "Internet Banking System", "Allows customers to check their accounts.")
System_Ext(mail_system, "E-mail system", "The internal Microsoft Exchange e-mail system.")
System_Ext(mainframe, "Mainframe Banking System", "Stores all of the core banking information.")
Rel(customer, banking_system, "Uses")
Rel_Back(customer, mail_system, "Sends e-mails to")
Rel_Neighbor(banking_system, mail_system, "Sends e-mails", "SMTP")
Rel(banking_system, mainframe, "Uses")
@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]
....
도움말