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

그래서 만든 것이 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로 출력할 수 있습니다.

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

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

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

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

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

cd Web
npm install
npm run dev
...

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

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

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

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

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

리포지토리는 여기 있습니다.