drawio-diagram-builder

Research Draw.io Diagram Builder

前提条件

開始する前に、以下が利用可能であることを確認してください。不足しているものがあれば、直ちにユーザーに伝えてください。不足したまま作業を進めてはいけません。

要件	理由
Python 3（3.7 以降）	プレビュー／検証スクリプトはすべて Python で書かれています。python --version を実行して確認してください。
ブラウザー自動化	反復的な調整ループでは、ローカルプレビューのスクリーンショットを撮影する必要があります。Playwright MCP、Puppeteer MCP、browser-evaluate／スクリーンショットツール、または同等のものが必要です。
ビジョン／画像読み取りツール（ユーザーがスタイルガイドとなる参考画像を提供した場合に必要）	スタイルの抽出（references/style-extraction.md を参照）には、参考画像からピクセルの色をサンプリングする必要があります。画像を読み取れるビジョン対応モデル、カラーピッカー MCP／ブラウザーツール、またはユーザーに HEX コードを尋ねる機能のいずれかが必要です。これがない場合、スタイル抽出テーブルを完成させることはできません。HEX コードを捏造してはいけません。代替策として、ユーザーにパレットを尋ねてください。
インターネットアクセス	プレビューでは iframe 内で https://embed.diagrams.net/ を読み込みます。オフラインでは動作しません。
ファイル書き込みアクセス	.drawio ファイルを作成します。

このドキュメント内のスクリプトパスは、スキルディレクトリからの相対パスです。<skill-dir>/scripts/serve_drawio_preview.py のように解決してください。スキルディレクトリが見つからない場合は、エージェントのインストール済みスキルパス（例：~/.claude/skills/drawio-diagram-builder/ または ~/.codex/skills/drawio-diagram-builder/）を確認してください。

Playwright でバンドルされたブラウザーが見つからないというエラーが報告された場合は、諦める前に、インストール済みのブラウザーチャネルを試してください。たとえば、npx playwright screenshot --channel chrome ... または --channel msedge ... を実行します。

基本原則

特に研究用や技術用の図では、まず編集可能な draw.io 図を作成してください。ユーザーが描き直し、複製、ベクター化、編集可能な形式、または 100% の再現を求めている場合、埋め込みスクリーンショットを最終回答として使用してはいけません。ラスター画像は参考資料、一時的なオーバーレイ、または明示的に承認された素材としてのみ使用できます。

複雑な図や高忠実度の図では、.drawio XML を直接作成し、ブラウザーでスクリーンショットを確認しながら進める方法を優先してください。ローカルの draw.io UI 操作は、確認やユーザーへの引き渡しに実質的な改善がある場合にのみ使用してください。

ツール戦略

次の優先順位に従ってください。

1. .drawio XML の直接生成・編集 — 信頼性が高く、再現可能です。明示的な mxGeometry の位置情報を指定して XML を記述します。
2. ローカルプレビュー HTML ＋ diagrams.net iframe の postMessage — scripts/serve_drawio_preview.py（サーバーを起動してブラウザーを開くコマンドを 1 つ実行）を実行するか、scripts/make_drawio_preview.py と python -m http.server を実行します。これによりブラウザーの URL が短く保たれ、Windows で長い URL によるクラッシュを回避できます。
3. ブラウザー自動化によるスクリーンショット — ブラウザーで http://127.0.0.1:<port>/drawio-preview.html に移動し、draw.io の埋め込みが読み込まれるまで（2〜5 秒）待ってから、ページ全体またはビューポートのスクリーンショットを撮ります。これを参照画像と比較するための証拠として使用します。
4. draw.io MCP／@drawio/mcp — 小さな図や、すばやく開く場合に限って使用します。Windows では、大きなエンコード済み URL は The data area passed to a system call is too small というエラーで失敗するため、大きな XML には .url ショートカットを頼りにしないでください。
5. draw.io デスクトップ／CLI エクスポート — インストールされている場合に使用します。任意の方法として扱い、常にローカル iframe プレビューを代替手段として用意してください。

エンドツーエンドの詳細な手順については、references/drawio-workflow.md を読み込んでください。複雑な図、プロンプトと画像が混在する入力、プロジェクトのコンテキストを示す図、または反復的な視覚修正を行う場合は、references/self-supervision-and-intake.md を読み込んでください。ユーザーからスタイルガイドとして参照画像が提供された場合は、references/style-extraction.md を読み込んでください。XML の作成前に必ず読み込み、描画する前に配色、タイポグラフィ、間隔、矢印の表現を抽出する必要があります。コンピューターサイエンスの論文、トップカンファレンス、カメラレディ版、手法、ML パイプライン、マルチモーダルアーキテクチャ、ベンチマーク、洗練された研究用図をユーザーが求めている場合は、特にスタイルの参照が乏しい、またはない場合に、references/topconf-paper-style.md を読み込んでください。図形、スタイル、エッジ、テキストレイアウトの XML を作成または修正する場合は、references/xml-authoring.md を読み込んでください。図をレンダリングする前に references/xml-preflight.md を読み込んでください。スクリーンショットなしで計算可能な欠陥（矢印とボックスの衝突、テキストのはみ出し、間隔のばらつき、色の乱れ）を検出する静的 XML 品質チェックについて説明されています。参照図に、編集可能な状態を保つべき小さなモダリティ、メモリ、警告、ツール、時計、ドキュメントなどの論文用アイコンが含まれている場合は、references/primitive-icons.md を読み込んでください。汎用 SVG アイコンのアセットによって忠実度を高められる場合は、assets/icons/ICON-MANIFEST.md を読み込んでください。

参照画像を再現する依頼では、XML を作成する前に references/reference-replication-protocol.md を読み込んでください。これは必須です。高忠実度の再現は、参照画像の観察、ジオメトリの指定、XML の作成、レンダリング、比較、修正、反復からなるエビデンスのパイプラインとして扱ってください。このプロトコルで必要とされる中間成果物が揃うまでは、参照画像をもとに描画を始めないでください。

すべての参照先は、スキルのディレクトリを基準に解決してください。

標準ワークフロー

1. 前提条件を確認する — Python 3 とブラウザー自動化が利用可能であることを確認します。利用できない場合は作業を中止し、不足しているものをユーザーに伝えてください。

2. 入力コンテキストを収集する

   • ユーザーのプロンプト、参考画像、論文の節、コードベースのファイル、ドメインに関するメモを読み込みます。
   • タスクの種類を特定します。研究用図版の作成、論文の手法図の作成、ビジュアルの再現、アーキテクチャ図の作成、リポジトリ図の作成、または反復的な仕上げです。
   • すべての入力を役割別に分類します。コンテンツソース、構造ソース、スタイルソース、レイアウトソース、またはアセットソースです。スタイルの参考資料が、コンテンツやコネクターの意味まで自動的に定めるわけではありません。
   • スタイルの入力が不十分、またはないトップカンファレンス向け論文の図版では、スタイルとレイアウトの代替資料としてのみ、references/topconf-paper-style.md と assets/reference-images/ 内の同梱画像を使用します。レイアウトを埋めるために、科学的な内容を捏造してはいけません。
   • 正確なアセットが必要な場合は、ローカルで探すか、ユーザーに提供を依頼します。必要なロゴやアイコンを、無関係なものに黙って置き換えてはいけません。
   • 参考画像がスタイルガイドとして提供されている場合は、描画する前にそのビジュアル表現を抽出してください。 参考画像を「見る」だけでは抽出したことになりません。references/style-extraction.md を読み込み、それに従ってください。抽出テーブルのすべての行を埋めてください。パレットの16進数コード、フォントサイズ、角の半径、線幅、間隔のリズムを記録します。抽出した値は必須のスタイル規約となります。ここを省略してはいけません。図が参考画像とまったく似ていない場合、ほとんどの場合、原因はスタイル抽出を行っていないことです。

3. 図版の概要とビジュアル仕様を作成する

   • 入力が混在している場合、プロンプトのみで図を作成する場合、論文やコードをもとに図を作成する場合、または複雑なタスクの場合は、ユーザーの目的、ソースの一覧、要件の追跡可能性、意味モデル、スタイル規約、未解決の前提を含む概要を作成します。references/self-supervision-and-intake.md を使用してください。
   • キャンバスのサイズ、主要な領域、階層、ラベル、色、線のスタイル、フォント、矢印、アイコン、キャプション、間隔を記録します。
   • 描画する前に、すべてのコネクターの意味を定義します。始点、終点、方向、ファンイン／ファンアウト、フィードバック、グループ化、矢印の先端の配置を定めます。意味を説明できない矢印を描いてはいけません。
   • 参考画像を再現する場合は、バウンディングボックス、テキスト行、ハイライトバー、コネクター、ループ、繰り返しブロックの位置を含む座標レベルの一覧を作成します。
   • 論文の図版では、手法の用語を正確に保ち、データ構築、トレーニング、評価、推論、サービングの各フローを区別します。
   • どの要素を正確に再現し、どの要素を近似できるかを決めます。
   • 参考画像を再現する場合は、XMLを作成する前に、必須のプロトコル成果物を作成します。
     • visual-spec.md
     • layout-grid.md
     • asset-ledger.md
     • defect-log.md

4. .drawioファイルを作成する

   • .drawioファイルが主要な成果物です。プレビューHTMLは派生成果物にすぎません。
   • 1つのmxfileに、1つ以上のdiagramページを使用します。
   • 高い忠実度が求められる場合は、明示的なmxGeometryの位置とサイズを指定します。
   • 行単位の配置が重要な場合は、密度の高いテキストを複数のセルに分割します。
   • 重要なアイコンや矢印は、可能であれば編集可能なdraw.ioのプリミティブで作成します。独自の記号を考案する前に、よく使われる研究図のアイコンレシピをreferences/primitive-icons.mdで確認します。プリミティブの編集可能性より忠実度を重視する場合は、assets/icons/に含まれるSVGアイコンを使用し、asset-ledger.mdに記録します。
   • 色、線、フォント、角丸は、参照図または指定されたスタイルに合わせて統一します。
   • レンダリング前に、必ずプリフライトチェッカーを実行します。 XMLだけでは視覚的な品質を判断できません。矢印とボックスの衝突、テキストのはみ出し、フォントのボックスとの不一致、間隔の乱れ、パレットの散乱、参照図からコピーされた意味のない装飾的な色ブロックは、目視では確認できませんが、ジオメトリから検出できます。

     python <skill-dir>/scripts/validate_visual_quality.py <file>.drawio
     

     最初のプレビューHTMLを生成する前に、FAILをゼロにする必要があります。 WARNをすべて確認します。チェッカーがゼロ以外の終了コードを返した場合は、修正して再実行します。この手順を省略しないでください。各ルールの詳しい説明については、references/xml-preflight.mdを参照してください。

5. 長いURLを使わずにプレビューする

   • 推奨：scripts/serve_drawio_preview.py <file>.drawio --port 8765を実行します。プレビューHTMLを生成し、サーバーを起動して、ブラウザーを開きます。
   • 手動で行う場合：scripts/make_drawio_preview.py <file>.drawio --out drawio-preview.htmlを実行し、続けて出力ディレクトリでpython -m http.server 8765 --bind 127.0.0.1を実行します。
   • ブラウザーでhttp://127.0.0.1:8765/drawio-preview.html?rev=1を開きます。
   • diagrams.net埋め込みiframeの初期化が完了するまで、2～5秒待ちます。
   • レンダリングされた図のスクリーンショットを撮影します。

6. 証拠に基づいて反復する

   • 厳格な必須条件：高忠実度またはユーザーにとって重要な図では、スクリーンショット→欠陥一覧→修正→検証のサイクルを最低3回実施してください。 初稿のままでは決して受け入れられません。唯一の例外は、ユーザーが明示的に「ここで止めてください」と指示した場合です。すべてのサイクルを欠陥ログに記録してください。
   • 各サイクルは次の順序で実施します：スクリーンショット → 完全な欠陥一覧（全9ゾーン） → すべてのP0/P1を修正 → 再生成 → 各修正を検証。
   • スクリーンショットを参照画像または要求された仕様と比較してください。
   • スクリーンショットは必ずキャンバスのみを切り抜いた画像にしてください。ブラウザーウィンドウ全体の画像にしてはいけません。 ブラウザー全体のスクリーンショットにはdiagrams.netのサイドバー、ツールバー、ブラウザーの外枠が含まれ、図が小さくなりすぎるため、テキストが読めず、アイコンの詳細を確認できず、間隔の欠陥も見つけられません。図が画像の80％未満しか占めていないスクリーンショットは、品質検査にまったく役立ちません。
   • 切り抜き方法： ページ全体のスクリーンショットを撮影した後、draw.ioのキャンバス／ページの四角形（図が描画される白い領域）を見つけて、その部分を切り抜いてください。Playwrightの場合：await page.screenshot({ clip: { x, y, width, height } })。切り抜き座標は、記憶やXMLではなく、現在のスクリーンショットから取得してください。スクリーンショットを確認し、キャンバスの端を見つけてから切り抜きます。
   • 切り抜けない場合は、ビューポートをズームしてください： ブラウザーのビューポートを大きく（例：1920×1400以上）し、キャンバス全体が見えるまでズームアウト（Ctrl+-）してからスクリーンショットを撮影してください。ズームアウトしたキャンバス全体の画像のほうが、ブラウザーの外枠が写り込んだまま一部が切れた画像より適切です。
   • 無効なスクリーンショットでは監査に進まないでください。 図よりもブラウザーUIのほうが多く写っている場合は、撮り直してください。テキストが読めないぼやけたブラウザー全体の画像は証拠にならず、反復サイクルを無駄にするだけです。
   • 必須：修正前に、9つすべてのゾーン（テキスト、矢印、ボックス、間隔、色、タイポグラフィ、レイアウト、アイコン、スタイルの一貫性）を確認し、完全な欠陥一覧を作成してください。 各サイクルでの最低件数：サイクル1は30件以上、サイクル2は15件以上、サイクル3は8件以上（P0が0件で自己評価が40以上の場合は5件以上）。きれいな図で件数を満たすために、欠陥を捏造してはいけません。ゾーンごとの確認ガイドについては、references/self-supervision-and-intake.mdのSection 4.1を参照してください。
   • 必須：すべてのP0およびP1の欠陥を修正し（重要なものだけに限定しない）、新しいスクリーンショットで各修正を検証してください。 一覧にP0/P1が40件あれば、40件すべてを修正してください。それぞれにFIXED／NOT FIXED／PARTIAL／REGRESSIONのいずれかを付けてください。NOT FIXEDとした欠陥は、対応に失敗したことを意味します。再度修正してください。
   • 自己監督監査の5つの観点をすべて実施して、欠陥一覧と照合してください：要件監査、セマンティック監査、視覚的な整理状態の監査、スタイル監査、リグレッション監査。
   • プレビューHTMLを再生成し、ブラウザーを更新して（キャッシュ回避用の?rev=Nを追加）、再度スクリーンショットを撮影して、作業を繰り返してください。
   • 漠然と完璧さを主張するのではなく、修正対象の具体的な欠陥を挙げてください。
   • 参照画像を再現する場合は、すべてのスクリーンショット確認をdefect-log.mdに追記し、確認された欠陥、参照画像上の根拠、変更するXMLセル、パッチの概要、残るリスクを記録してください。最初のスクリーンショットの行を追加した後、defect-log.mdは追記専用として扱ってください。
   • 改善を主張する前に、最新のスクリーンショットをレッドチームの役割に切り替えて確認してください。 もはや作成者ではありません。容赦のないレビュアーとして、9つすべてのゾーンを新鮮な目で再確認してください。最低検出件数：15件以上（自己評価が45/50以上の場合は10件以上）。3回の修正サイクル後、きれいな図に残る問題は15件未満です。実際の監査では、10件だけであっても、実際の問題が見つかります。
   • ユーザーから明らかなスクリーンショット上の欠陥を指摘された場合は、自己監督の失敗として扱ってください。ソース／参照を開き直し、解釈を正し、図にパッチを適用し、対象部分を切り抜いた画像とキャンバス全体の画像を撮影し、その教訓を欠陥ログに記録してください。その後、レッドチーム監査をやり直してください。ユーザーが欠陥を見つけたということは、ほかにも見落としがあることを示しています。
   • 最初のスクリーンショットの構造が誤っている場合は、XMLにパッチを適用する前にvisual-spec.mdとlayout-grid.mdに戻ってください。構造の見落としは、観察内容、座標、アセット、またはdraw.ioの描画に関する前提が間違っていたことを意味します。

7. 引き渡し前に検証する

   • 必須ゲート：自己採点カード（必須）。 引き渡す前に、図を1〜10点で自己採点します。

     項目	点数（1〜10）
     テキストの読みやすさ	/10
     矢印の正確さ	/10
     色の一貫性	/10
     レイアウトの一貫性	/10
     参考資料／仕様とのスタイルの一致度	/10
     合計	/50

     • 合計が30未満、または項目のいずれかが4以下 → ブロック。 反復作業を続けてください。質問せず、そのまま修正してください。
     • 合計が30〜39（かつ項目に4以下がない）→ 要注意。 次に修正する具体的な項目を5つ以上挙げてください。ユーザーが迅速な結果を明示的に求めた場合に限り、引き渡してください。
     • 合計が40以上で、すべての項目が6以上 → 許可。 5点の項目は要注意であり、許可ではありません。確認して改善してください。
     • 減点した各項目について、スクリーンショットで確認できる具体的な根拠を示してください。
   • 必須ゲート：レッドチーム監査を完了し、記録する。 レッドチームによる確認では、少なくとも15件の指摘事項（自己採点が45/50以上の場合は10件以上）を見つける必要があります。これより少ない場合は、確認が不十分か、図が引き渡し可能な状態です。どちらかを判断するため、自己採点カードを確認してください。
   • 必須ゲート：不具合記録に、スクリーンショット→インベントリ→修正→検証のサイクルを3回以上記録する（各サイクル＝スクリーンショット→9ゾーンのインベントリ→P0/P1をすべて修正→再生成→検証）。
   • scripts/validate_drawio.py <file>.drawio を実行します。
   • CI で利用しやすい最終ゲートとして、またはページ外の頂点やプレースホルダーのようなラベルなどの警告が引き渡しを妨げる場合は、scripts/validate_drawio.py --strict --json <file>.drawio を使用します。
   • 参考画像を再現する場合は、最新のスクリーンショット確認後に scripts/validate_replication_artifacts.py <workdir> --require-screenshot-review も実行します。生成／プレビューへの書き込みが完了してから検証を実行してください。同じ成果物ディレクトリに書き込むスクリプトと検証ツールを並行して実行しないでください。
   • XML の解析、ページ数の想定との一致、ID と参照の有効性、必要なジオメトリの存在、不要なラスター画像や外部画像が含まれていないこと、キャプションが指示どおりに含まれている／削除されていること、最新のスクリーンショットの確認を行います。
   • .drawio のパス、最新のスクリーンショットのパス、自己採点カード、不具合記録の概要を提示します。ユーザーが反復作業を続ける場合は、ローカルのプレビューサーバーを起動したままにします。

編集ルール

• .drawio ファイルは XML を直接記述またはパッチして編集します。対象を絞った小規模な修正には、ファイル編集ツール（Claude Code の Edit/Write など）を使用します。
• ユーザーのファイルや、無関係な生成ファイルは保持してください。
• 有用な場合に限り、作業用コピーと引き渡し用コピーを用意し、両者を同期させます。
• スクリーンショットによる視覚的な確認なしに、図が完成したと主張しないでください。
• 最新のスクリーンショットに目に見える P0/P1 の阻害要因（コネクタの意味の誤り、テキストの隠れや切れ、必要な内容の欠落、意図しない重なり、ユーザーの指示／スタイル参考資料への明白な違反）が残っている場合、図が完成したと主張しないでください。
• 必須ゲートが1つでも未達の場合、図が完成したと主張しないでください。該当するゲートは、参考資料からスタイルを抽出できていない、スクリーンショットのサイクルが3回未満、9ゾーンすべての完全な不具合インベントリがない（段階的な最低件数：C1≥30、C2≥15、C3≥8）、修正の検証がない、レッドチーム監査がない（指摘事項が15件以上、または自己採点が45/50以上なら10件以上）、自己採点が40未満、または項目に4以下があること（5以下は要注意であり、引き渡し前に改善が必要）。
• ユーザーが「100%再現」を求めた場合は、反復的な基準として扱います。ユーザーが受け入れるか、次の問題を指摘するまで、目に見える差異を見つけて修正し続けてください。
• 参考画像を再現する場合、中間成果物を省略しないでください。最初の図の品質が低い場合は、観察インベントリ、座標計画、アセット台帳、またはレンダリングの前提が不十分であることがほとんどです。

よくある失敗への対処

• Windowsでの長いURLの失敗：大きな図を.urlファイルや巨大な#create= URLで開かないでください。postMessageを使ったローカルプレビューHTMLを使用してください。
• 事前チェックの省略：ひどい最初のスクリーンショットになる最も一般的な原因です。レンダリング前にvalidate_visual_quality.pyを実行しなかったのであれば、目の前の惨状も当然です。今すぐ実行し、FAILを修正して再生成してください。
• 最初のスクリーンショットがひどい：事前チェックを省略したか、警告を無視したということです。手順4に戻り、validate_visual_quality.pyを実行して、すべてのFAILを修正し、すべてのWARNを確認してから、再レンダリングしてください。
• ブラウザー全体のスクリーンショット（サイドバー／ツールバーを含む）：図が小さすぎて読めません。キャンバスだけを切り抜いてください。スクリーンショット内の白いdraw.ioページ領域を見つけ、その領域を（x、y、w、h）で切り抜いてください。切り抜けない場合は、ビューポートを1920×1400に変更してズームアウト（Ctrl+-）し、撮り直してください。図が画像の80%未満しか占めていないスクリーンショットは、品質検査には使用できません。
• 「欠陥は8個しか見つかりませんでした」：9つのゾーンすべてを体系的に確認できていません。最低でも30個です。ゾーン1からやり直し、ピクセル単位で確認してください。すべてのセル、すべての端、すべての隙間を確認してください。
• プレビューからの保存：ローカルプレビューからローカルファイルを暗黙的に上書きすることはできません（ブラウザーのサンドボックスによる制限です）。青いSaveボタンを押すと.drawioファイルがダウンロードされます。続きの編集を行う前に、ダウンロードしたファイルを作業パスに戻してください。
• テキストの重なりやはみ出し：段落を小さなテキストセルに分割し、フォントサイズを小さくし、コンテナーの幅を広げ、安定したジオメトリを設定して、スクリーンショットで確認してください。
• ハイライトバーの位置ずれ：段落全体の背後ではなく、個々のテキスト行の背後にハイライト用の長方形を配置してください。
• ループ矢印が不格好：参照元で矢印グリフが明示的に使われている場合を除き、大きなUnicode矢印グリフではなく、編集可能な曲線コネクターまたは弧を使用してください。
• アイコンの再現度が低い：プリミティブから編集可能な近似アイコンを作成するか、正確さが重要な場合は、正確なアイコンを探すかダウンロードしてください。
• 一般的なアイコンが見つからない：ウェブを検索する前にassets/icons/ICON-MANIFEST.mdを確認してください。一般的なドキュメント、メディア、ストレージ、ルーティング、ツール、メトリクス、ステータスのアイコンには、同梱されているMITライセンスのTabler SVGを使用してください。
• リッチテキストや数式がそのまま表示される：references/xml-authoring.mdの安全なヘルパーパターンを使用してください。通常のテキストはエスケープし、<i>や<sub>など、エージェントが作成するタグに限って意図的に生のHTMLを使用してください。
• プレビューが古いまま：?rev=3のようなクエリ文字列を追加するか、プレビューHTMLを再生成するか、タブを開き直してください。
• エディターの枠が詳細を隠している：ビューポートのサイズを変更するか、draw.io内でズームするか、draw.io CLIを利用できる場合はPNGをエクスポートしてください。
• スクリーンショットの一部欠落による誤検出：ページの端が少しでも切れている場合は、判定する前に、ビューポートを広げるか、draw.ioのズームを下げるか、キャンバスだけを切り抜いて撮り直してください。
• 調査ラベルの変化：ラベルが一般的なものになり始めたら、元の論文またはコードを読み直してください。元資料にある正確な名前を優先してください。
• プレビューのiframeが読み込まれない：あと数秒待ってください。低速の接続では、embed.diagrams.netのiframeの読み込みに3～5秒かかることがあります。それでも読み込まれない場合は、インターネット接続を確認してください。

同梱ヘルパー

• VERSION：インストール済みスキルのバージョンマーカーです。特定の機能文字列を確認するのではなく、scripts/check_skill_update.py を使って確認してください。
• scripts/check_skill_update.py：インストール済みスキルのバージョンを、GitHub 上の正式版と比較します。
• scripts/make_drawio_preview.py：.drawio XML を postMessage 経由で diagrams.net に読み込む、ローカルの短縮 URL プレビュー HTML を作成します。
• scripts/serve_drawio_preview.py：プレビュー HTML を生成し、必要に応じてブラウザーを起動して 127.0.0.1 で配信します。
• scripts/validate_drawio.py：引き渡し前に .drawio ファイルを解析し、構造を検証して、ラベルとアセットを数え、妥当性を確認します。--strict と --json に対応しています。
• scripts/validate_visual_quality.py：事前レンダリング用の静的チェッカーです。 .drawio XML を解析し、レンダリングせずに視覚的な欠陥を検出します。矢印とボックスの衝突、テキストのはみ出しリスク、フォントの比率、間隔のばらつき、色の不統一、要素の重なり、孤立したラベル、フォントサイズの異常、エッジ密度を確認します。最初のプレビュー前に実行してください。FAIL はゼロである必要があります。--json、--strict、--rules に対応しています。
• assets/icons/ICON-MANIFEST.md：ローカルの MIT ライセンス付き SVG アイコン一覧と使用ルールです。
• assets/reference-images/REFERENCE-IMAGES.md：スタイルのフォールバック用に同梱された、トップカンファレンス風の図の参考資料です。
• references/drawio-workflow.md：プロンプト、論文、コード、参考画像から編集可能な draw.io 図を作成するための、プロフェッショナルなワークフロー全体を説明します。
• references/self-supervision-and-intake.md：複合入力の受け付け、図のブリーフ、必須の 5 次元監査、レッドチームへの役割切り替え、自己採点カード、引き渡し前の必須ゲートについて説明します。
• references/xml-preflight.md：事前レンダリングの静的チェックをすべて説明します。各チェックが検出する問題、その重要性、XML だけではエージェントがこれらの欠陥を見逃す理由を解説します。
• references/style-extraction.md：必須のスタイル抽出手順です。描画前に参考画像から配色をサンプリングし、タイポグラフィを測定し、レイアウトのリズムを特定し、矢印の表現ルールを抽出する方法を説明します。ユーザーがスタイル参考画像を提供した場合は、必ず使用してください。
• references/topconf-paper-style.md：トップカンファレンスのコンピューターサイエンス論文向け図のスタイル、フォールバック用参考資料の選び方、論文品質の基準について説明します。
• references/primitive-icons.md：一般的な研究図向けの、再利用可能で編集可能なプリミティブアイコンの作成レシピです。
• references/reference-replication-protocol.md：参考画像を高い忠実度で再現するための、自由度を抑えた手順です。
• references/xml-authoring.md：XML、レイアウト、スタイル、エッジ、テキスト、アイコン、反復作業のパターンを説明します。