mcpField
D
drawio-reconstruction

drawio-reconstruction

github.com/hkustdialデザイン・UI11.0k529 回インストール2 週間前に更新
リポジトリ

drawio-reconstruction について

参照画像を高い視覚的忠実度で`.drawio`ファイルに再構成するスキルで、図の再現を必要とするユーザー向けです。ファイル検証だけに頼らず、書き出したプレビューとの視覚比較を重視します。

主な機能

  1. 01可視要素の一覧に沿った再構成
  2. 02要素に応じたネイティブ図形・SVG・切り抜きの選択
  3. 03画像フォルダー向けのバッチ処理手順
  4. 04ファイル検査とバッチ検証
  5. 05プレビュー比較と未解決箇所の記録

活用シーン

  1. 01論文やプレゼンの図を`.drawio`で再現
  2. 02画像フォルダー内の図を一括処理
  3. 03再構成図と参照画像の視覚的な差を確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/hkustdial/supervisor-skills --skill drawio-reconstruction

インストール後、Claude Code で/drawio-reconstructionを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

.gitignore
LICENSE
README.md
README.zh-CN.md
requirements.txt
agents/
openai.yaml
examples/
data_lake.drawio
data_man.drawio
data_sci2.drawio
scripts/
batch_manifest.py
batch_verify.py
check_drawio.py
crop_assist.py
export_drawio.py

詳細

Draw.io の再現

このスキルは、図の画像を高品質に再現して .drawio ファイルにする場合に使用します。

ヘルパースクリプトの場所

バンドルされたヘルパーを実行する前に、SKILL_DIR をこの SKILL.md が格納されている絶対パスに解決してください。ランタイムから提供される解決済みのスキルの場所を使用し、スキルが ~/.codex、~/.agents、その他の固定ディレクトリにインストールされていると想定しないでください。

以下のすべてのコマンドで、$SKILL_DIR は解決済みの絶対パスを指します。

忠実度の契約

第一の目標は、参照画像への視覚的な忠実度です。編集可能であることは二次的な目標です。

意味が同等であれば成功と見なす、ということはしないでください。参照画像に特定のビジュアルスタイルがある場合、一般的なアイコン、一般的な曲線、一般的なフォントサイズ、おおよそのパネル、おおよその背景は不備となります。

スクリプトによるチェックで確認できるのは技術的な妥当性だけです。.drawio が開く、エクスポートできる、または check_drawio.py / batch_verify.py を通過するだけでは、図は完成していません。完成には、参照画像と原寸で視覚的に比較する必要があります。

ユーザーが指定した対象ディレクトリまたは対象ファイルのみを作業してください。関連がありそうに見えるという理由で、隣接する図を修正、上書き、改善しないでください。対象が曖昧な場合は、編集する前に曖昧さを確認して報告してください。

ユーザーの内容を黙って書き換えないでください。ユーザーからフォントの拡大や、よりプロフェッショナルな PPT スタイルを求められた場合は、まず次の点を区別してください。

  • レイアウトのみの調整:言葉を変えずに、フォントサイズを大きくし、ボックスのサイズを変更し、間隔を整え、要素を配置し直し、改行を調整します。
  • 内容の圧縮:文章を短くし、詳細を削除し、ラベルを書き換えます。この作業を行う前に許可を求めてください。

バッチフォルダーのワークフロー

ユーザーが画像のディレクトリを提供した場合、または一括での再現を依頼した場合は、このワークフローを使用してください。

バッチインテントとスケジューリング

詳細な視覚分析のために画像を開く前に、そのリクエストがバッチ再構築タスクであるかどうかを判断してください。

  • リクエストがフォルダ、複数の画像ファイル、glob/パターン、または 2 件以上の画像エントリに解決されるターゲットを指定している場合は、バッチ再構築として扱います。
  • 画像ごとの詳細な作業を開始する前に、マニフェストを作成してレビューします。
  • サブエージェントツールが利用可能で有用な場合は、利用可能な並行数と保留中の画像数を超えない範囲のワーカープールを使用します。各アクティブワーカーには、ちょうど 1 枚の画像と、その画像の .drawio、エクスポートされた .png、監査ファイル、およびプライベートなアセット/クロップディレクトリに対する排他的な書き込みセットを割り当てます。すべてのワーカーを一度に起動しようとするのではなく、空いたスロットを次の画像のために再利用します。
  • サブエージェントツールが利用できない、無効化されている、容量が制限されている、または小規模なバッチで不要な場合は、マニフェストの順序でエントリを逐次処理します。同じインベントリ、再構築、エクスポート、チェック、および視覚監査の要件を維持します。
  • スケジューリングの制約についてユーザーに伝えるのは、タイミングや納品に実質的な影響がある場合のみにしてください。並列実行が利用できないという理由だけで、有効なバッチをブロックしないでください。
  • 調整エージェントは、スケジュールを選択する前に、サムネイルやファイルメタデータを検査して、スコープ、命名、向き、共有スタイルの制約を確認してもかまいません。
  1. 入力ディレクトリ、出力ディレクトリ、命名規則、および上書きポリシーを特定します。

  2. バッチマニフェストを作成します:

    python "$SKILL_DIR/scripts/batch_manifest.py" path/to/images --output-dir path/to/output --write
    
  3. 編集前にマニフェストをレビューします。ユーザーがスコープを拡大しない限り、マニフェスト内のエントリのみを処理します。

  4. 各画像について、ターゲット出力ディレクトリに期待される <stem>.drawio、<stem>.png、および軽量な <stem>.audit.md 出力を定義します。

  5. 制限付きの並列スケジュールまたは逐次スケジュールを選択します:

    • 各アクティブエントリに排他的な出力ファイルを割り当てます。
    • ワーカーに対して、コードベース内で自分だけではないこと、および他のワーカーの出力を元に戻したり編集したりしてはならないことを伝えます。
    • すべてのエントリが、単体の単一画像タスクと同じ完全なワークフローに従うことを要求します。バッチモードはスケジューリング戦略にすぎず、忠実度、インベントリ、再構築、エクスポート、チェック、または視覚監査の要件を軽減するものではありません。
    • すべてのエントリにこの品質ゲートを適用します: .drawio、.png、および <stem>.audit.md を生成する; 完全な可視要素インベントリを作成する; 非テキストのビジュアルを分類する; 通常のメディア規則に従ってクロップ/SVG/ネイティブ要素を使用する; 必要なチェック/エクスポートを実行する; エクスポートされたプレビューをリファレンスと視覚的に比較する; 完了を主張するのではなく、未解決の視覚的欠陥をマークする。
    • 最終的なバッチ検証、視覚検査、監査レビュー、およびユーザー向けの完了レポートは、調整エージェントが保持します。
  6. 再構築後、バッチ検証を実行します:

    python "$SKILL_DIR/scripts/batch_verify.py" path/to/output/drawio_batch_manifest.json
    
  7. エクスポートされたすべてのプレビューを開き、リファレンスと比較します。ワーカーの完了やスクリプトの成功だけを信用しないでください。

  8. 完了したエントリ、スキップしたエントリ、失敗、およびレビューが必要な画像を報告します。

デフォルトのバッチ出力:

  • drawio_batch_manifest.json
  • <image-stem>.drawio
  • <image-stem>.png
  • <image-stem>.audit.md

ユーザーが明示的に要求しない限り、既存の出力を上書きしないでください。出力が存在する場合は、スキップするか、<stem>-v2.drawio のように明確に名前を付けたリビジョンを作成します。

必須参照インベントリ

各画像を再構築する前に、可視要素のインベントリを作成してください。複雑な作業やバッチ作業の場合は <stem>.audit.md に書き出してください。ごく小さい単一画像の場合は、作業メモ内で管理しつつ、同じチェックを必ず実施してください。

インベントリは、すべての可視領域と要素を網羅する必要があります。

  • キャンバスサイズ、背景、グリッド、テクスチャ、グラデーション、シャドウ、ページ境界
  • タイトル、サブタイトル、セクション見出し、フッター、ページ番号
  • パネル、カード、コンテナ、区切り線、バッジ、番号付きマーカー
  • すべてのテキストブロックとラベル
  • すべてのアイコン、アートワーク、スクリーンショット、ロゴ、チャート、サムネイル、装飾的なビジュアル
  • すべての矢印、曲線、コネクタ、ループ、ブラケット、破線パス、矢印先端
  • レイアウトを定義するすべての間隔の関係

各インベントリアイテムには、以下を含める必要があります。

  • id
  • おおよその領域または bbox
  • 内容 / ビジュアルの説明
  • 選択したメディア: native / SVG / crop / generated-cleanup
  • スタイルメモ: 色、ストローク、フォント、サイズ、シャドウ、曲線の形状、パディング
  • ステータス: pending / done / needs-fix / accepted

すべての可視インベントリアイテムが accepted になるか、未解決として明示的に報告されるまで、最終納品を開始しないでください。

再構築戦略

視覚的忠実度のために最適なメディアを使用してください。テキスト以外のすべてのビジュアルをスクリーンショットに全体的にデフォルト設定したり、すべてのビジュアルを SVG として全体的に再描画したりしないでください。判断の基準となる問いは、エクスポート後にどの方法が参照に最もよく一致するかです。

以下の場合には Draw.io ネイティブ要素 を優先してください。

  • 編集可能なテキスト、見出し、ラベル、チップ、コールアウト
  • ボックス、パネル、区切り線、シンプルな表、シンプルなチャート、バッジ
  • ネイティブのジオメトリで参照に一致できる場合の構造的な矢印/コネクタ
  • 編集しやすい状態を保つべき反復的なレイアウト構造

以下の場合には デフォルトで PNG クロップ / スクリーンショット を使用してください。

  • 複雑なアイコン、詳細な記号、装飾的なイラスト、複合オブジェクトのビジュアル
  • 汎用 SVG では参照に一致しない、スタイル固有のアイコンファミリー
  • 視覚的なメタファーやシーン的なアートワーク: 氷山、人物、環境、ダッシュボード、モニター、実験室の風景、部屋、風景、ワークフローシーン
  • 実際の UI スクリーンショット、スマートフォン/ダッシュボードの帯、アプリのサムネイル、証拠となるスクリーンショット、高密度のミニ図
  • 人物、カートゥーンキャラクター、表情豊かな顔、手、身体のポーズ、人とコンピューターのシーン
  • 編集可能性よりも正確な視覚的忠実度が重要なもの
  • 再描画するために多数のパス、グラデーション、マスク、手動での近似が必要になるテキスト以外のビジュアル
  • SVG/ネイティブで試みると重要な詳細が簡略化、省略、または目に見えて歪むビジュアル要素

以下の場合にのみ SVG/ネイティブ を使用してください。

  • 参照の形状とスタイルに一致できる、シンプルでクリーンなアイコン(意味的に名前が一致するだけでは不十分)
  • シンプルなアウトライン/塗りのジオメトリを持ち、主要な色が 1~2 色で、必須のテクスチャがなく、内部の細密なディテールがなく、再現可能な明確な参照スタイルを持つアイコン
  • 参照と同じストローク幅、比率、色、スケールを SVG で保持できる、反復的なシンプルアイコンファミリー
  • クロップするとぼやける、または背景が混ざる小さなソースアイコンで、シェイプレベルの SVG 一致が実現可能なもの
  • ユーザーが明示的にベクターでの編集可能性を必要とする要素

意味的なラベルが一致するという理由だけで、汎用の標準アイコンを使用しないでください。データベース、チャート、ドキュメント、ターゲット、脳、ロボット、電話、クリップボード、カーソル、電球、分子、ビーカー、モニター、および類似のアイコンは、依然として参照に対する形状/スタイルのチェックが必要です。

メディアの選択ルール

再構成する前に、各視覚要素を分類してください。

  1. テキストまたは構造の場合は、Draw.io のネイティブ要素を使用してください。
  2. 独特な参照スタイル、細部の多さ、グラデーション、影、複数オブジェクトの構成、またはシーンやメタファーの内容を持つ視覚要素の場合は、ユーザーがベクター編集可能な形式を明示的に要求している場合を除き、切り抜いてください。
  3. シンプルで明瞭なアイコンの場合は、SVG の形状、線、比率、塗り、ビジュアルファミリーが参照に一致する場合に限り、SVG またはネイティブ要素を使用してください。
  4. SVG が意味的には正しくても見た目が一般的すぎる場合は、使用しないでください。参照画像を切り抜くか、形状レベルでより参照に近い SVG を作成してください。
  5. 切り抜きがぼやけている、背景が混入している、または矩形が見えている場合は、まず切り抜きや背景を修正してください。SVG への切り替えは、視覚要素がシンプルで、切り抜きよりも SVG のほうが参照に近い場合に限ります。
  6. 切り抜きの背景との継ぎ目が見える場合は、透明 PNG のクリーンアップを試すか、切り抜きの背景を配置先のパネルに合わせてください。
  7. 通常のクリーンアップ後もハロー、ギザギザの縁、ウォーターマーク、JPEG のブロックノイズ、パネルとの不一致が残る場合は、切り抜きを同じ色の背景ブロックに配置する、よりタイトに切り抜く、または利用可能な画像編集/生成ツールを使って背景のみを修復してください。
  8. 切り抜きも SVG/ネイティブ要素も許容できない場合は、見栄えの悪い図で黙って代用せず、監査でその項目に needs-fix の印を付けてください。

重大なメディアの欠陥:

  • 参照にスタイル固有のアイコンがあるのに、一般的な代替アイコンを使用している
  • ユーザーがベクター編集可能な形式を要求した理由がないのに、複雑なビジュアルを単純化した SVG として描き直している
  • シンプルなアイコンに、形状レベルで一致するクリーンな SVG を使用できるのに、ぼやけた切り抜きを使用している
  • 切り抜いた複雑なアートワークに、背景との継ぎ目、ハロー、線の欠落、影の切れ、無関係な隣接テキストや境界線が見えている
  • 目立つアイコン、装飾的なマーク、または細部のあるビジュアルが欠落している

アイコン再構成の手順

アイコンの SVG を作成したり、切り抜きを埋め込んだりする前に、参照画像に基づいて役割とシンボルの対応表を作成してください。例:

  • 計画:脳、チェックリスト、計画のシンボル
  • ツールの使用:レンチ、交差したツール、ターミナル、ツールのシンボル
  • メモリ:データベースの円柱、ストレージ、メモリのシンボル
  • 検証:シールド、チェックマーク、監査、検証のシンボル
  • エビデンスカード:スキーマ/テーブル、ログ/ドキュメント、実行ツリー/計画、メトリクス/ゲージ

対応表の各項目について:

  • 複雑なもの、スタイル固有のもの、または細部の多いシンボルには、ソース画像の切り抜きを使用してください。
  • シンプルで明瞭なアイコンのうち、参照スタイルに合わせられるものに限り、独自の SVG またはネイティブ Draw.io シンボルを使用してください。
  • 一般的なアイコンセットではなく、参照に合わせて線幅、色、比率、サイズを統一してください。
  • アイコンを 1 つコピーして、位置やラベルだけを変更することは避けてください。
  • 参照自体に同じプレースホルダーが繰り返し使われている場合を除き、一般的なプレースホルダーアイコンは使用しないでください。
  • シンプルで明瞭でないシンボルは、無関係な SVG に置き換えず、そのシンボルを参照画像から切り抜いてください。

アイコンの作成または編集後に、check_drawio.py を実行してください。エビデンスアイコン、コアストリップのアイコン、ワークフロー手順のアイコン、または結果行のアイコンに画像ペイロードの重複がある場合、参照で意図的に同じシンボルが繰り返されている場合を除き、重大な不備となります。

スクリーンショットの切り抜きルール

次の場合は、スクリーンショット/PNG の切り抜きを使用します。

  • イラストが複雑すぎて、効率よく描き直せない場合
  • 編集のしやすさよりも、正確なビジュアルスタイルが重要な場合
  • SVG で試しても見栄えが悪い、またはありきたりな場合
  • ユーザーが適切な切り抜きを提供または承認している場合
  • 手描きの SVG では細部が失われてしまう、複雑なアイコンの場合
  • 実際の UI スクリーンショット、スマートフォンの帯状画像、ダッシュボードのサムネイル、情報量の多い証拠資料、人物、シーン、または視覚的なメタファーの場合

スクリーンショットを使用する場合:

  • 編集可能なテキストや構造的なレイアウトには、スクリーンショットを使用しないでください。

  • 周囲の領域全体ではなく、前景の対象イラストに沿って切り抜いてください。

  • 大まかな ROI から始め、前景の bbox を特定してから、適度な安全余白を追加してください。

  • 可能な場合は、切り抜きヘルパーを使用してください。

    python "$SKILL_DIR/scripts/crop_assist.py" reference.png --roi x,y,w,h --anchor x,y --exclude x,y,w,h --output-dir crops --name icon_name
    
  • 切り抜きを埋め込む前に、生成されたプレビューと候補を目視で確認してください。スクリプトが範囲を提案しますが、参照画像に最もよく一致する候補を選ぶのはモデルです。

  • crop_assist.py には Pillow が必要です。Pillow がない場合は、環境を変更する前に承認を求めてから、同梱のオプション依存関係を python -m pip install -r "$SKILL_DIR/requirements.txt" でインストールしてください。切り抜きの確認を黙って省略しないでください。

  • 大まかな ROI 内にあっても対象イラストの一部ではない近接要素、特に箇条書き、本文、タイトルの罫線、番号付きバッジ、パネルの境界線、区切り線には、--exclude ボックスを使用してください。

  • 安全余白には、線、矢印の先端、影、アンチエイリアス、意図的に設けられた直近の余白をすべて含めてください。一般的な空白にまで広げないでください。

  • 隣接するコンテンツを避けるために必要な場合を除き、目に見える線ぎりぎりで切り抜かないでください。線の切れ、矢印の先端の欠け、影の欠落、またはイラストが切り抜きの端に接している状態は、修正が必要な重大な不備です。

  • 隣接する箇条書き、ラベル、タイトルの罫線、カードの境界線、区切り線、または同色の無関係なマークを含めないでください。余白を増やすと隣接要素が入ってしまう場合は、有効な候補のうち余白が最も狭いものを使い、背景は透明化または色合わせで処理してください。

  • 周囲のパネル/背景が一様でない場合は、透明な PNG を優先してください。

  • 透明化できない場合、または修正によってハローが生じる場合は、切り抜きを同色の背景ブロック上に配置してください。

  • 切り抜きの背景色が Draw.io のパネルと一致しない場合は、さらに切り抜く、背景を除去する、切り抜きの背景色を変更または調整する、あるいは切り抜きを含むパネル/背景を合わせてください。

  • 切り抜きが複雑で、通常の修正後も背景が一致しない場合は、利用可能な画像編集/生成ツールを使って背景のみを修復または目立たなくしてください。意味を持つ前景は変更しないでください。

  • 書き出した PNG に、目に見える継ぎ目、アンチエイリアスのハロー、ギザギザした透明部分、ぼやけ、または背景の不一致がないか確認してください。目に見える矩形状の切り抜きの継ぎ目を残さないでください。

曲線と矢印

矢印や曲線は、実装方法を選ぶ前に、すべて参照画像に一致させてください。

矢印の一覧を作成します。

  • 始点の要素と終点の要素
  • 始点/終点のアンカー
  • 方向
  • 線種:実線、破線、点線、曲線、垂直、水平、ループ
  • 線幅、色、矢印の先端の種類とサイズ
  • 曲がり点、角の半径、およびパネルの前面と背面のどちらを通るか
  • 意味上の役割:ワークフローの遷移、フィードバックループ、証拠による裏付け、コールアウト、装飾的な視覚要素

実装の優先順位:

  1. 参照画像に一致させられる構造的なコネクタには、Draw.io ネイティブのコネクタを使用します。
  2. Draw.io ネイティブでは一致させられない特殊な波括弧、曲線の矢印、ループ矢印、角丸の戻り経路、または装飾的な矢印には、SVG パスを使用します。
  3. 高度に独自性があり、編集できない装飾的なマークに限り、PNG の切り抜きを使用します。

大きなループ矢印、破線のフィードバック曲線、角丸の戻り経路は、参照画像の経路形状に一致させてください。一般的なコネクタでおおまかに代用しないでください。

タイポグラフィとレイアウト

サイズを割り当てる前に、参照画像からタイポグラフィを抽出します。

  • メインタイトル
  • サブタイトル
  • セクションタイトル
  • カードタイトル
  • カード本文
  • ラベル/チップ
  • フッター/ページ番号
  • アイコンとラベルの組み合わせ

テキストの役割ごとに、おおよそのフォントサイズ、太さ、色、行の高さ、配置、利用可能なボックスサイズを記録します。参照画像が明示的に SIGMOD 形式の実行例でない限り、SIGMOD 実行例のフォント基準は適用しないでください。

テキストの変更はすべて、ボックスモデルの変更として扱います。

テキスト -> テキストボックス -> カード/行 -> それを含むパネル -> 隣接するレイアウト

重大な不具合:

  • テキストが見た目上大きくなっているのに、背景のカード/パネルのサイズが変更されていない
  • テキストボックスの高さが、描画されたテキストの高さより小さい
  • テキストが枠線に触れる、アイコンと重なる、または行/カードからはみ出す
  • 空間に余裕があるのに、参照画像にない不自然な改行がある
  • 親カードがテキストに収まっているが、パネルには収まらなくなっている
  • フッターまたはスライドの境界がコンテンツに押し込まれている

デフォルトのワークフロー

  1. 参照画像と出力先ディレクトリを特定します。
  2. フォルダー内または複数の画像を処理する場合は、バッチマニフェストを作成または更新します。
  3. 画像ごとに、参照インベントリとスタイルトークンのメモを作成します。
  4. テキストと構造には、可能な限り Draw.io のネイティブ要素を使って図を再構築します。
  5. 中程度の判定ルールに基づき、テキスト以外のビジュアルをすべて分類します。
  6. 複雑なビジュアルやスタイルに固有のビジュアルには、元画像のクロップまたは透過 PNG を使用します。シンプルで明瞭なアイコンには、形状とスタイルが一致する場合に限り SVG/ネイティブ要素を使用します。
  7. Draw.io CLI で PNG プレビューを書き出します。
  8. チェッカーを実行します。レイアウトの不具合は警告ではなく、作業を妨げる欠陥として扱います。
  9. 参照画像と出力を原寸で、項目ごとに全面的に目視確認します。
  10. 技術的なチェックと目視確認の両方に合格するまで、レイアウト、サイズ、配置、フォントサイズ、クロップ、アイコン、矢印を調整します。
  11. 変更したファイルと残っている品質上のリスクを報告します。

デフォルトの出力:

  • <name>.drawio
  • <name>.png
  • バッチまたは複雑な再構築の場合は <name>.audit.md

必須の目視確認

最終回答の前に、書き出した PNG と参照画像を原寸で比較し、インベントリの各項目を明示的に確認します。

重大な不具合:

  • 表示要素の欠落
  • 汎用的な代替アイコン
  • アイコン/アートワークのスタイル、線、スケール、内部の詳細の不一致
  • 曲線、ループ、破線の経路、矢印の経路、矢印の先端、コネクターの重なり方の不一致
  • タイトル/本文のフォントサイズ、太さ、改行、色、配置の不一致
  • テキストの重なり、クリッピング、枠線との接触、参照画像にない不自然な折り返し
  • パネル/カードのサイズ、角丸、影、枠線、間隔の不一致
  • 背景の不一致、グラデーション/グリッド/テクスチャの欠落、ページ境界の不一致
  • クロップの継ぎ目、ぼやけ、ハロー、不適切な透過、不正なクロップ境界、クロップ内に隣接コンテンツが含まれている
  • 参照画像との比較をせず、スクリプトだけで合格としている
  • needs-fix のままのインベントリ項目がある

項目に不合格があれば、編集を続けてください。図を完成済みとして提示してはいけません。

バッチ処理では、親エージェントが最終回答の前に、書き出されたすべてのプレビューと、すべてのワーカー監査ファイルを開いて確認する必要があります。ワーカーの作業完了は、納品の受け入れを意味しません。

ユーザー承認済みの参照図を使用する場合

ユーザーが品質の参照用として手動調整済みのスクリーンショットまたは .drawio ファイルを提供した場合は、別の図を変更する前にスタイルの参照元として使用します。

実際のジオメトリを確認できるため、可能な場合は .drawio ファイルを優先します。

  • 意味上の役割ごとにフォントサイズを抽出します。
  • ジオメトリの比率を抽出します。例:カードの幅/高さ、タイトル/本文テキストボックスの高さ、アイコンのサイズ、役割ラベルの高さ、エビデンスパネルの高さ、結果行の高さ、パディング。
  • 主観的な目視調整を行う前に、これらの役割ベースの値を対象図に適用します。
  • 対象図の文言は維持します。参照図は、タイポグラフィ、間隔、アイコンのサイズ、レイアウトの密度にのみ使用します。
  • 参照用 .drawio のページメタデータが古くても正しく書き出せる場合は、コンテンツのバウンディングボックスと書き出した PNG を検証に使用します。

赤枠のフィードバック

ユーザーが赤枠や注釈の付いたスクリーンショットを提供した場合:

  • マークされた領域はすべて、修正が必須の不具合として扱います。
  • 依頼がない限り、依頼を新たな再構築として解釈しないでください。
  • まず、マークされた領域にある収まり、クリッピング、オーバーフロー、誤った切り抜き、誤ったアイコンのスタイル、誤った矢印の経路、誤ったタイポグラフィを修正します。
  • ユーザーが現在使用しているテキストと手動編集は保持します。
  • 赤枠が漫画風のイラストや視覚的な比喩を示している場合は、SVG で再現する代わりに、参照画像から切り抜くことを検討します。

検証

編集後は必ず .drawio を検証してください:

python "$SKILL_DIR/scripts/check_drawio.py" path/to/file.drawio
python "$SKILL_DIR/scripts/export_drawio.py" path/to/file.drawio path/to/preview.png

バッチジョブの場合:

python "$SKILL_DIR/scripts/batch_manifest.py" path/to/images --output-dir path/to/output --write
python "$SKILL_DIR/scripts/batch_verify.py" path/to/output/drawio_batch_manifest.json

チェッカーは XML の妥当性と一般的な収まりの問題を検出しますが、目視確認の代わりにはなりません。エクスポート後、最終回答の前に、レンダリングされた PNG を参照画像と照合して確認してください。

最終回答

最終回答は簡潔にしてください:

  • .drawio ファイルへのリンクを記載します。
  • レンダリングされた .png プレビューへのリンクを記載します。
  • 主要な視覚要素に切り抜き、SVG、ネイティブ要素のどれを使用したかを記載します。
  • 視覚監査の項目が未解決の場合は特に、手動確認が必要な点が残っているかを記載します。

コメント