Kroki

Tier: Free, Premium, Ultimate Offering: Self-Managed

Kroki 통합을 사용하면 AsciiDoc, Markdown, reStructuredText 및 Textile에서 코드로서 다이어그램을 생성할 수 있습니다.

GitLab에서 Kroki 활성화하기

관리자 계정으로 로그인하여 다음 단계를 따라 설정 > 일반으로 이동하여 Kroki 섹션을 확장한 후 Kroki 활성화 확인란을 선택하세요.

  1. 좌측 사이드바에서 가장 아래쪽에 있는 관리 영역(Admin Area)을 선택합니다.
  2. 설정 > 일반으로 이동합니다.
  3. Kroki 부분을 확장합니다.
  4. Kroki 활성화 확인란을 선택합니다.
  5. 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 설치 문서를 참조하세요.

지원되는 다이어그램 유형은 다음과 같습니다:

추가 다이어그램 라이브러리를 사용하려면 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)" ];
}
....

GraphViz 다이어그램

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
....

C4 PlantUML 다이어그램

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]
....

다이어그램