클라우드 구성도를 업데이트할 때, 도면 자체보다 "어떤 도구로, 어떤 파일을, 어떻게 수정할 것인가"에 시간이 더 걸릴 때가 있습니다.

그래서 만든 것이 Zukai입니다. AWS, Azure, Google Cloud의 아이콘을 사용할 수 있는 브라우저 도해 에디터로, 도면을 JSON 기반의 .zu 형식으로 저장합니다. 등록이나 설치 없이 바로 시도해 볼 수 있으며, SVG·PDF 출력도 지원합니다.

이 기사에서는 왜 도면을 JSON으로 만들었는지, AI로부터 어떻게 편집할 수 있는지 소개합니다.

도면을 "편집 가능한 데이터"로 다루고 싶었다

구성도는 설계서, README, 제안 자료, 운용 절차에 수없이 등장합니다. 하지만 바이너리(Binary) 형식의 도면은 다음과 같은 상황에서 다루기 어려워지기 쉽습니다.

• Git의 차이점(diff)으로 무엇이 바뀌었는지 확인하기 어렵다
• 동일한 도면을 다른 사람이나 AI에게 수정해 달라고 하기 어렵다
• 약간의 배치 변경만으로도 에디터를 열어야 한다

Zukai의 .zu는 노드(Node)와 링크(Link)를 JSON으로 가집니다. 예를 들어 최소 구성은 다음과 같습니다.

{
"model": {
"nodes": [
...

좌표, 형상, 라벨, 색상, 링크가 텍스트로 저장되므로 Git으로 관리하기 쉽고, AI에게 전달하기도 쉬운 형태가 됩니다.

브라우저에서 바로 그릴 수 있다

라이브 데모를 열면 즉시 샘플을 선택할 수 있습니다.

• AWS / Azure / GCP 구성도
• 멀티 클라우드(Multi-cloud) 구성도
• 시퀀스 다이어그램 (Sequence diagram)
• 마인드맵 (Mind map)

도형은 사각형, 타원, 마름모 외에도 SVG나 PNG를 배치할 수 있습니다. 링크에는 화살표, 앵커(Anchor), 직교 라우팅(Orthogonal routing)을 설정할 수 있습니다. 작성한 도면은 .zu, SVG, PDF로 출력할 수 있습니다.

AI에게 도면 변경을 요청할 수 있다

Zukai에는 도면을 AI로부터 조작하기 위한 3가지 경로가 있습니다.

• 브라우저 내의 Claude / OpenAI 패널
• 파일을 저장하여 브라우저에 라이브로 반영하는 개발 플로우
• Cursor, Claude, Codex에서 사용할 수 있는 MCP

예를 들어, MultiCloud 샘플을 연 상태에서 "VPN 대역폭을 1.2배 높여줘"라고 요청하면, AI는 노드의 위치와 크기를 업데이트할 수 있습니다.

브라우저 내의 AI 패널에서는 자신의 Anthropic 또는 OpenAI API 키를 사용합니다. 키는 브라우저의 localStorage에 저장되며, 요청은 브라우저에서 각 프로바이더(Provider)로 직접 전송됩니다. 공용 단말기에서는 사용하지 말고, 권한을 제한한 키를 사용하는 것을 권장합니다.

Cursor 등에서 MCP로 편집하기

로컬에서 편집하는 경우에는 개발 서버와 MCP를 실행합니다.

cd Web
npm install
npm run dev
...

브라우저에서 다음을 엽니다.

그 상태에서 zukai MCP 서버를 활성화하면, 채팅을 통해 현재의 도면을 읽고, 변경하고, 필요하다면 파일로 저장할 수 있습니다. MCP를 통한 변경은 브라우저 상에서 실행 취소/다시 실행(Undo/Redo)이 가능합니다.

설정 절차와 이용 가능한 도구는 USAGE.md에 정리되어 있습니다.

먼저 시도해 보셨으면 하는 것

• 라이브 데모에서 MultiCloud 샘플을 연다
• 노드를 드래그하여 배치를 바꾼다
• .zu 또는 SVG로 출력한다
• API 키를 준비할 수 있다면, AI 패널을 통해 작은 변경을 요청해 본다

버그 보고나 "이런 도면을 그리고 싶다"는 요구사항은 GitHub의 피드백 폼을 통해 보낼 수 있습니다. API 키와 같은 비밀 정보는 포함하지 마십시오.

리포지토리는 여기입니다.

Discussion