
チャットからの生成（MVP 0.2.0追加）

トップページの「チャットで作成」から、日本語の構成説明を送信できます。
例：サーバー2台とスイッチ1台を作って、サーバーをスイッチにつないで
続けて：DBを1台追加してスイッチにつないで
続けて：サーバーのメモリを8GiB、CPUを4コアにして
取り消し：取り消す

初回は「新しい構成を作る」、成功後は「今の構成を変更」へ切り替わります。
Enterで送信、Shift+Enterで改行。日本語変換中のEnterでは送信しません。
対応する表現をブラウザ内のルールで読み取り、YAMLへ変換して既存エンジンへ渡します。
外部LLM・外部AIは使いません。汎用AIの自由な会話・推論機能ではありません。
機器名・台数・接続・追加・削除・台数変更・CPU/メモリ・提案ゾーンを指定できます。
台数省略は1台。GBはGiBの提案値として扱い、解釈内容を返答に表示します。
接続は明示されたものだけを反映。曖昧な指示・未対応表現では確認を返し、現在の図を保持します。
複雑な条件、代名詞、否定・除外、複数ゾーンの個別割り当てはYAMLで指定してください。
YAMLタブで解釈結果の確認・編集・保存ができます。図の4形式出力・匿名化は従来通りです。
直前10回のチャット変更を「取り消す」で戻せます。YAML手編集・ファイル読込は取り消し履歴をリセットします。
会話はページ内で最大40メッセージのみ保持し、永続保存・外部送信はしません。「履歴を消す」でも図は保持します。
検証：共通29件＋チャット22件の計51件。ブラウザで新規生成、追加、曖昧な指示の保留、取り消し、YAML連動を確認。

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

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

## Webで使う

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

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

## 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は自由な提案表記で、実在ゾーンの確認は行いません。

## グループと関係

```yaml
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は不要です。初回の依存導入後は実行中の外部通信なしで生成できます。

```powershell
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を展開したディレクトリで実行してください。

```powershell
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対応確認の代替ではありません。未対応／未確認型は汎用表示します。

## 再ビルドとカタログ更新

```powershell
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動作を確認しています。

