Kroki MCP - Nexol MCP Service

🛠️ 사용 가능한 도구

render_diagram render_plantuml render_mermaid render_graphviz render_erd render_d2 list_diagram_types get_example

📊 지원 다이어그램 타입 (28종)

⭐ 인기 다이어그램

🌱

PlantUML

png, svg, pdf

🧜

Mermaid

png, svg, pdf

🔵

GraphViz

png, svg, pdf

📐

D2

png, svg

🗄️

DBML

png, svg

🔗

ERD

png, svg, pdf

🏗️ 블록 다이어그램

🔲

BlockDiag

png, svg

🔄

SeqDiag

png, svg

🎬

ActDiag

png, svg

🌐

NwDiag

png, svg

📦

PacketDiag

png, svg

🗄️

RackDiag

png, svg

🏛️ 아키텍처 & UML

🏛️

C4 PlantUML

png, svg

🏢

Structurizr

png, svg

📦

UMLet

png, svg

📋

Nomnoml

png, svg

📊 기타

📈

Vega/Vega-Lite

png, svg

🌊

WaveDrom

png, svg

⚙️

BPMN

png, svg

✏️

Ditaa

png, svg

🎨

Excalidraw

png, svg

🖼️

Svgbob

png, svg

📐

TikZ

png, svg, pdf

🔌

WireViz

png, svg

🌱 PlantUML 예제

시퀀스 다이어그램

객체 간 메시지 흐름을 시간 순서로 표현합니다.

로그인 인증 시퀀스

@startuml
actor User
participant "Web App" as App
participant "Auth Server" as Auth
database "User DB" as DB

User -> App: 로그인 요청
App -> Auth: 인증 요청
Auth -> DB: 사용자 조회
DB --> Auth: 사용자 정보
Auth --> App: JWT 토큰
App --> User: 로그인 성공
@enduml

클래스 다이어그램

객체지향 설계의 클래스 관계를 표현합니다.

도메인 모델 클래스 관계

@startuml
class User {
  -id: Long
  -name: String
  -email: String
  +login(): Boolean
  +logout(): void
}

class Order {
  -id: Long
  -totalAmount: Decimal
  +cancel(): void
  +pay(): void
}

class Product {
  -id: Long
  -name: String
  -price: Decimal
}

User "1" -- "*" Order : places
Order "*" -- "*" Product : contains
@enduml

유스케이스 다이어그램

@startuml
left to right direction
actor "고객" as customer
actor "관리자" as admin
rectangle "쇼핑몰" {
  usecase "상품 검색" as UC1
  usecase "주문하기" as UC2
  usecase "상품 관리" as UC3
}
customer --> UC1
customer --> UC2
admin --> UC3
@enduml

상태 다이어그램

@startuml
[*] --> 대기중
대기중 --> 처리중 : 주문접수
처리중 --> 배송중 : 결제완료
배송중 --> 완료 : 배송완료
처리중 --> 취소됨 : 취소요청
완료 --> [*]
취소됨 --> [*]
@enduml

컴포넌트 다이어그램

시스템 컴포넌트 구조

@startuml
package "Frontend" {
  [React App]
  [Redux Store]
}
package "Backend" {
  [REST API]
  [Auth Service]
  [Business Logic]
}
database "Database" {
  [PostgreSQL]
  [Redis Cache]
}
[React App] --> [REST API]
[REST API] --> [Auth Service]
[REST API] --> [Business Logic]
[Business Logic] --> [PostgreSQL]
[Business Logic] --> [Redis Cache]
@enduml

🧜 Mermaid 예제

플로우차트

프로세스 흐름을 시각화합니다. GitHub/GitLab에서 직접 렌더링됩니다.

사용자 등록 프로세스

graph TD
    A[Start] --> B{Email Valid?}
    B -->|Yes| C[Enter Password]
    B -->|No| A
    C --> D{Password Strong?}
    D -->|Weak| C
    D -->|Strong| E[Accept Terms]
    E --> F{Agreed?}
    F -->|Yes| G[Create Account]
    F -->|No| H[Exit]
    G --> I[Send Welcome Email]
    I --> J[Complete]

시퀀스 다이어그램

sequenceDiagram
    participant C as Client
    participant S as Server
    participant D as Database
    C->>S: HTTP Request
    S->>D: Query
    D-->>S: Results
    S-->>C: HTTP Response

클래스 다이어그램

classDiagram
    Animal <|-- Duck
    Animal <|-- Fish
    Animal : +int age
    Animal: +isMammal()
    class Duck{
      +String beakColor
      +swim()
      +quack()
    }

ER 다이어그램

erDiagram
    CUSTOMER ||--o{ ORDER : places
    ORDER ||--|{ LINE-ITEM : contains
    PRODUCT ||--o{ LINE-ITEM : ordered
    CUSTOMER {
        int id PK
        string name
        string email
    }

파이 차트

pie title Browser Market Share
    "Chrome" : 65
    "Safari" : 19
    "Firefox" : 8
    "Edge" : 5
    "Others" : 3

Gantt 차트

프로젝트 일정

gantt
    title Project Schedule
    dateFormat YYYY-MM-DD
    section Planning
    Requirements    :a1, 2024-01-01, 7d
    Design          :a2, after a1, 14d
    section Development
    Backend         :b1, after a2, 21d
    Frontend        :b2, after a2, 21d
    section Testing
    QA Testing      :c1, after b1, 14d

🔵 GraphViz 예제

마이크로서비스 의존성 그래프

GraphViz (DOT 언어)는 자동 레이아웃이 강력합니다.

서비스 간 의존성

digraph Microservices {
    rankdir=LR
    node [shape=box style=filled]
    Gateway [fillcolor="#4285f4" fontcolor=white]
    UserService [fillcolor="#34a853" fontcolor=white]
    OrderService [fillcolor="#ea4335" fontcolor=white]
    ProductService [fillcolor="#fbbc04"]
    PaymentService [fillcolor="#9c27b0" fontcolor=white]

    Gateway -> UserService
    Gateway -> OrderService
    Gateway -> ProductService
    OrderService -> UserService
    OrderService -> PaymentService
}

🔲 BlockDiag 계열 예제

BlockDiag

blockdiag {
  A -> B -> C -> D
  A -> E -> F -> G
}

SeqDiag

seqdiag {
  browser -> webserver [label = "GET /index.html"];
  browser <-- webserver;
  browser -> webserver [label = "POST /form"];
  browser <-- webserver;
}

NwDiag (네트워크)

nwdiag {
  network dmz {
    address = "210.x.x.x/24"
    web01 [address = "210.x.x.1"];
    web02 [address = "210.x.x.2"];
  }
  network internal {
    address = "172.x.x.x/24";
    web01; web02; db01;
  }
}

ActDiag (액티비티)

actdiag {
  write -> convert -> image
  lane user {
    write [label = "Write text"];
  }
  lane server {
    convert [label = "Convert"];
    image [label = "Generate"];
  }
}

🔗 ERD 예제

간단한 ERD 문법

[Person]
*name
height
weight
+birth_location_id

[Location]
*id
city
state
country

Person *--1 Location

문법: *는 PK, +는 FK, 관계는 *--1 (다대일), *--* (다대다)

🏛️ C4 Model 예제

컨테이너 다이어그램

C4 Model은 소프트웨어 아키텍처를 4가지 레벨로 표현합니다.

시스템 컨테이너 뷰

@startuml
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml

Person(user, "User")
Container(web, "Web App", "React")
Container(api, "API", "Node")
ContainerDb(db, "DB", "PostgreSQL")

Rel(user, web, "Uses")
Rel(web, api, "Calls")
Rel(api, db, "R/W")
@enduml

📐 D2 예제

모던 다이어그램 언어

D2는 선언적이고 읽기 쉬운 최신 다이어그램 언어입니다.

direction: right

client: Client { shape: person }
lb: Load Balancer { shape: diamond }
servers: Servers {
  api1: API 1
  api2: API 2
}
db: Database { shape: cylinder }

client -> lb
lb -> servers.api1
lb -> servers.api2
servers.api1 -> db
servers.api2 -> db

🗄️ DBML 예제

데이터베이스 마크업 언어

직관적인 문법으로 DB 스키마를 정의합니다.

Table users {
  id integer [primary key]
  username varchar
  email varchar
  created_at timestamp
}

Table posts {
  id integer [primary key]
  title varchar
  body text
  user_id integer
}

Ref: posts.user_id > users.id

🏢 Structurizr 예제

아키텍처 워크스페이스

C4 Model 기반 소프트웨어 아키텍처 다이어그램

workspace {
    model {
        user = person "User"
        softwareSystem = softwareSystem "System" {
            webapp = container "Web App" "React"
            api = container "API" "Node.js"
            db = container "Database" "PostgreSQL"
        }
        user -> webapp "Uses"
        webapp -> api "API calls"
        api -> db "Reads/Writes"
    }
    views {
        container softwareSystem { include * autolayout lr }
    }
}

📋 Nomnoml 예제

심플한 UML 다이어그램

간결한 문법으로 클래스/객체 다이어그램을 그립니다.

[Authentication Flow|
  [User] -> [Login Page]
  [Login Page] -> [Auth Service]
]

[BaseClass|+id: int|+validate()]
[ChildClass] -:> [BaseClass]

[User|+username;+email|+login();+logout()]
[Session|+token;+expiry|+refresh()]
[User] -- [Session]

🌊 WaveDrom 예제

디지털 타이밍 다이어그램

하드웨어/FPGA 개발에 필수적인 파형 다이어그램

{"signal":[
  {"name":"clk","wave":"p.....|..."},
  {"name":"req","wave":"0.1..0|1.0"},
  {"name":"ack","wave":"0..1.0|..1"}
]}

📦 추가 다이어그램 예제

PacketDiag (프로토콜)

네트워크 패킷 구조 시각화

packetdiag {
  colwidth = 32
  0-15: Source Port
  16-31: Dest Port
  32-63: Sequence Number
  64-95: Ack Number
}

RackDiag (서버랙)

데이터센터 랙 레이아웃

rackdiag {
  16U;
  1: UPS [2U];
  3: Switch;
  4: Web Server 1;
  5: Web Server 2;
  6: DB Server [2U];
}

Bytefield (프로토콜)

바이트/비트 레벨 프로토콜 구조

(draw-column-headers)
(draw-box "Version" {:span 4})
(draw-box "IHL" {:span 4})
(draw-box "Total Length" {:span 16})
(draw-box "Source IP" {:span 32})

Pikchr (PIC 언어)

SQLite 문서에 사용되는 다이어그램 언어

arrow right 200% "Commits"
box rad 10px "VCS" fit
arrow right 200% "Merges"
box rad 10px "Repository" fit

BPMN (비즈니스 프로세스)

비즈니스 프로세스 모델링 표기법

<bpmn:process>
  <bpmn:startEvent id="Start"/>
  <bpmn:task id="Review"/>
  <bpmn:endEvent id="End"/>
  <bpmn:sequenceFlow .../>
</bpmn:process>

Ditaa (ASCII Art)

ASCII 아트를 다이어그램으로 변환

+--------+   +-------+
| cBLU   +-->+ cGRE  |
| Client |   | API   |
+--------+   +-------+

Svgbob (ASCII Art)

ASCII 아트를 SVG로 변환

+--------+   +-------+
|        +-->+ API   |
| Client |   | Layer |
|        +<--+       |
+--------+   +-------+

Excalidraw (스케치)

손으로 그린 스타일의 다이어그램

{"type":"excalidraw",
 "elements":[
   {"type":"rectangle",...},
   {"type":"arrow",...}
 ]}

VegaLite (차트)

선언적 데이터 시각화

{"data":{"values":[
  {"a":"A","b":28},
  {"a":"B","b":55}
]},
"mark":"bar",
"encoding":{
  "x":{"field":"a"},
  "y":{"field":"b"}
}}

WireViz (배선도)

케이블/커넥터 배선 다이어그램

connectors:
  X1: {pinlabels: [VCC,GND,SIG]}
  X2: {pinlabels: [VCC,GND,SIG]}
cables:
  W1: {wirecount: 3}
connections:
  - [X1: [1,2,3], W1, X2]

UMLet (UML 편집기)

간단한 UML 다이어그램

<element>
  <type>Class</type>
  <panel_attributes>
    User
    --
    +id: int
    +name: string
  </panel_attributes>
</element>

Symbolator (VHDL/Verilog)

하드웨어 심볼 다이어그램

entity ALU is
  port (
    CLK    : in std_logic;
    A, B   : in std_logic_vector;
    RESULT : out std_logic_vector
  );
end entity;

TikZ (LaTeX 그래픽)

LaTeX 기반 정밀한 다이어그램

\documentclass{standalone}
\usepackage{tikz}
\begin{document}
\begin{tikzpicture}
\draw[thick,->] (0,0) -- (3,0) node[right] {x};
\draw[thick,->] (0,0) -- (0,3) node[above] {y};
\draw[blue,thick] (0,0) circle (1);
\end{tikzpicture}
\end{document}

💡 사용 팁

자연어로 요청하세요!
Claude에게 "PlantUML로 시퀀스 다이어그램 그려줘", "Mermaid로 플로우차트 만들어줘"처럼 요청하면 자동으로 적절한 도구를 선택합니다.

다이어그램 유형	추천 도구
시퀀스 다이어그램	PlantUML, Mermaid, SeqDiag
플로우차트	Mermaid, GraphViz, D2
클래스 다이어그램	PlantUML, Mermaid, Nomnoml
ERD/DB 스키마	DBML, ERD, Mermaid
네트워크 토폴로지	NwDiag, GraphViz
아키텍처	C4 PlantUML, D2, Structurizr
프로젝트 일정	Mermaid Gantt