クラウド構成図を更新するとき、図そのものよりも「どのツールで、どのファイルを、どう直すか」に時間がかかることがあります。

そこで作ったのが Zukai です。AWS、Azure、Google Cloudのアイコンを使えるブラウザ図解エディタで、図をJSONベースの.zu形式で保存します。登録やインストールなしで試せて、SVG・PDFへの出力にも対応しています。

この記事では、なぜ図をJSONにしたのか、AIからどう編集できるのかを紹介します。

図を「編集可能なデータ」として扱いたかった

構成図は設計書、README、提案資料、運用手順に何度も登場します。ところが、バイナリ形式の図は次のような場面で扱いにくくなりがちです。

Gitの差分で何が変わったか確認しにくい
同じ図を別の人やAIに直してもらいにくい
ちょっとした配置変更でもエディタを開く必要がある

Zukaiの.zuは、ノードとリンクをJSONで持ちます。たとえば最小の構成はこうです。

{
  "model": {
    "nodes": [
      ["API", { "type": "rect", "cX": 300, "cY": 200, "rH": 96, "rV": 48, "html": "API" }, { "fill": "#e8f0fe", "stroke": "#2563eb" }]
    ],
    "links": []
  }
}

座標、形状、ラベル、色、リンクがテキストとして保存されるので、Gitで管理しやすく、AIにも渡しやすい形になります。

ブラウザでまず描ける

ライブデモを開くと、すぐにサンプルを選べます。

AWS / Azure / GCP の構成図
マルチクラウド構成図
シーケンス図
マインドマップ

図形は矩形、楕円、ひし形のほか、SVGやPNGを配置できます。リンクには矢印、アンカー、直交ルーティングを設定できます。作成した図は.zu、SVG、PDFとして出力できます。

https://zukai.828.tokyo/

AIに図の変更を頼める

Zukaiには、図をAIから操作するための経路が3つあります。

ブラウザ内のClaude / OpenAIパネル
ファイルを保存してブラウザにライブ反映する開発フロー
Cursor、Claude、Codexから使えるMCP

たとえば、MultiCloudサンプルを開いた状態で「VPNの帯を1.2倍高くして」と頼むと、AIはノードの位置とサイズを更新できます。

ブラウザ内のAIパネルでは、自分のAnthropicまたはOpenAI APIキーを使います。キーはブラウザのlocalStorageに保存され、リクエストはブラウザから各プロバイダへ直接送られます。共有端末では使わず、権限を絞ったキーを使うのがおすすめです。

CursorなどからMCPで編集する

ローカルで編集する場合は、開発サーバーとMCPを起動します。

cd Web
npm install
npm run dev

cd ../tools
npm install

ブラウザで次を開きます。

http://localhost:8281/?zu=Samples/MultiCloud.zu

そのうえでzukai MCPサーバーを有効にすると、チャットから現在の図を読み、変更し、必要ならファイルに保存できます。MCPによる変更はブラウザ上でUndo/Redoできます。

設定手順と利用できるツールはUSAGE.mdにまとめています。

まず試してほしいこと

ライブデモでMultiCloudサンプルを開く
ノードをドラッグして配置を変える
.zuまたはSVGで出力する
APIキーを用意できる場合は、AIパネルから小さな変更を頼む

不具合報告や「こういう図を描きたい」という要望は、GitHubのフィードバックフォームから送れます。APIキーなどの秘密情報は含めないでください。

リポジトリはこちらです。

https://github.com/Satachito/Zukai