WSL2 で `draw.io Skills` を使う際の詰まりどころとワークアラウンド
- #wsl2
- #skills
- #draw.io
最近、draw.io の MCP に続いて、Skills が出ました。
MCPはサクッと動くと思いますが、Skills は少し詰まるところがあったのでワークアラウンドを共有します。
尚、公式にはClaudeCode用と記載がありますが、OpenCodeでも動作しました。
※ たいていのユースケースにはMCPで良いと思います。
※ Windows や macOS で使う場合には特段困ることは無いと思います。
draw.io Desktop のインストール
draw.io Skills では、完成した図は draw.io Desktop で自動的に開かれます。
また、XML(.drawio)形式で作成した図を draw.io Desktop のCLI機能を利用して画像形式に変換させることも可能です。
個人的には、GitHubでテキスト形式で図を管理することが目的の為、変換は不要ですが、完成した図をその場で手直しすることはあるので、draw.io Desktop が必要です。
下記URLからダウンロードできます。
https://github.com/jgraph/drawio-desktop/releases
Skills のインストール
基本的には SKILLS.md ファイルを.agents/<skill-name>/や.claude/<skill-name>/にコピーすれば良いだけですが、vercel の skills を使うとより簡単です。
npx skills add https://github.com/jgraph/drawio-mcp --skill drawio
WSL2 から Windows の draw.io Desktop を起動させたい
WSL2(Ubuntu) で Skills を動かした場合、xdg-openで完成したファイルを開こうとします。
Ubuntuのデスクトップをちゃんとセットアップしている場合はこれでも良いかもしれませんが、私はWSL2ではCUI/TUIしか使わないので、Windowsにインストールしたdraw.io Desktopで開いてもらいたいところです。
そこで、ワークアラウンドにはなりますが、以下のようにwslviewというWindows側の関連付けでファイルを開くコマンドをxdg-openの代わりに使うことを強制させるようにシンボリックリンクを作成します。
xdg-openは通常、/usr/bin/や/bin/にありますが、通常それよりも優先度が高いパスである/usr/local/bin/にxdg-openの名前でwslviewを入れることで強制させます。
(update-alternatives等も試しましたが、私の環境ではうまくいきませんでした。また、AIエージェントが使うのは非対話モードのシェルの為、aliasも使えません。)
sudo ln -sf /usr/bin/wslview /usr/local/bin/xdg-open
ClaudeCode に/drawio create a flowchart for user loginと指示を出して図を作成させると、こんな感じでWindows側のdraw.io Desktopが開きました。
ここで開いているファイルはWSL2上のファイルなので、ここで編集して保存するとそのままファイルに変更が反映されます。

以上です。