Communityコーディング&開発github.com

wliafe/drawio-skill

Next AI Draw.io MCP を利用して、接続確認、認証ガイド、セッションと図オブジェクトの操作、変更の保存、drawio/PNG/SVG/編集可能な drawio.svg のエクスポートを行います。MCP の呼び出し、画像挿入前の容量制御、同期エクスポート、テーマ別バージョン管理が必要なタスクに適しています。

drawio-skill とは?

このスキルは、Next AI Draw.io MCP Server を使用して、AI エージェントが図の作成、編集、保存、エクスポートを確実に実行できるようにします。接続の確認、セッション管理、図オブジェクトの ID ベースの編集、画像挿入前の容量制御(圧縮を含む)、および drawio、PNG、SVG、編集可能な drawio.svg の 4 形式への同期エクスポートをサポートします。マルチページ図の処理、バージョン管理(テーマ別 v1 から開始)、および手動編集との競合回避を重視しており、Claude Code や Cursor などの AI クライアント上で動作します。スキルは、MCP ツールが適切に露出されていることを確認し、不足している場合はセットアップ手順を参照します。ファイルの書き込みはすべて MCP 経由で行われ、図 XML の直接操作は禁止されています。エクスポート後は内容を読み戻して整合性を検証し、同期警告がないことを確認します。

対応~Claude Code~Codex CLI~Cursor
npx skills add wliafe/drawio-skill

Installed? Explore more コーディング&開発 skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Draw.io MCP 操作スキル

Next AI Draw.io MCP Server(@next-ai-drawio/mcp-server)を使用して、確定した描画タスクを実行します。本スキルはツールの使用と信頼性のある納品を担当し、構図、配色、フォント、または研究表現方法を規定しません。コアフローは異なる AI クライアントに適用可能です。ツールの検出、呼び出し、スキルの読み込み方法は、現在のホストによって決まります。

タスクとサービスの確定

  1. ユーザーリクエストと現在のコンテキストから以下を確定します:新規作成、既存ファイルの編集、現在のキャンバスの継続、またはユーザーが行った手動変更の保存。明示的に指定された素材、対象ディレクトリ、既存バージョンを優先的に使用します。
  2. 現在露出している MCP ツールを確認し、実際のツールの説明に基づいて以下のサービスツール名をマッピングします(例:get_diagram、edit_diagram、export_diagram)。クライアントの名前空間、サービスエイリアス、呼び出し構文をハードコードしないでください。
  3. 対象ツールが既に露出しており、現在のクライアントが呼び出しを許可している場合、読み取り専用の get_drawing_guide を使用してレスポンスを検証します。既存の無効化・拒否の決定は保持します。利用可能であれば続行し、追加で追加しません。ツールが露出していないことはインストールされていないことを意味しません。設定、インストール、再読み込み、診断が必要な場合は、MCP チェックとインストールを参照してください。
  4. このフローは上記のパッケージを対象としています。ユーザーが他の描画サービスを明示的に指定した場合は、その選択を尊重し、適応の境界を説明し、勝手に置き換えないでください。

既存のサービスはパッケージ ID で識別されます。サービス名が drawio である必要はありません。設定は見えるがまだ実際に応答していない場合のみ、「設定済み、検証待ち」と報告します。ツール、ターミナル、または設定へのアクセス機能がない場合は、現在実行可能な方法を提供し、チェックできないことをサービスが存在しないと言い換えないでください。

納品場所とバージョンの確定

デフォルトでは プロジェクトドキュメント/テーマ名/v1/ に、同名の 4 つのファイルを保存します:テーマ名.drawio、テーマ名.png、テーマ名.svg、テーマ名.drawio.svg。名称は日本語でも英語でもよく、バージョンはディレクトリにのみ配置します。新しいテーマは v1 から開始します。既存の図は現在のバージョンを維持し、ユーザーが明示的に要求した場合のみ vN を新規追加します。

既存のファイルは元のパスと名前をそのまま使用し、自動的に名前変更、移行、バージョンアップグレードは行いません。ユーザーが指定したディレクトリ、形式、編集範囲を優先します。命名、新バージョン、複数ページ、図の分割に関する詳細は、描画とファイルの規則を参照してください。

セッションとオブジェクトの操作

  • 現在のタスクが提供する内容と設計に基づいて MCP 操作を実行します。必要な入力が推測できない場合、操作対象や結果に影響する欠落のみを確認します。
  • 確認済みの対象セッションを優先的に再利用します。どうしても新しいセッションの作成または復元が必要な場合は start_session を呼び出し、そのツールの形式と操作制約を読み取ります。その情報がない場合は get_drawing_guide を使用します。接続確認のために新しいセッションを作成する必要はありません。
  • 既存ファイルに対して load_diagram を使用した後、まず get_diagram でオブジェクト ID を読み取り、次に edit_diagram で ID を指定して編集します。既知で有効な現在のキャンバスに対しては、直接部分編集を実行できます。同時編集の競合が発生した場合は、サービスが返す最新の内容に基づいて編集を再構成し、ユーザーの新しい変更を上書きしません。
  • load_diagram と create_new_diagram は現在のドキュメントを置き換えます。切り替え前に、現在のキャンバスが対象かどうか、保存すべき手動変更があるかどうかを確認します。ユーザーが現在の変更の保存を要求した場合、ディスク上の古いファイルを読み込まずに、現在のキャンバスを直接読み取ってエクスポートします。
  • create_new_diagram は新しい図を作成する場合、またはユーザーが全体の置き換えを明示的に要求した場合のみ使用します。すべての .drawio ファイルおよび .drawio.svg ファイルの書き込みと編集は MCP を介して行います。ファイルツールやスクリプトを使用して図 XML を直接書き換えないでください。ツールの要求に従って XML パラメータを構築することは通常の呼び出しに含まれます。
  • テキスト、ノード、関係、グループは編集可能な状態を維持します。素材は埋め込むことができますが、図全体を画像にフラット化して編集可能なソースファイルの代わりにしてはいけません。
  • クラウドサービス、ネットワークデバイスなどのアイコンを使用する前に get_shape_library を呼び出し、返された実際のスタイル名を使用します。アイコン識別子を推測しないでください。
  • 複数ページの編集では、まず list_pages で対象を確定し、ページ選択パラメータを明示的に使用します。デフォルトの最初のページに依存しないでください。ユーザーが「この枠」「選択した矢印」と言った場合は、get_selection を使用できます。選択範囲の読み取りが利用できない場合は、キャンバスを読み取り、ページ、ラベル、位置で特定します。それでも複数の候補がある場合のみ具体的に質問します。サービスを再インストールしたり、何度も再選択を要求したりしないでください。

画像と容量

画像を挿入する前に、画像の前処理と容量制御を参照してください。まず素材と予想される埋め込みサイズを確認し、必要に応じてコピーを圧縮します。写真は適度なスケーリングと非可逆圧縮を許可します。テキスト、細線、透明素材は可逆圧縮を優先します。元の素材を上書きせず、前処理ソフトウェアを自動的にインストールしません。

予算は実際の Base64、完全な図 XML、シリアル化されたリクエスト、エクスポートの応答をカバーする必要があります。get_diagram は画像データを折りたたむ可能性があるため、返されたテキストの長さで図が制限を超えていないことを証明できません。大きな素材を挿入した後は、早期に MCP 経由で試しエクスポートを実行します。図の作成、編集、4 形式のエクスポートは MCP のみを使用し、他のツールでエクスポートを補完したり、露出していない width、height、scale などのパラメータを捏造したりしないでください。

許容可能な品質まで圧縮しても問題が解決しない場合は、成功した成果を保持し、ボトルネックを説明します。ユーザーに圧縮を続けるか、素材を削除するか、図を分割するかを決定してもらい、自動的に内容を変更したりページ分割したりしません。

保存とエクスポート

  1. 保存前に get_diagram で現在のキャンバスを読み取り、対応するファイル、ページ、出力パスを確認します。まず同期警告をチェックします。「呼び出しは成功したが、最新の手動変更を見逃す可能性がある」は、最新状態が確認されたことになりません。まず同期を復元してから正式にエクスポートします。ツールがファイルを書き込んだ場合、そのファイルの最新性が未検証であることを明確にし、復元後に再エクスポートします。
  2. export_diagram を使用して .drawio を保存します。完全な複数ページのソースファイルの場合は、ページ選択パラメータを付けません。デフォルトで PNG、SVG、編集可能な .drawio.svg もエクスポートします。ユーザーが一部の形式のみを明示的に要求した場合は、その要求に従います。画像と編集可能な SVG は、対象ページを明示的に選択します。ブラウザのアクティブページに依存しないでください。
  3. .drawio.svg は、対応する形式で実際にエクスポートします。通常の SVG の名前を変更して代用しないでください。埋め込まれた図のソース内容を確認します。安全な読み返しの前に、現在のキャンバスを保存します。複数ページの場合は、このコピーに含まれるページを説明します。単一ページのコピーを完全なソースファイルとして扱わないでください。
  4. エクスポート後、再度読み取り、観察可能な内容の状態を確認し、同期警告をチェックします。サービスに汎用のスナップショットロックはありません。その間に内容が変更された場合は、再同期し、影響を受けるファイルを再エクスポートします。1 回の読み取りを 4 つのファイルの一貫性の保証として扱わないでください。継続的に変化するか確認できない場合は、同期完了の検収が未完了であることを明確にし、必要に応じてユーザーに手動編集を一時停止するよう依頼します。
  5. パスは MCP が実際に実行されている環境の絶対パスを使用します。ファイル生成と最終レンダリングにおける内容の完全性、素材の欠落を確認します。スクリーンショットが正常でも、正式なエクスポートが成功したとは限りません。XML の読み取り専用やエクスポート成功メッセージを見ても、実際のレンダリング確認の代わりにはなりません。
  6. 接続が復旧した場合は、1 回再試行できます。容量の問題が明確な場合は、まず容量を修正してから、影響を受ける手順を 1 回再試行します。変更がない場合は呼び出しを繰り返しません。それでも失敗する場合は、具体的なボトルネックと欠落している形式を説明します。詳細な保存ルールは、描画とファイルの規則を参照してください。

結果のフィードバック

ソースファイル、画像、使用したバージョン、および実行したチェックを簡潔に示します。「設定が存在する」「ツールが応答した」「ファイルが保存された」「レンダリングを確認した」をそれぞれ実際の状況に応じて説明します。

画像のエクスポートや視覚的なチェックが妨げられた場合は、まず正常に保存されたソースファイルを保持し、欠落している形式とその具体的な理由を説明します。古い画像を今回のエクスポートの代わりに使用したり、未確認の部分を完了したと書いたりしないでください。

関連スキル