さくらのクラウド構成図ジェネレーター MVP 0.2.0

簡易YAMLからdraw.io、Mermaid、SVG、PNGを生成できます。公開Web版の入力解析・匿名化・描画・PNG変換はブラウザ内だけで行います。入力や生成した図をアップロードするAPI、解析用の外部サービス、アクセス解析、永続保存はありません。

チャットから図を生成する

「チャットで作成」に日本語の構成説明を入力し、「送信して生成」を押します。初回は新規作成、成功後は現在の構成の変更に切り替わります。

サーバー2台とスイッチ1台を作って、サーバーをスイッチにつないで
DBを1台追加してスイッチにつないで
サーバーのメモリを8GiB、CPUを4コアにして
取り消す

Enterで送信、Shift+Enterで改行。日本語変換中のEnterでは送信しません。YAMLタブで解釈結果を確認できます。

外部AIは使わず、対応する構成表現をブラウザ内で解釈します。自由な会話全般、代名詞、否定・除外、複雑な条件には未対応です。曖昧な指示では図を変更せず、確認を返します。GBはGiBの提案値として扱ったことを返答に表示します。

直前10回の変更を「取り消す」で戻せます。YAMLの手編集・ファイル読込は取り消し履歴をリセットします。会話はページ内で最大40メッセージ保持し、永続保存しません。「履歴を消す」でも図は保持します。

共通29件＋チャット22件の51テストと、ブラウザでの追加・取り消し・不明指示の保留を確認しています。

YAMLで使う

ジェネレーターを開き、「YAMLを編集」タブでサンプルを選んで「読み込む」。
YAMLを編集し、「構成図を生成」を押す。編集後は古い出力が無効になります。
顧客向けの匿名化とシンプル／詳細表示を選ぶ。
draw.io / Mermaid / SVG / PNGを保存する。必要ならGraph JSONも保存する。

「ファイルを開く」はローカルファイルの読み取りです。サーバーへのアップロードはしません。「YAMLを保存」は入力をそのまま保存するので匿名化しません。未保存の編集がある場合はページを閉じる前に保存してください。サイトのホスティング事業者には通常のページアクセスは届きますが、入力内容を送信するコードはありません。

YAMLの最小例

version: "1"
title: Webシステムの提案
resources:
  - key: web
    type: server
    label: Webサーバー
    zone: 提案ゾーンA
    attributes: {cores: 2, memoryGiB: 4}
  - key: disk
    type: disk
    label: ディスク
    zone: 提案ゾーンA
    attributes: {diskGiB: 100}
links:
  - {from: web, to: disk, relation: attached_to}

keyは英字で始まる英数字・ハイフン・アンダースコア64文字以内。重複不可。typeはサンプルの短縮名、公式Terraform登録名、カタログの正規名が使えます。カタログ未登録でも汎用図形と警告を残して生成します。

項目	指定
version	1または"1"。他の版は拒否
title	任意の図タイトル。顧客向けでは定型タイトルへ置換
resources	1～150件。key/type必須、label/zone/group/attributesは任意
links	最大300件。from/toはresource key、relationは任意
groups	最大40件。key/label必須、kind、parentまたはzoneを任意指定
attributes	cores、memoryGiB、diskGiB、capacityGiBは正の数値。ip、hostname、planは社内用の詳細属性

任意属性は既定で取り込まず警告します。password/token/private_key/access_keyなどは社内用でも取り込みません。未知値はnullとしてGraphに保持します。任意の変数展開やコード実行はありません。zoneは自由な提案表記で、実在ゾーンの確認は行いません。

グループと関係

groups:
  - key: private
    label: VPCルータ配下
    kind: vpc-router
    zone: 提案ゾーンA
resources:
  - {key: web, type: server, group: private}

resourceにzoneがなくても親groupの提案ゾーンを継承します。parentを使えばグループを入れ子にできます。parentとzoneの同時指定、循環する親、存在しない参照、resourceとgroupのzone不一致はエラーです。一つのresourceは一つの表示groupに所属します。実際のVPC到達性は検証しません。

関係はconnected_to（接続）、attached_to（ディスク）、backend（backend）、routes_to（ルート）、redundant_with（冗長化）、depends_on（依存）など。未知の関係は「関連」として描き警告します。evidenceはexplicit / inferred / unresolved、planeはnetwork / storage / dependency / logicalを指定できます。推定・依存・冗長化は破線、方向性がある関係だけ矢印を付けます。

匿名化と出力

顧客向けが既定です。resource/group/zoneのラベルと内部IDを置換し、IP/hostname/plan/任意属性と入力来歴を除去。数値のCPU・メモリ・容量だけを残します。未知型の名称も定型化します。元の入力は変更しません。描画前に処理するため、SVGやdraw.ioの隠れた属性、Graph JSONにも除去を適用します。

匿名化を外すと社内用になり、名称とゾーンを保持します。詳細版では許可されたIP/hostname/planも出力します。提出前に設定と図を確認してください。

出力	用途と制限
draw.io	編集可能なmxGraph XML。zone/groupの実際の親子関係も保持
Mermaid	flowchart TBテキスト。接続意味とgroupを保持。SVGと同じ座標配置を保証しない
SVG	文字・図形を保持するベクター。任意script、外部画像、foreignObjectを生成しない
PNG	白背景のラスタ画像。WebはローカルCanvas、CLIはPillow。1倍/2倍、1,600万画素まで
Graph JSON	既存のJSON Schema 1.0.0へ適合する正規化モデル。匿名化設定を適用

PNGの日本語はローカルフォントに依存します。長いラベルは図上で省略される場合があり、警告とGraphの元値を確認してください。ノードの重なりを防ぐ決定的配置ですが、大きな図や密な接続では線の交差・線とノードの重なりを最適化しません。図を分割して使ってください。

ローカルPython CLI

必要環境：Python 3.10以降、Node.js 20以降、Pillow、日本語TTF/OTF/TTCフォント。engine.cjsに実行依存を同梱しているため、生成だけならnpm installは不要です。初回の依存導入後は実行中の外部通信なしで生成できます。

python -m pip install -r requirements.txt
python .\構成図.py ".\サンプル\単体サーバー.yaml" --out ".\生成結果" --detail

SVG/draw.io/mmd/PNG/Graph JSON/診断JSONの6ファイルを生成します。社内用は--internal、PNG倍率は--scale 1または--scale 2、フォントは--font "C:\Windows\Fonts\meiryo.ttc"で指定。既存ファイルを上書きする場合だけ--overwriteを付けます。入力不正やPNG変換失敗の段階では出力を書き込みません。書込み段階のディスク障害は複数ファイルの完全なtransactionを保証しません。

ローカルWeb版

ZIPを展開したディレクトリで実行してください。

python -m http.server 8765 --bind 127.0.0.1 --directory web

ブラウザでhttp://127.0.0.1:8765/を開きます。Workerを使うため、index.htmlのダブルクリックではなくローカルHTTPサーバーを利用してください。入力はメモリ内のみで、ブラウザを閉じると失われます。

構造・設計判断

core.mjsのCollector → 正規化Graph → Presentation（匿名化）→ Layout → Rendererを分離。ブラウザWorkerとPython CLIが同じ生成エンジンを使用し、重複実装を避けました。PythonはCLIとPNGラスタライズを担当し、ブラウザ描画・共通エンジンはJavaScriptです。

ADR-MVP-001：MVPはPython CLI＋JavaScript共通エンジンを採用。純Pythonの別実装やGo/WASMは見送り。ブラウザ内での利用、オフライン生成、同一Graph契約を小さく実現するため。API Collectorを拡張する段階でGo SDKとの接続を再検討します。

ADR-MVP-002：JSON Schema検証コードはビルド時に事前コンパイル。実行時のeval、unsafe-eval、リモートschema取得は不要。公開CSPはconnect-src 'none'を維持します。

ADR-MVP-003：型一覧は固定commitのTerraform v2 ResourcesMapから生成し、意味・表示・scopeの対応だけをcatalog-overlay.jsonへ分離。45種の登録名を抽出し11種の表示対応を確認。これはprovider schemaの属性抽出・最新サービス全網羅・API対応確認の代替ではありません。未対応／未確認型は汎用表示します。

再ビルドとカタログ更新

npm ci
npm run build
npm test
python CLI検証.py

ビルドはwebのJSとengine.cjs、事前コンパイル検証器を再生成します。golden/はレビュー済みの4構成の期待値で、通常テスト時には更新しません。golden生成.mjsはベースラインを意図的に変更するときだけ使います。カタログ更新はpython カタログ生成.pyで候補生成し、差分を人がレビューしてからbuildしてください。取得URLはcatalog-source.jsonで管理します。自動PR・日次更新は未実装です。

設計書、入力schema、Graph schema、出典・取得日・schema版・commit・digestを含むruntime catalogも同梱しています。依存ライセンスはTHIRD_PARTY_NOTICES.txtに収録。

今回の範囲と未実装

実装済み：任意YAMLの解析、契約・参照・循環検証、正規化Graph、入れ子group、顧客向け匿名化、5サンプル、4形式保存、未知型・鮮度警告、ローカルCLI。

未実装：API/usacloud/Terraformの実環境収集、正式provider schemaの属性抽出、料金／実在zoneの検証、公式アイコン、更新PRパイプライン、疎通・到達性検証。今回の図はすべて提案図としてフッターに明示します。

検証：共通エンジンとチャット計51テスト、4構成のgolden、CLI実ファイル検査、Mermaid 11.15.0による5構成の構文検査、ブラウザの実PNG保存・匿名化・不正入力・CSP動作を確認しています。