drawio

Draw.io ダイアグラムスキル

ネイティブの .drawio ファイルとして draw.io ダイアグラムを生成します。ダイアグラムは Mermaid（簡潔なテキストを draw.io デスクトップ CLI が変換して自動レイアウトします）または draw.io XML で直接作成します。必要に応じて、XML で作成したダイアグラムに ELK で自動レイアウトを適用したり、XML を埋め込んで draw.io で編集可能な状態を保ったまま PNG／SVG／PDF にエクスポートしたり、draw.io エディターでダイアグラムを直接開くブラウザー URL を生成したりできます。

まずはインラインビューアーを使ってください。 このスキルはファイルを書き込み、シェルコマンドで開きます。インラインでダイアグラムを表示できるチャット（VS Code または Cursor のチャット、Claude.ai、ChatGPT）で draw.io MCP サーバーの create_diagram ツールが利用可能で、ユーザーが .drawio ファイル、エクスポート、URL を求めていない場合は、代わりに create_diagram を呼び出してください。ダイアグラムは会話内に表示され、ファイルもシェルコマンドも不要です。Claude Code、Codex、Copilot CLI では、VS Code や JetBrains の拡張機能を使ってもダイアグラムをインライン表示できません。そこで create_diagram が返すのはリンクだけなので、このスキルを使用してください。

作成形式：Mermaid または XML

デスクトップ CLI は Mermaid をネイティブの .drawio ファイルに変換して自動レイアウトします。そのため、XML でセルの位置を手作業で指定するより、はるかに確実です。

作成形式	最適な用途	デスクトップ CLI が必要ですか？
Mermaid	フローチャート、シーケンス図、クラス図、状態図、ER 図、ガントチャート、マインドマップ、タイムライン、ユーザージャーニー、クアドラント、C4、Git グラフ、円グラフ、その他の標準的な種類	はい — .drawio への変換に必要です
XML	カスタムスタイル、正確な位置指定／手動での位置指定、特定の図形ライブラリ（AWS、Azure、ネットワーク、UML 詳細など）、またはデスクトップ CLI がインストールされていない場合	いいえ（任意の ELK --layout には CLI が必要です）

• デスクトップ CLI が利用可能で、依頼が上記の標準的な種類に該当する場合は、Mermaid を優先してください。
• 正確な制御が必要な場合、または汎用的な代替手段が必要な場合は、XML を使用してください。XML には CLI が不要なので、デスクトップアプリがインストールされていない場合の唯一の選択肢です（.drawio ファイルまたは url を提供します）。XML では、自分で座標を計算する代わりに、CLI に ELK 自動レイアウト を適用させることもできます。

デスクトップ CLI があるかどうかわからない場合は、まず検出してください（CLI の場所を確認するを参照）。

パイプライン

Mermaid と XML のどちらで作成した場合も、すべてのダイアグラムはまずネイティブの .drawio ファイルになり、その後、指定された出力形式で提供されます。

1. 作成 → .drawio
   • Mermaid：Mermaid を .mmd ファイルに書き込み、CLI で変換します。

     drawio -x -f xml -o diagram.drawio diagram.mmd
     

     変換後に .mmd を削除します。成果物は .drawio です。
   • XML：mxGraphModel XML を diagram.drawio に書き込み（XML 形式を参照）、その後修復処理を実行します。必要に応じてELK レイアウトを適用します。
2. 提供（どちらの作成形式でも同じです）：
   • (形式の指定なし) → diagram.drawio を残して開きます。
   • png / svg / pdf → .drawio から XML を埋め込んでエクスポートし、その後、元の .drawio を削除します。

     drawio -x -f png -e -b 10 -o diagram.drawio.png diagram.drawio
     

   • url → .drawio の XML からブラウザー URL を作成して開き、ローカルコピーとして .drawio を残します（ブラウザー URL 出力を参照）。
3. 結果を開く — エクスポートしたファイル、URL、または .drawio を開きます（結果を開くを参照）。開くコマンドが失敗した場合は、ユーザーが手動で開けるように絶対パス（または URL）を表示します。

Mermaid は必ず最初に .drawio に変換してからエクスポートしてください — 現在の draw.io Desktop では Mermaid から PNG への直接エクスポートで -e を使うと、XML 埋め込み処理がクラッシュするため正常に動作しません。2 段階の手順なら確実に動作し、編集可能な埋め込みデータが生成されます。

Mermaid が指定されていてもデスクトップ CLI が利用できない場合は、同じダイアグラムを XML で作成します。

XML 用 ELK レイアウト

CLI の --layout ステップでは、エディターの 配置 ▸ レイアウト メニューおよび draw.io MCP アプリサーバーと同じ ELK レイアウトを使って、XML で記述された図を自動配置します。おおよその位置（または 0,0）を指定してセルを生成し、グラフの構造（ノードとエッジ）を正しく設定してください。フロー形式の図には verticalFlow ／ horizontalFlow を、ネットワークには organic を使用します。Mermaid で記述された図はすでにレイアウト済みなので、--layout は追加しないでください。

ファイルを書き込んだ後、その場でレイアウトする方法（同じパスの読み取りと上書きに対応しています）と、1 回の呼び出しでレイアウトとエクスポートを組み合わせる方法があります。

drawio -x -f xml --layout verticalFlow -o diagram.drawio diagram.drawio
drawio -x -f png -e -b 10 --layout verticalFlow -o diagram.drawio.png diagram.drawio

レイアウトのプリセット

名前	レイアウト
verticalFlow	レイヤー型、上から下 — フローチャート、パイプライン
horizontalFlow	レイヤー型、左から右
verticalTree	ツリー型、上から下 — 階層図、組織図
horizontalTree	ツリー型、左から右
radialTree	放射状ツリー
organic	力学ベース — ネットワーク、マインドマップ形式のグラフ

カスタムレイアウト JSON

細かく制御するには、プリセット名の代わりに JSON の配列（[ で始まるもの）を渡します。形式はエディターのカスタムレイアウトダイアログと同じです。

drawio -x -f xml --layout '[{"layout":"elkLayered","config":{"elk.direction":"RIGHT"}}]' -o diagram.drawio diagram.drawio

各エントリーは {"layout": <algorithm>, "config": { … }} です。アルゴリズムは elkLayered、elkTree、elkRadial、elkOrganic、elkStress、elkBox です。elk. で始まる設定項目は ELK オプションです。例：elk.direction（UP ／ DOWN ／ LEFT ／ RIGHT）、elk.spacing.nodeNode、elk.layered.spacing.nodeNodeBetweenLayers。edgeStyle（例：orthogonal）と corners（例：rounded）は、コネクターの描画方法を制御します。

直交エッジルーティング

--layout libavoid は頂点を移動せずに、図形の周囲にエッジを直交ルートで配置します（配置 ▸ レイアウト ▸ 直交ルーティング）。コネクターが図形を横切るように配置された XML に対して、その場で実行してください。フロー／ツリーのプリセットはすでにエッジをルーティングするため、その後に実行する必要はありません。

drawio -x -f xml --layout libavoid -o diagram.drawio diagram.drawio

Mermaid 構文リファレンス

Mermaid を記述する際は、共通の Mermaid リファレンス（サポートされているすべての図の種類と、style、classDef、linkStyle によるフローチャートのスタイル設定）を取得し、それに従ってください。

https://raw.githubusercontent.com/jgraph/drawio-mcp/main/shared/mermaid-reference.md

図のラベルの言語は、ユーザーの言語に合わせてください。

出力形式の選択

ユーザーのリクエストを確認し、形式の希望を確認してください。例：

• /drawio:drawio create a flowchart → Mermaid → flowchart.drawio
• /drawio:drawio png flowchart for login → Mermaid → login-flow.drawio.png
• /drawio:drawio svg: ER diagram → Mermaid → er-diagram.drawio.svg
• /drawio:drawio pdf AWS architecture overview → XML（AWS の図形が必要です）→ architecture-overview.drawio.pdf
• /drawio:drawio url flowchart for user login → 図を表示した状態で app.diagrams.net をブラウザーで開き、login-flow.drawio をローカルに保持します

形式が指定されていない場合は、.drawio ファイルを生成して開きます。後からエクスポートを依頼できます。

PNG、SVG、PDF は -e（--embed-diagram）を使ってエクスポートします。ファイルには図の XML 全体が含まれるため、draw.io で開くと編集可能な図を復元できます。jpg は非可逆形式で、XML を埋め込めません。

ブラウザー URL 出力

url 形式の場合、.drawio ファイルをユーザーのローカルコピーとしてディスク上に保持し、Node.js 組み込みの zlib でその XML を圧縮して https://app.diagrams.net/#R... 形式の URL を作成し、既定のブラウザーで開きます。表示するために draw.io Desktop は必要ありません。

URL の生成

次の node -e のワンライナーを実行して .drawio ファイルを読み込み、URL を出力します（DIAGRAM.drawio は実際のファイル名に置き換えてください）。

URL=$(node -e '
const fs = require("fs");
const zlib = require("zlib");
const xml = fs.readFileSync(process.argv[1], "utf8");
const compressed = zlib.deflateRawSync(encodeURIComponent(xml)).toString("base64");
console.log("https://app.diagrams.net/?grid=0&pv=0&border=10&edit=_blank#R" + encodeURIComponent(compressed));
' "DIAGRAM.drawio")

これは MCP Tool Server の XML リンク形式です。XML に #create= URL は使用しないでください。読み込み後に draw.io がそのハッシュを書き換えますが、書き換え後の内容がリンクと異なる場合（Node の zlib の出力は draw.io の pako とバイト単位で一致しないため、異なります）、"All changes will be lost!" と尋ねられます。

URL を開く

環境	コマンド
macOS	open "$URL"
Linux（ネイティブ）	xdg-open "$URL"
WSL2	一時的な .url ファイルを書き込み、cmd.exe で開きます（下記を参照）
Windows（ネイティブ）	一時的な .url ファイルを書き込み、start で開きます（下記を参照）

cmd.exe の start コマンドは & をコマンド区切り文字として扱い、図が格納されている # 以降をすべて切り捨てます。そのため、Windows と WSL2 では代わりに URL を .url ショートカットファイルに保存します。

WSL2：

TMPFILE=$(mktemp --suffix=.url)
printf '[InternetShortcut]\r\nURL=%s\r\n' "$URL" > "$TMPFILE"
cmd.exe /c start "" "$(wslpath -w "$TMPFILE")"

Windows（ネイティブ）： .url ファイルを echo URL=%URL% で作成しないでください。& 文字（?grid=0&pv=0&...）によってショートカットが途中で切れ、図が失われます。Node にファイルを書き込ませ、パスだけを開いてください。パスには & が含まれないためです。

TMPFILE=$(node -e '
const fs = require("fs");
const os = require("os");
const path = require("path");
const p = path.join(os.tmpdir(), "drawio.url");
fs.writeFileSync(p, "[InternetShortcut]\r\nURL=" + process.argv[1] + "\r\n");
process.stdout.write(p);
' "$URL")
cmd.exe /c start "" "$TMPFILE"

その後、URL とローカルファイルを表示し、ユーザーが共有したり再編集したりできるようにします。

Opened in browser: <URL>
Local file: DIAGRAM.drawio

非常に大きな図は、ブラウザーの URL の長さ制限（ブラウザーによっておよそ 32K～2MB）を超えることがあります。その場合は、代わりにローカルの .drawio ファイルを開いてください。

draw.io CLI

draw.io デスクトップアプリのコマンドラインインターフェイスは、Mermaid を .drawio に変換し、ELK レイアウト（--layout）を適用し、PNG／SVG／PDF にエクスポートします。これら 3 つの機能には、デスクトップアプリのインストールが必要です。

CLI の場所を特定する

まず環境を検出し、その後 CLI の場所を特定します。Windows（ネイティブと WSL2）では、インストーラーによって draw.io が PATH に追加されず、インストール先ディレクトリもユーザーが選択できるため、CLI がないと判断する前にフォールバック手順を最後まで実行してください。

WSL2（Windows Subsystem for Linux）

/proc/version に microsoft または WSL が含まれている場合、WSL2 と判断します。

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

WSL2 では、/mnt/c/... にある Windows 版 draw.io Desktop 実行ファイルを使用します。

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

Program Files 内のスペースをパスの一部として扱うため、パスをダブルクォートで囲んでください。バッククォートで囲まないでください。bash ではコマンド置換として扱われ、パスを格納する代わりにバイナリが実行されます。

draw.io が既定以外の場所にインストールされている場合は、一般的な代替場所を確認してください。

# Default install path
"/mnt/c/Program Files/draw.io/draw.io.exe"

# Per-user install (if the above does not exist)
"/mnt/c/Users/$WIN_USER/AppData/Local/Programs/draw.io/draw.io.exe"

どちらにもない場合は、別のドライブまたはカスタムディレクトリにインストールされています。ほかのマウント済みドライブを検索してから、レジストリを確認してください。

# Program Files on the other drives (D:, E:, …)
ls /mnt/*/Program\ Files/draw.io/draw.io.exe 2>/dev/null | head -1

# Registry — the installer records the directory the user picked
for REG_PATH in 'HKCU\Software\Microsoft\Windows\CurrentVersion\Uninstall' \
                'HKLM\Software\Microsoft\Windows\CurrentVersion\Uninstall' \
                'HKLM\Software\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall'; do
  WIN_DIR=$(reg.exe query "$REG_PATH" /s /v InstallLocation 2>/dev/null |
            grep -i 'REG_SZ.*draw\.io' | head -1 |
            sed 's/.*REG_SZ[[:space:]]*//' | tr -d '\r')
  [ -n "$WIN_DIR" ] && DRAWIO_CMD="$(wslpath -u "${WIN_DIR%\\}")/draw.io.exe" && break
done

macOS と Linux

• Linux（ネイティブ）：drawio。通常は snap／apt／flatpak 経由で PATH にあります。which drawio で確認してください。
• macOS：PATH 上の drawio（Homebrew）、/Applications、ユーザーごとの ~/Applications、Spotlight の順に確認し、draw.io がない場合は何も表示しません。

{ command -v drawio; ls /Applications/draw.io.app/Contents/MacOS/draw.io ~/Applications/draw.io.app/Contents/MacOS/draw.io
  mdfind "kMDItemCFBundleIdentifier == 'com.jgraph.drawio.desktop'" | sed 's|$|/Contents/MacOS/draw.io|'; } 2>/dev/null | head -1

.app 内のバイナリを呼び出してください。.app の外にコピーしたり、シンボリックリンクを作成したりすると、Unable to find helper app というエラーが発生します。

Windows（ネイティブ、WSL2 以外）

次の順に確認してください。PATH エントリがない場合や、C: 以外のドライブにインストールされている場合も正常であり、draw.io が見つからないことを意味するわけではありません。

1. PATH：where.exe draw.io（ピリオドに注意してください。実行ファイル名は draw.io.exe であり、drawio.exe ではありません）
2. 既定のインストール先：C:\Program Files\draw.io\draw.io.exe、次にユーザーごとのインストール先 %LOCALAPPDATA%\Programs\draw.io\draw.io.exe
3. レジストリのアンインストール情報。ユーザーが選択したディレクトリが記録されています。
4. ほかのドライブ：D:、E: などにある Program Files\draw.io\draw.io.exe

これを find-drawio.ps1 として保存し、実行すると一連の手順をまとめて実行できます。最初に見つかった実行ファイルを表示し、draw.io が実際にインストールされていない場合は何も表示しません。

$c = @()
$c += (where.exe draw.io 2>$null)
$c += "$env:ProgramFiles\draw.io\draw.io.exe", "$env:LOCALAPPDATA\Programs\draw.io\draw.io.exe"
$c += Get-ItemProperty 'HKCU:\Software\Microsoft\Windows\CurrentVersion\Uninstall\*',
                       'HKLM:\Software\Microsoft\Windows\CurrentVersion\Uninstall\*',
                       'HKLM:\Software\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall\*' -ErrorAction SilentlyContinue |
      Where-Object { $_.DisplayName -like '*draw.io*' } |
      ForEach-Object { if ($_.InstallLocation) { Join-Path $_.InstallLocation 'draw.io.exe' } else { ($_.DisplayIcon -split ',')[0] } }
$c += (Get-PSDrive -PSProvider FileSystem).Root | ForEach-Object { Join-Path $_ 'Program Files\draw.io\draw.io.exe' }
$c | Where-Object { $_ -and (Test-Path $_) } | Select-Object -First 1

bash または cmd シェルから、次のように実行します。

powershell.exe -NoProfile -ExecutionPolicy Bypass -File find-drawio.ps1

呼び出すたびに、結果のパスを引用符で囲んでください。ほとんどの場合、パスにはスペースが含まれます。

& "D:\Program Files\draw.io\draw.io.exe" -x -f xml -o diagram.drawio diagram.mmd

すべての手順で何も見つからなかった場合に限り、CLI がないものとして扱い、XML を記述して .drawio／url を出力する方法に切り替えてください。PATH 外で見つかった場合は、そのフォルダー（例：D:\Program Files\draw.io）を PATH に追加すると、次回から検出されることを伝えてください。

エクスポートコマンド

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

WSL2 では、Windows の実行ファイルを呼び出します。例："/mnt/c/Program Files/draw.io/draw.io.exe" -x -f png -e -b 10 -o "diagram.drawio.png" "diagram.drawio"。変換コマンドとレイアウトコマンドについては、パイプラインおよびXML 用 ELK レイアウトを参照してください。

主なフラグ：

• -x / --export：エクスポートモード（Mermaid の変換やレイアウトにも使用します）
• -f / --format：出力形式（xml、png、svg、pdf、jpg）— Mermaid またはレイアウトから .drawio を生成するには xml を使用します
• --layout：出力を書き込む前にレイアウトを実行します — ELK プリセット名、libavoid のエッジルーティング、またはカスタムレイアウトの JSON 配列を指定します
• --mermaid-image 1：編集可能な図ではなく、Mermaid を単一の静的 SVG 画像セルに変換します（再編集用に Mermaid ソースはセルに保持されます）— 編集できない画像セルをユーザーが明示的に求めた場合に限ります
• -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 始まり）
• --disable-gpu：GPU の初期化をスキップします — コマンドが GPU process isn't usable で終了する場合に追加してください（Windows のリモートデスクトップセッション、VM、CI ランナーなど）。変換、レイアウト、エクスポートのいずれの処理にも GPU は必要ありません

結果を開く

VS Code 内（code の代わりに cursor / windsurf コマンドを使う Cursor または Windsurf でも同様）では、チャットの横にあるエディタータブでファイルを開きます。Draw.io Integration 拡張機能がインストールされていると、VS Code は .drawio、.drawio.svg、.drawio.png ファイルを編集可能な図として表示します。1 つのコマンドで拡張機能を確認し、インストールされていない場合は以下のプラットフォーム別コマンドにフォールバックします（macOS では open）：

code --list-extensions 2>/dev/null | grep -qi '^hediet.vscode-drawio$' && code <file> || open <file>

PDF と url モードでは、常にプラットフォーム別のコマンドを使用します：

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

WSL2 では、cmd.exe が /mnt/c/... を解決できないため、wslpath -w でパスを Windows パスに変換します。また、空の "" を指定することで、start がファイル名をウィンドウタイトルとして扱わないようにします。

ファイル名

• 内容に基づいた、説明的で小文字とハイフンを使った名前にします（例：login-flow、database-schema）
• エクスポートには二重拡張子（name.drawio.png、name.drawio.svg、name.drawio.pdf）を使用し、図の XML が埋め込まれていることを示します
• url モードでは .drawio ファイルを保持します（二重拡張子は付けません）。URL は表示・編集用のハンドルであり、ローカルファイルが永続的なコピーです

XML 形式

.drawio ファイルはネイティブの mxGraphModel XML 形式で、CLI が Mermaid を変換する際に使用する形式と同じです。

基本構造

すべての図は次の構造にする必要があります：

<mxGraphModel adaptiveColors="auto">
  <root>
    <mxCell id="0"/>
    <mxCell id="1" parent="0"/>
  </root>
</mxGraphModel>

• セル id="0" はルートレイヤーです
• セル id="1" はデフォルトの親レイヤーです
• 複数のレイヤーを使用する場合を除き、すべての図要素で parent="1" を使用します
• コンテナー内のセルでは parent="<container_id>" を使用し、座標はそのコンテナーを基準にします
• エッジは両方の端点を含む最も内側のコンテナーに属します — 同じコンテナー内（ネストの深さは問いません）なら、そのコンテナーの ID を指定します。片方の端点がすべてのコンテナーの外にある場合は、parent="1" を指定します。自動レイアウトはエッジの座標を親の座標系で読み取るため、端点より外側に配置されたエッジは誤った位置にレイアウトされます

重要：XML の整形式

• 出力に XML コメント（``）を絶対に含めないでください。 XML コメントは厳禁です。トークンを無駄にし、解析エラーの原因となる可能性があり、図の XML では何の役にも立ちません。
• 属性値内の特殊文字はエスケープしてください：&、<、>、"
• 各 mxCell には必ず一意の id 値を指定してください
• すべてのエッジに、子要素として <mxGeometry relative="1" as="geometry" /> が必要です。自己終了形式のエッジ mxCell は描画されません

修復パス

XML を .drawio ファイルに書き込んだ直後、レイアウト、エクスポート、URL の手順に進む前に実行してください。draw.io が図を拒否する原因となる機械的なミスを修正します。図の外側にあるテキスト（コードフェンス、文章、余分な閉じタグ）、属性値内の < や余分な &（エスケープされていない HTML ラベル、「R&D」、 ）、および既定のレイヤーが独立した親として記述されている状態（<mxCell id="1" parent="1"/>。この状態ではすべてが非表示になります）が対象です。整形式のファイルは変更せず、Node.js だけが必要です（node がインストールされていない場合はスキップしてください）。DIAGRAM.drawio を実際のファイル名に置き換えてください：

node -e '
const fs = require("fs");
const file = process.argv[1];
let xml = fs.readFileSync(file, "utf8");
const diagram = xml.match(/<mxfile[\s\S]*?<\/mxfile>|<mxGraphModel[\s\S]*?<\/mxGraphModel>/);
if (diagram && xml.trim() !== diagram[0]) xml = diagram[0];
xml = xml.replace(/="([^"]*)"/g, function(m, v)
{
  return "=\"" + v.replace(/</g, "&lt;").replace(/&(?!(?:amp|lt|gt|quot|apos|#[0-9]+|#x[0-9a-fA-F]+);)/g, "&amp;") + "\"";
});
xml = xml.replace(/<mxCell id="([^"]+)" parent="\1"\s*\/>/g, "<mxCell id=\"$1\" parent=\"0\"/>");
fs.writeFileSync(file, xml);
' "DIAGRAM.drawio"

XML リファレンス

XML を作成する前に、要約版 XML ルールを取得して従ってください。ルールには、スケルトン、頂点とエッジのテンプレート、ラベル、図形、レイアウトグリッド、コンテナー、スイムレーン、エッジスタイルが含まれます： https://raw.githubusercontent.com/jgraph/drawio-mcp/main/shared/xml-essentials.md

これらのルールで、ほとんどの図に対応できます。レイヤー、タグ、メタデータとプレースホルダー、テーブル、部門横断型グリッド、ダークモードの色が必要な図に限り、完全版 XML リファレンスも取得してください（draw.io MCP サーバーについて説明しています。search_shapes ツールには下記の検索を、postLayout／routing には CLI の--layoutを使用してください）： https://raw.githubusercontent.com/jgraph/drawio-mcp/main/shared/xml-reference.md

図形とアイコン

図でクラウド、ネットワーク、ブランドのアイコン（AWS、Azure、GCP、Cisco、Kubernetes、GitHub、Slack など）が必要な場合、mxgraph.* 名を推測せず、このスキルのフォルダーにある scripts/find-shapes.js を使って、一度の呼び出しですべて検索してください（Node.js 18 以降、ネットワーク接続が必要）。アイコンごとに 1 つのクエリを実行し、ライブラリ（aws4、azure2、cisco19）を指定して絞り込みます。このスクリプトは draw.io の図形ライブラリとアイコンサービスを検索し、title width×height style の形式で行を出力します。スタイルはそのまま使用してください：

node <skill-folder>/scripts/find-shapes.js "aws4 lambda" "github" "slack"

トラブルシューティング

問題	原因	解決策
draw.io CLI が見つからない	デスクトップアプリがインストールされていないか、PATH に設定されていません	CLI の場所を確認するに従ってください。本当に見つからない場合は、XML で作成して .drawio ファイルまたは url を渡し、draw.io デスクトップアプリをインストールすると Mermaid 変換、レイアウト、画像のエクスポートが可能になることをユーザーに伝えてください
Mermaid → PNG のエクスポートがクラッシュする	現在の draw.io Desktop では、-e を使った .mmd → PNG の直接変換が機能しません	まず Mermaid を .drawio に変換し（-f xml）、その後 .drawio をエクスポートしてください
Mermaid から空の図が生成される	タイプキーワードのスペルミス、または構文エラー（不正なノード ID、引用符で囲まれていないラベル）	Mermaid リファレンスを確認してください。最初のディレクティブ以外の行のキーワードで図の種類が決まります
レイアウトが適用されない／エラーになる	プリセット名が不明、カスタム JSON が配列ではない、またはデスクトップ版が古く --layout／.mmd 入力に対応していません	プリセットを使うか、[ で始まる JSON 配列を指定してください。デスクトップ版が古い場合は、位置を明示して XML で作成し、draw.io Desktop を更新すると Mermaid 変換とレイアウトが可能になることをユーザーに伝えてください
エクスポートしたファイルが空または破損している、あるいは図が空に見える	XML が無効、またはルートセル id="0" と id="1" がありません	修復処理を実行し、基本構造を確認してください
変換／レイアウト／エクスポート中に GPU process isn't usable. Goodbye. が表示される	Electron が GPU プロセスを起動できません。Windows のリモートデスクトップセッション、VM、CI ランナーでよく発生します。その前に表示される os_crypt／Failed to decrypt の行は無関係なノイズです	--disable-gpu を追加して同じコマンドを再試行してください。draw.io Desktop 独自の --disable-acceleration スイッチでも同じ効果があります
url モードでブラウザーを開くと空の図が表示される	cmd.exe が #R... フラグメントを削除しました	Windows／WSL2 では .url ファイルを使った回避策を使用してください（URL を開くを参照）。URL を cmd.exe /c start に直接渡してはいけません