Draw.io Diagram Skill

ネイティブな .drawio ファイルとして draw.io ダイアグラムを生成します。オプションで PNG、SVG、または PDF にエクスポートすることができ、ダイアグラム XML が埋め込まれるため、エクスポートされたファイルは draw.io で編集可能なままです。

ダイアグラムの作成方法

1. draw.io XML を生成 - 要求されたダイアグラムの mxGraphModel 形式で XML を生成
2. XML をファイルに書き込み - Write ツールを使用して、現在のワーキングディレクトリに .drawio ファイルとして XML を書き込み
3. ユーザーがエクスポート形式をリクエストした場合 (png、svg、pdf)、draw.io CLI を見つけ (以下を参照)、--embed-diagram でエクスポートし、ソースの .drawio ファイルを削除します。CLI が見つからない場合は、.drawio ファイルを保持し、ユーザーに draw.io デスクトップアプリをインストールするか、.drawio ファイルを直接開くよう指示します
4. 結果を開く - エクスポートされた場合はそのファイル、そうでない場合は .drawio ファイルを開きます。open コマンドが失敗した場合は、ファイルパスを出力して、ユーザーが手動で開けるようにします

出力形式の選択

ユーザーのリクエストから形式の好みをチェックします。例：

• /drawio create a flowchart → flowchart.drawio
• /drawio png flowchart for login → login-flow.drawio.png
• /drawio svg: ER diagram → er-diagram.drawio.svg
• /drawio pdf architecture overview → architecture-overview.drawio.pdf

形式が明記されていない場合は、.drawio ファイルを書き込み、draw.io で開きます。ユーザーは後でエクスポートをリクエストできます。

サポートされているエクスポート形式

形式	XML 埋め込み	備考
png	Yes (-e)	どこでも表示可能、draw.io で編集可能
svg	Yes (-e)	スケーラブル、draw.io で編集可能
pdf	Yes (-e)	印刷可能、draw.io で編集可能
jpg	No	ロッシー、埋め込み XML はサポートされていない

PNG、SVG、PDF はすべて --embed-diagram をサポートしています。エクスポートされたファイルには完全なダイアグラム XML が含まれているため、draw.io で開くと編集可能なダイアグラムが復元されます。

draw.io CLI

draw.io デスクトップアプリには、エクスポート用のコマンドラインインターフェイスが含まれています。

CLI の位置特定

まず環境を検出し、それに応じて CLI を見つけます：

WSL2 (Windows Subsystem for Linux)

WSL2 は /proc/version に microsoft または WSL が含まれている場合に検出されます：

grep -qi microsoft /proc/version 2>/dev/null && echo "WSL2"

WSL2 では、Windows draw.io デスクトップ実行ファイルを /mnt/c/... 経由で使用します：

DRAWIO_CMD=`/mnt/c/Program Files/draw.io/draw.io.exe`

バッククォートは bash で Program Files のスペースを処理するために必須です。

draw.io がデフォルト以外の場所にインストールされている場合は、一般的な代替パスをチェックします：

# デフォルトインストールパス
`/mnt/c/Program Files/draw.io/draw.io.exe`

# ユーザーごとのインストール (上記が存在しない場合)
`/mnt/c/Users/$WIN_USER/AppData/Local/Programs/draw.io/draw.io.exe`

macOS

/Applications/draw.io.app/Contents/MacOS/draw.io

Linux (ネイティブ)

drawio   # 通常は snap/apt/flatpak 経由で PATH 上にあります

Windows (ネイティブ、WSL2 以外)

"C:\Program Files\draw.io\draw.io.exe"

which drawio (Windows では where drawio) を使用して、プラットフォーム固有のパスにフォールバックする前に PATH 上にあるかどうかをチェックします。

エクスポートコマンド

drawio -x -f <format> -e -b 10 -o <output> <input.drawio>

WSL2 の例：

`/mnt/c/Program Files/draw.io/draw.io.exe` -x -f png -e -b 10 -o diagram.drawio.png diagram.drawio

主なフラグ：

• -x / --export: エクスポートモード
• -f / --format: 出力形式 (png、svg、pdf、jpg)
• -e / --embed-diagram: 出力にダイアグラム XML を埋め込み (PNG、SVG、PDF のみ)
• -o / --output: 出力ファイルパス
• -b / --border: ダイアグラムの周囲の境界幅 (デフォルト: 0)
• -t / --transparent: 透明な背景 (PNG のみ)
• -s / --scale: ダイアグラムサイズをスケール
• --width / --height: 指定された寸法に収める (アスペクト比を保持)
• -a / --all-pages: すべてのページをエクスポート (PDF のみ)
• -p / --page-index: 特定のページを選択 (1 ベース)

結果を開く

環境	コマンド
macOS	open <file>
Linux (ネイティブ)	xdg-open <file>
WSL2	cmd.exe /c start "" "$(wslpath -w <file>)"
Windows	start <file>

WSL2 の注記：

• wslpath -w <file> は WSL2 パス (例：/home/user/diagram.drawio) を Windows パス (例：C:\Users\...) に変換します。cmd.exe は /mnt/c/... スタイルのパスを解決できないため、これは必須です。
• start がファイル名をウィンドウタイトルとして解釈するのを防ぐため、start の後の空の文字列 "" は必須です。

WSL2 の例：

cmd.exe /c start "" "$(wslpath -w diagram.drawio)"

ファイル命名

• ダイアグラムの内容に基づいて説明的なファイル名を使用します (例：login-flow、database-schema)
• マルチワード名には小文字とハイフンを使用します
• エクスポートの場合は、二重拡張子を使用します：name.drawio.png、name.drawio.svg、name.drawio.pdf - これはファイルに埋め込まれたダイアグラム XML が含まれていることを示します
• エクスポートが成功した後は、中間の .drawio ファイルを削除します - エクスポートされたファイルには完全なダイアグラムが含まれています

XML 形式

.drawio ファイルはネイティブな mxGraphModel XML です。常に直接 XML を生成します — Mermaid および CSV 形式はサーバー側の変換が必要であり、ネイティブファイルとして保存することはできません。

基本構造

すべてのダイアグラムには、この構造が必須です：

<mxGraphModel adaptiveColors="auto">
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
    <!-- ここにダイアグラムセルを配置します (parent="1") -->
  </root>
</mxGraphModel>

• セル id="0" はルートレイヤー
• セル id="1" はデフォルトの親レイヤー
• すべてのダイアグラム要素は、複数のレイヤーを使用しない限り parent="1" を使用します

XML リファレンス

一般的なスタイル、エッジのルーティング、コンテナー、レイヤー、タグ、メタデータ、ダークモードの色、および XML の整形式に関する完全な draw.io XML リファレンスについては、以下のリンクを参照して、指示に従います： https://raw.githubusercontent.com/jgraph/drawio-mcp/main/shared/xml-reference.md

トラブルシューティング

問題	原因	解決策
draw.io CLI が見つからない	デスクトップアプリがインストールされていない、または PATH 上にない	.drawio ファイルを保持し、ユーザーに draw.io デスクトップアプリをインストールするか、ファイルを手動で開くよう指示します
エクスポートで空白またはコルプトなファイルが生成される	無効な XML (例：コメント内の二重ハイフン、エスケープされていない特殊文字)	ファイルを書き込む前に XML の整形式を検証します；下の「XML の整形式」セクションを参照
ダイアグラムは開くが空白に見える	ルートセル id="0" と id="1" が不足している	基本的な mxGraphModel 構造が完全であることを確認します
エッジがレンダリングされない	エッジ mxCell が自己閉鎖型である (子 mxGeometry 要素がない)	すべてのエッジは子要素として <mxGeometry relative="1" as="geometry" /> が必須です
エクスポート後にファイルが開かない	ファイルパスが正しくない、またはファイル関連付けが見つからない	ユーザーが手動で開けるように絶対ファイルパスを出力します

重要：XML の整形式

• 出力に XML コメント (<!-- -->) を絶対に含めないでください。 XML コメントは厳密に禁止されています。トークンを浪費し、パースエラーを引き起こし、ダイアグラム XML では何の役に立たないためです。
• 属性値の特殊文字をエスケープします：&、<、>、"
• 各 mxCell に一意の id 値を常に使用します