🎨

draw.ioのAI連携はどれを使う？MCPとSkillの違いと、SKILL.md拡張の実践

Hikaru Umeda

2026/03/03に公開

draw.io

Model Context Protocol

Claude Code

tech

 はじめに2026年2月、draw.io の開発元 JGraph が AI 連携ツールをリリースしました。2月9日に公式 MCP サーバー、2月23日に Claude Code 向けの Draw.io Skill が公開され、AIからdraw.io形式の図を生成するための選択肢が増えました。
https://gihyo.jp/article/2026/02/drawio-skill-for-claude-code
リポジトリ（jgraph/drawio-mcp）には複数のアプローチがありますが、開発者が実際に使うのは主に Skill + CLI と MCP Tool Server の 2 つだと思います。両方試してみたところ、体験としてはほぼ同じ。でも Skill には面白い特徴がありました。SKILL.md という Markdown ファイルを編集するだけで、AI の振る舞いを手軽にカスタマイズできるんです。
本記事では、まず Skill と MCP を比較してそれぞれの特徴を整理した上で、公式の SKILL.md を実際に改良して「使い捨ての図」から「反復編集・差分管理」をできるようにした過程を紹介します。

 Skill + CLI と MCP Tool Server を比較する
 それぞれの概要Skill + CLI は、SKILL.md というファイルを Claude Code のスキルディレクトリに置くだけで動きます。Claude Code が mxGraphModel XML を直接生成して .drawio ファイルに書き出し、必要に応じて draw.io Desktop の CLI で PNG/SVG/PDF にエクスポートしてくれます。
# セットアップ
mkdir -p ~/.claude/skills/drawio
curl -o ~/.claude/skills/drawio/SKILL.md \
  https://raw.githubusercontent.com/jgraph/drawio-mcp/main/skill-cli/SKILL.md
MCP Tool Server は、stdio ベースの MCP サーバーです。open_drawio_xml、open_drawio_csv、open_drawio_mermaid の 3 ツールを提供していて、呼び出すとブラウザで draw.io エディタが開きます。
// Claude Desktop の設定ファイルに追加
{
  "mcpServers": {
    "drawio": {
      "command": "npx",
      "args": ["@drawio/mcp"]
    }
  }
}

 同じお題で試してみた「ユーザーログインのフローチャート」を両方で生成してみました。

 Skill + CLI:/drawio create ユーザーログインのフローチャートを作成して
Output



Claude Code のターミナル出力


draw.io Desktop で開いたフローチャート

 MCP Tool Server:open_drawio_xml を使って、ユーザーログインのフローチャートを作成して
Output



ブラウザで開いた draw.io エディタ
MCP では Mermaid フォーマットも試せます。
open_drawio_mermaid を使って、ユーザーログインのフローチャートを作成して
Output



Mermaid で生成された図
正直なところ、どちらも「指示を出す → 図ができる」という体験はほぼ同じでした。

 違いが出るのは「その後」体験は同じでも、生成物のライフサイクルを考えると差が見えてきます。


比較項目
Skill + CLI
MCP Tool Server


出力先
ローカルファイル
ブラウザで draw.io エディタが開く

ファイルが手元に残るか
◯ 残る
× 手動で保存が必要

Git 管理
◯ そのままコミットできる
△ 保存してからコミット

対応フォーマット
XML のみ
XML, Mermaid, CSV

利用クライアント
Claude Code
Claude Code, Claude Desktop, VS Code 等

CI/CD 連携
◯ CLI でバッチ処理可能
× インタラクティブ前提

!ざっくり言うと、Claude Code + ファイル管理なら Skill、Mermaid やブラウザ編集を重視するなら MCP です。もちろん両方入れておいて場面に応じて使い分けるのもアリです。

 Skill ならではの強み：カスタマイズの手軽さここで注目したいのが、Skill の構造です。Skill の実体は ただの Markdown ファイルで、Claude Code がこのファイルを読んで、その指示に従ってダイアグラムを生成しています。つまり、SKILL.md を編集するだけで AI の振る舞いを変えられるということです。
もちろん MCP Tool Server もソースコードを修正すればカスタマイズできますが、それには Node.js のコードを読み書きする必要があります。Skill なら Markdown を書き換えるだけ。この手軽さが、今回カスタマイズに挑戦してみようと思ったきっかけでした。

 公式 Skill の課題：「生成して終わり」になりがち公式の SKILL.md を使ってみて、すぐに気づいた課題があります。
既存ファイルの編集フローが用意されていない。
実務では、一度作った図に対して「ここにステップを追加して」「この矢印のラベルを変えて」と繰り返し修正するケースの方が多いですよね。でも公式版は「CREATE → エクスポート → 開く」のワンショットフローに特化していて、既存の .drawio ファイルを読み込んで編集する仕組みがありません。
さらに、エクスポートすると中間の .drawio ファイルが削除される設計なので、「エクスポートした後にやっぱり修正したい」というときに困ります。
そこで、公式の SKILL.md をベースにカスタマイズしてみることにしました。

 SKILL.md を改良する
 改良のゴール「作る → 直す → 書き出す」のサイクルを、一つの Skill で完結させることです。

 改良 1：3 つのモードを追加する公式版は CREATE しかできませんでしたが、UPDATE（既存ファイルの編集） と EXPORT-ONLY（エクスポートのみ） を追加しました。SKILL.md に以下のようなセクションを書き加えます。
SKILL.md
## How to handle a request (CREATE / UPDATE / EXPORT)

0. Determine intent:
   - EXPORT-ONLY: an existing `.drawio` filename/path is provided
     AND an export format is requested
   - UPDATE: an existing `.drawio` filename/path is provided
     (no export requested)
   - CREATE: no existing `.drawio` filename/path is provided
これで、ユーザーのリクエストから意図を自動判定してくれるようになります。
/drawio create ユーザーログインのフローチャートを作成して
  → 既存ファイル名なし → CREATE

/drawio update login-flow.drawio: パスワード認証の後にMFAステップを追加して
  → 既存ファイル名あり + 変更指示 → UPDATE

/drawio png login-flow.drawio
  → 既存ファイル名あり + フォーマット指定 → EXPORT-ONLY
一つのスキルで「作る → 直す → 書き出す」が全部できるようになりました。

 改良 2：UPDATE 時の差分を最小化するUPDATE で一番大事なのは、既存の図を壊さないことです。図の全体を再生成してしまうと、Git 上では実質的に新しいファイルと区別がつかなくなります。
SKILL.md に以下のルールを追記しました。
SKILL.md
### Update workflow
1. Read the current `.drawio` XML from disk.
2. Apply the user's requested changes as a minimal diff:
   - Preserve existing `mxCell` ids whenever possible
   - Do not reorder existing `mxCell` elements
   - When adding new cells, append ids greater than the current maximum id
   - Keep styles unchanged unless requested
   - Only move geometry near the changed area
ポイントは以下の 3 つです。
既存の id を変えない

Claude が XML を再生成するとき、id を振り直してしまいがちです。これを防ぐために「既存の id は保持する」と明示しています。
セルの並び順を変えない

XML 内の mxCell の順序が変わると、Git diff で全行が変更扱いになってしまいます。
新規セルの id は最大 id の次（max+1）から連番にする

既存の id と衝突しないように、現在の最大 id を取得してから新規セルに付与します。
max=$(grep -o 'id="[0-9]\+"' login-flow.drawio \
  | sed 's/id="//;s/"//' | sort -n | tail -1)
echo "Next id: $((max + 1))"
これにより、git diff で見たときに追加・変更されたセルだけが差分として表示されるようになります。

 改良 3：エクスポート後もソースファイルを残す公式版ではエクスポート後に .drawio ファイルを削除していましたが、これをデフォルトで保持に変更しました。
SKILL.md
Deletion policy:
- Keep the source `.drawio` file by default (supports iterative workflows).
- Only delete the source `.drawio` if the user explicitly asks
  AND the chosen export format supports embedded XML (png/svg/pdf).
これで、「エクスポートした → やっぱり修正したい → あ、元ファイルがない…」ということがなくなります。JPG（XML 埋め込み非対応）の場合は、ユーザーが明示的に削除を指示しても .drawio を残すようにしています。

 公式版との差分まとめ

観点
公式版
カスタマイズ版


対応操作
CREATE のみ

CREATE / UPDATE / EXPORT-ONLY の 3 モード

既存ファイルの編集
非対応（毎回新規生成）
既存 .drawio を読み込んで差分編集

エクスポート時の元ファイル
削除する
デフォルトで保持

id 管理
特に言及なし

既存の最大 id から続けて付与して衝突を防止

セルの並び順
保証なし

既存の順序を維持（Git diff が安定）


 改良版を使ってみる
 CREATE → UPDATE のサイクルまずはログインフローチャートを新規生成します。
/drawio create ユーザーログインのフローチャートを作成して
Output



CREATE で生成されたフローチャート
次に、MFA（多要素認証）ステップを追加してみます。
/drawio update login-flow.drawio: パスワード認証の後にMFA認証ステップを追加して
Output



UPDATE 実行時の Claude Code ターミナル出力


MFA ステップが追加された図
既存のノードやエッジはそのままに、MFA 関連のセルだけが追加されました。git diff で確認すると、追加されたセルのみが差分として表示されます。
...
@@ -66,7 +66,7 @@
         <mxCell id="20" edge="1" parent="1" source="6" style="edgeStyle=orthogonalEdgeStyle;" target="7" value="">
           <mxGeometry relative="1" as="geometry" />
         </mxCell>
-        <mxCell id="21" edge="1" parent="1" source="7" style="edgeStyle=orthogonalEdgeStyle;" target="8" value="成功">
+        <mxCell id="21" edge="1" parent="1" source="7" style="edgeStyle=orthogonalEdgeStyle;" target="27" value="成功">
           <mxGeometry relative="1" as="geometry" />
         </mxCell>
         <mxCell id="22" edge="1" parent="1" source="8" style="edgeStyle=orthogonalEdgeStyle;" target="9" value="">
@@ -90,6 +90,38 @@
             </Array>
           </mxGeometry>
         </mxCell>
+        <mxCell id="27" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" value="MFAコード送信" vertex="1">
+          <mxGeometry height="60" width="220" x="320" y="650" as="geometry" />
+        </mxCell>
+        <mxCell id="28" parent="1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" value="MFAコード入力" vertex="1">
+          <mxGeometry height="60" width="220" x="320" y="750" as="geometry" />
+        </mxCell>
+        <mxCell id="29" parent="1" style="rhombus;whiteSpace=wrap;html=1;fillColor=#e1d5e7;strokeColor=#9673a6;" value="MFAコード検証?" vertex="1">
+          <mxGeometry height="80" width="220" x="320" y="850" as="geometry" />
+        </mxCell>
...
これは、git diff の一部を取り出してきたものですが、既存の id=21 は接続先（target）が 8 → 27 に変わっただけで、新しいセル（id=27〜）が末尾に追加されています。図全体が再生成されていないので、PR のレビューでも「何が変わったか」が一目でわかります。

 EXPORT-ONLY編集が終わったら、PNG にエクスポートします。
/drawio png login-flow.drawio
login-flow.drawio.png が生成されますが、元の login-flow.drawio もちゃんと残っています。あとからまた修正したくなっても安心です。
このように .drawio ファイルがローカルに残り続けるので、コードと一緒に Git で管理できます。PR に図の変更が含まれていれば diff で何が変わったかわかりますし、PNG へのエクスポートを CI に組み込めばドキュメントの更新も自動化できます。.drawio をリポジトリで管理できるので、図の更新をレビューやCIの工程に組み込みやすいのは Skill + CLI の利点です。

 補足：他のアプローチもある本記事では Skill + CLI と MCP Tool Server に絞りましたが、drawio-mcp リポジトリにはさらに 2 つのアプローチがあります。

MCP App Server — チャット内にダイアグラムをインライン表示。公式ホスト mcp.draw.io/mcp を追加するだけで使えます。

Project Instructions — Claude.ai の Projects に指示文書を貼り付けて Python で draw.io URL を生成。インストール一切不要です。

 まとめSkill + CLI と MCP Tool Server を比較した結果、図を生成するまでの体験にほとんど差はなく、どちらもセットアップから生成まで簡単に試すことができました。ただ、Skill には SKILL.md を編集するだけで手軽にカスタマイズできるという強みがあります。
今回は公式の SKILL.md に 3 つの改良を加えました。

CREATE / UPDATE / EXPORT-ONLY の 3 モード対応 — 「作る → 直す → 書き出す」が一つの Skill で完結

UPDATE 時の差分最小化 — 既存の id と並び順を保持して Git diff をクリーンに

エクスポート後のソースファイル保持 — 元ファイルが残るので、繰り返し編集できる
Skill の魅力は、Markdown を書くだけで AI の振る舞いを変えられることです。MCP サーバーもコードを修正すればカスタマイズできますが、Skill なら自然言語で「こういうときはこうして」と書き足すだけ。プログラミングの知識がなくてもワークフローを改善できるハードルの低さは、Skill ならではだと思います。
まずは公式の SKILL.md を入れてみて、使っているうちに「ここが不便だな」と思ったら SKILL.md を開いて書き足す。そんな気軽なカスタマイズ体験をぜひ試してみてください。

 参考jgraph/drawio-mcp（GitHub）
draw.io、Claude Code向けスキルを公開（gihyo.jp）
draw.io Desktop
Claude Code

比較項目	Skill + CLI	MCP Tool Server
出力先	ローカルファイル	ブラウザで draw.io エディタが開く
ファイルが手元に残るか	◯ 残る	× 手動で保存が必要
Git 管理	◯ そのままコミットできる	△ 保存してからコミット
対応フォーマット	XML のみ	XML, Mermaid, CSV
利用クライアント	Claude Code	Claude Code, Claude Desktop, VS Code 等
CI/CD 連携	◯ CLI でバッチ処理可能	× インタラクティブ前提

観点	公式版	カスタマイズ版
対応操作	CREATE のみ	CREATE / UPDATE / EXPORT-ONLY の 3 モード
既存ファイルの編集	非対応（毎回新規生成）	既存 `.drawio` を読み込んで差分編集
エクスポート時の元ファイル	削除する	デフォルトで保持
id 管理	特に言及なし	既存の最大 id から続けて付与して衝突を防止
セルの並び順	保証なし	既存の順序を維持（Git diff が安定）

EpicAI Tech BlogPublication

EpicAI Tech Blog 株式会社EpicAI/自動車や製造業の設計品質保証AI agent「DR Agent」を開発 / 東大松尾研発スタートアップ / 製造・建設・インフラ×AI / 「産業のAI原体験をつくる」/ AIエンジニア・Resercher 募集中

はじめに

Skill + CLI と MCP Tool Server を比較する

それぞれの概要

同じお題で試してみた

Skill + CLI:

MCP Tool Server:

違いが出るのは「その後」

Skill ならではの強み：カスタマイズの手軽さ

公式 Skill の課題：「生成して終わり」になりがち

SKILL.md を改良する

改良のゴール

改良 1：3 つのモードを追加する

改良 2：UPDATE 時の差分を最小化する

改良 3：エクスポート後もソースファイルを残す

公式版との差分まとめ

改良版を使ってみる

CREATE → UPDATE のサイクル

EXPORT-ONLY

補足：他のアプローチもある

まとめ

参考

Discussion