--- name: v-drawio description: | draw.io のダイアグラムを生成し、ブラウザで直接開ける URL を書き出したファイルとして出力します。 Use when the user wants a diagram — AWS (aws4) / Azure (azure2) architecture, infographic, comparison, dashboard, timeline, poster/report visual. Triggers: "draw.io", "構成図", "アーキテクチャ図", "ポスター", "可視化", "障害分析". Do NOT use for slide decks (use v-slidev) or screenshot evidence xlsx (use v-evidence). when_to_use: "構成図や図解を作りたい、ポスターやインフォグラフィックにしたい、draw.io で描きたい" argument-hint: "[図の内容]" --- # draw.io ダイアグラム生成 draw.ioのXMLダイアグラムを生成し、ブラウザで直接開けるリンクとして出力する。 ## 出力手順 1. draw.ioのmxGraphModel形式でXMLを生成し、出力先に保存する - **デフォルト:** `/.pecotv/work/drawio/` 配下の絶対パス - **指定あり:** ユーザーが出力先を指定した場合はそちらに保存する 2. XMLファイルを `pecot-visual` サーバの `drawio_create` に渡し、`out_path` で表示用 HTML へ直接書き出す 3. **表示用 HTML のパスのみ** をユーザーに案内する。URL 文字列そのものは **絶対に画面へ表示しない** `drawio_create` の引数: - `input_path`: 入力 `.drawio` ファイルの絶対パス - `out_path`: 表示用 HTML（`.html`。ダブルクリックすると既定ブラウザで開き draw.io へリダイレクトする）の絶対パス（例: `.html`）。**必ず指定する** - `theme`: 任意。テーマの指定で、talk-dir のパス・`git+https://...#`・`file:` のどれか。図の書体と文字サイズ（5 段）の確認に使う宣言を、次の優先順で決める 1. `theme` 2. 図の祖先の talk-dir（図がその `public/` の下にあるとき） 3. 既定値（書体 `sans-serif`）書体は常に確かめ、5 段のサイズはテーマが決まったときだけ確かめる。総称 `monospace` を含む書体の並びは、書体の確認の対象外である。 talk-dir の中の図は、`slide_theme` の `declaration.fonts`（`body`・`eastAsian`）と `fontSizes` の値で描く。図を talk-dir の `public/` の下に置くときは、`theme` を渡さない。図の位置からテーマが決まる。既定の出力先（`.pecotv/work/drawio/`）は talk-dir の外にある。外に置くスライド用の図だけ、`theme` に talk-dir を渡す - 図のセルの `fontFamily` は、次の順に書く。 1. 宣言の `fonts.body` 2. `eastAsian`（`body` に無ければ） 3. 末尾に `sans-serif` 書式は `fontFamily=, , sans-serif` である。例えば `body` が `Test Sans`、`eastAsian` が `Test Sans JP` なら、`fontFamily=Test Sans, Test Sans JP, sans-serif` と書く。宣言が無いときは `fontFamily=sans-serif` だけを書く - `png`: 既定 `true` で、`out_path` の拡張子を `.png` に置換した兄弟ファイルへ、実描画 PNG を同時出力する。PNG が不要なときだけ `false` にする `out_path` の親ディレクトリは自動で作成される。応答の `data` には、表示用 HTML のパス（`file`）・PNG のパス（`png`）・PNG 生成の可否（`pngFailed`）が載る。確かめた宣言は `data.theme` に載る。中身は `source`・`name`・`fonts` で、サイズを確かめたときは `fontSizes` も載る。 ### 注意 - **`out_path` は必ず指定すること。** 省略すると応答の `data.url` に URL 本体が載り、そのままコンテキストに入る - **Read してよいのは常に `.drawio.png` の方。** 表示用 HTML（`.drawio.html`）は巨大な base64 URL の器であり Read しない（コンテキストウィンドウを消費する） - **URL 文字列そのものを画面（assistant 出力）に表示することは禁止。** `cat`/`echo` 等で URL を吐き出すのも禁止。`out_path` で書き出した **表示用 HTML のパス** をユーザーに案内する。これは Read 経由と応答経由のどちらでも同じである。URL 本体は base64 を含み巨大で、コンテキスト・チャットログを汚染する - PNG ファイル（`.png`）は Read して品質チェックに使ってよい。 diagrams.net の viewer で、テーマの宣言の書体を読み込んで描いた図の画像。スライドに置いたときと同じ字幅で折り返すので、はみ出しや揃いはこの PNG で判断できる。 draw.io 公式の「XML 埋め込み PNG (`.drawio.png`)」形式である。draw.io や VS Code 拡張で開けば、ダイアグラムとして再編集できる。ただし埋め込まれるのは `icon://` を data URI に展開した解決後の XML である。編集は `.drawio` 側で行う（PNG を直接編集しても `.drawio` からの再生成に反映されず枝分かれする） - PNG は図の XML ソースを内包するため、ラスター画像のみを配布したい場合は `--no-png`（MCP は `png: false`）を指定する - XML内のvalue属性にHTML実体参照（`<font>`等）を含めるのは問題ない - エッジ（edge）には必ず `` を含める（省略するとVSCodeでキャンバスが崩れる） - 図のラベルに文章規則の違反があると、`drawio_create` は何も書き出さず `data.reason: text-violation` と `data.violations[].item` を返す。 `item` は `mxCell id="..."` の形で、直す先のセルを名指しする。`