[Kroki] Kroki란 무엇인가? — 다이어그램을 코드로 관리하는 시대

 

 

1. 문제 정의

아키텍처 다이어그램은 대부분 다음과 같은 방식으로 관리된다.

• draw.io, PPT, Figma 등에서 수동 작성
• 구조 변경 시 수동 수정
• 버전 관리 불가 또는 어려움

이 방식은 시간이 지나면서 다음 문제를 만든다.

• 문서와 실제 시스템 불일치
• 최신 구조를 신뢰할 수 없음
• 협업 시 커뮤니케이션 비용 증가

즉, "문서는 있지만 믿을 수 없는 상태"가 된다.

---

2. 접근 방식: Diagram as Code

이 문제를 해결하는 방식은 단순하다.

다이어그램을 코드처럼 관리한다.

• 텍스트로 작성
• Git으로 버전 관리
• 자동으로 렌더링

이 개념을 Diagram as Code라고 한다.

이 방식을 구현하기 위한 도구 중 하나가 Kroki이다.

---

3. Kroki란 무엇인가

Kroki는 텍스트 기반 다이어그램을 이미지로 변환해주는 API이다.

동작 구조는 다음과 같다.

다이어그램 텍스트 → Kroki API → 이미지(SVG, PNG)

즉, 다이어그램을 코드로 작성하고, API를 통해 렌더링한다.

 

4. 첫 번째 예제: Mermaid 다이어그램

Kroki는 다양한 다이어그램 언어를 지원한다.

그 중 가장 많이 사용하는 것이 Mermaid이다.

다음 코드를 작성한다.

graph TD
A[User] --> B[Backend]
B --> C[Database]

이 코드는 다음 의미를 가진다.

• User → Backend → Database 흐름 표현
• TD는 Top-Down 방향을 의미

---

5. Kroki에서 실행하기

위 코드를 Kroki에서 실행하는 방법은 다음과 같다.

1. https://kroki.io/ 접속
2. 좌측 입력창에 코드 입력
3. 우측에서 렌더링된 다이어그램 확인

이 과정에서 별도의 설치는 필요 없다.

---

6. Kroki의 핵심 특징

6.1 단일 API로 다양한 다이어그램 지원

• Mermaid
• PlantUML
• Graphviz
• BPMN 등

하나의 API로 여러 DSL을 처리할 수 있다.

---

6.2 HTTP 기반 사용

Kroki는 단순한 HTTP API이다.

예시:https://kroki.io/mermaid/svg/{encoded_diagram}