スキル自身の言葉で
正しいmxGraph XMLを生成することで、draw.ioの図ファイル（.drawio、.drawio.svg、.drawio.png）を作成・編集・検証するためのスキルです。フローチャート、システムアーキテクチャ、シーケンス図、ER図、UMLクラス図をassets/templates/内のテンプレートで処理し、ネットワークトポロジー、BPMN、マインドマップはシェイプライブラリまたは手作業にフォールバックします。
エージェントには、6段階のワークフロー、すぐに使えるスタイル文字列を備えたセマンティックカラーパレット、納品前の検証チェックリスト、そしてオプションのPythonスクリプト（validate-drawio.py、add-shape.py）が提供されます。これは、図がそれを説明するコードと並んで配置されているリポジトリで作業するエージェントを対象としており、生成されたファイルはhediet.vscode-drawio VS Code拡張機能で即座に開けることを想定しています。
生成されるもの
- リクエストされたパスに書き込まれた.drawioファイル自体です。
- 図が示す内容を一文でまとめた要約です。
- 検証スクリプトが実行され、合格したかどうかを報告する検証ステータスです。
- 図をカスタマイズする可能性が高い場合の編集手順です。シェイプをクリックして選択し、ダブルクリックしてラベルを編集し、ドラッグして再配置します。
仕組み
- 01リクエストを明確にする
ワークフローは、図の種類、エンティティやアクター、関係性、出力先パス、ファイルが新規か編集かを確定することから始まります。
- 02テンプレートまたは最小限のスケルトンを再利用する
図の種類がassets/templates/配下のいずれかと一致する場合は、その構造をコピーしてプレースホルダーの値を置き換えます。新規のレイアウトの場合は、2つのルートセルを持つ最小限の有効なmxfileスケルトンから始めます。
- 03XMLを書く前にレイアウトを計画する
まず行または階層をスケッチし、その後グリッド上にシェイプを配置します——デフォルトのA4横向きキャンバス（1169×827px）上で、同じ行のシェイプ間は水平に40〜60px、階層行間は80〜120px空けます。
- 04mxGraph XMLを生成する
一意のidと対応する親参照を持つ頂点セルとエッジセルを記述し、ラベル内のXML特殊文字をエスケープして、ファイルの構文が正しく保たれるようにします。
- 05パレットからスタイルを適用する
スタイル文字列は固定のセマンティックパレットから取得します——primary/info #dae8fc（枠線 #6c8ebf）、warning/decision #fff2cc（枠線 #d6b656）、error/end #f8cecc（枠線 #b85450）——これにより、同じ用途はプロジェクト全体で同じ色を保ちます。
- 06保存、検証、引き渡し
要求されたパスに.drawio拡張子でファイルを書き込み、必要に応じてバリデーターを実行し、その後ユーザーにファイルの開き方を伝え、ダイアグラムの内容を要約します。