Draw.io公式Skillで設計図をGitHub管理 — VS Code完結のセットアップ

SHARE

ども！龍ちゃんです。

前回の記事では Draw.io の公式 MCP Tool Server を検証しました。しっかり動くし、Mermaid 入力のトークン効率もよかったのでぱっと使う分には良かったですね。問題があったんでブログを書いているんですけどもwww

今回の内容です。

  • MCP Tool Server の問題 — ファイルが残らない
  • Skill + VS Code 拡張機能のセットアップ
  • VS Code 内で完結する作業の流れ（生成 → プレビュー → 編集 → エクスポート → Git 管理）
  • MCP Tool Server との比較と使い分け
  • Mermaid / PlantUML も含めた図解ツール全体の選び方
目次

MCP Tool Server の問題: 設計図が Git 管理できない

検証していて問題になったことがあります。

Draw.io で描く図って、設計情報なんですよね。アーキテクチャ図、シーケンス図、フロー図。どれもシステムの設計を表現したもので、ソースコードと同じように GitHub に置いてバージョン管理したい。PR でレビューもしたい。

ところが MCP Tool Server は URL 方式です。図を生成すると app.diagrams.net の URL が返ってきて、ブラウザで開く。図のデータは URL に埋め込まれているだけで、手元にファイルが残らない。git add できるものがないんですよね。

MCP が悪いわけじゃないです。ブラウザで図を確認・共有する用途は十分見たいしてます。Slack に URL を貼れば相手もすぐに見られるし、受け取り側に環境も要らない。ただ、設計情報を Git で管理するという用途には合わないだけですね。

同じ jgraph/drawio-mcp リポジトリに、.drawio ファイルをローカルに生成するアプローチがあります。これと VS Code の Draw.io 拡張機能を組み合わせると、生成からプレビュー、手動編集、エクスポート、Git 管理まで VS Code の中で完結するので、そちらの検証結果をブログにまとめています。

Skill + 拡張機能のセットアップ

やることは2つだけです。Skill 定義ファイルを1つと VS Code の拡張機能を1つ追加する。MCP サーバーの起動も Node.js も要りません。

Skill のセットアップ

jgraph/drawio-mcp リポジトリの skill-cli/SKILL.md を取得して、プロジェクトに配置します。

mkdir -p .claude/skills/drawio
curl -sL https://raw.githubusercontent.com/jgraph/drawio-mcp/main/skill-cli/SKILL.md \
  > .claude/skills/drawio/SKILL.md

これだけです。MCP のように .mcp.json に設定を書いたり、npx でサーバーを起動したりする必要はありません。

VS Code 拡張機能の追加

.drawio ファイルを VS Code で開けるようにするために、Draw.io の拡張機能を追加します。

devcontainer を使っている場合は devcontainer.json に追加するだけです。

{
  "customizations": {
    "vscode": {
      "extensions": [
        "hediet.vscode-drawio"
      ]
    }
  }
}

ローカル環境なら VS Code のマーケットプレイスから hediet.vscode-drawio をインストールしてください。

この拡張機能を入れると、.drawio ファイルを開いたときに VS Code 内に GUI エディタが表示されます。ドラッグ＆ドロップで図形を動かしたり、色を変えたり、接続線を引いたりできます。ブラウザの draw.io と同じ操作感です。

PNG や SVG へのエクスポートも、この拡張機能のメニューから手動でできます。draw.io の CLI ツールは要りません。

なぜ「CLI」ではなく「拡張機能」なのか

jgraph/drawio-mcp のリポジトリでは、このアプローチを「Skill + CLI」と呼んでいます。ここでいう CLI は draw.io のデスクトップアプリをコマンドラインで使うエクスポート機能（drawio -x -f png ...）のことです。

ただ、devcontainer 環境でこの CLI を動かそうとすると面倒なんですよね。draw.io のデスクトップアプリは Electron ベースなので、ヘッドレス環境で動かすには xvfb と大量の X11 依存パッケージが必要になる。Docker イメージが 500MB くらい膨らみます。

VS Code の Draw.io 拡張機能なら、devcontainer.json に1行追加するだけで済みます。プレビュー、編集、エクスポートが全部揃います。

devcontainer 環境での現実解は Skill + 拡張機能 です。

VS Code で完結する作業の流れ

セットアップが終わったら、実際の作業の流れを見ていきましょう。ブラウザを開かずに、VS Code の中だけで図の生成から Git 管理まで完結します。

生成 → プレビュー → 編集 → エクスポート → Git 管理

流れはこうなります。

Claude Code に指示
  → .drawio ファイル生成
  → VS Code でプレビュー（Draw.io 拡張が自動で開く）
  → GUI で手動微調整（色・配置・接続）
  → 拡張機能から PNG/SVG にエクスポート
  → git add → commit → push

実際に Claude Code に指示するときはこんな感じです。

ログイン処理のフローチャートを .drawio で作って。
開始 → メールアドレス入力 → パスワード入力 → 認証API呼び出し
→ 成功/失敗の分岐 → 完了

特別なコマンドは要りません。.drawio で作って と言えば、Skill の定義を参照して .drawio ファイルを生成してくれます。フローチャートに限らず、アーキテクチャ図やシーケンス図も同じように自然言語で指示するだけで作れます。

AI 生成 + 手動仕上げ

Claude が生成する .drawio ファイルは、そのまま使えるレベルではあります。ノードの配置も接続も合っている。ただ、色やレイアウトの微調整は人間が GUI でやったほうが速いんですよね。

ここが Mermaid や PlantUML との大きな違いです。テキストベースのツールだと、色を変えたければソースコードを編集して再レンダリングする。Draw.io なら GUI で直接ドラッグして色を塗れば終わりです。Figma を触る感覚に近いです。

AI が 80% の構造を作って、人間が 20% の見た目を GUI で仕上げる。このハイブリッドが .drawio ファイルとして Git にコミットされるのが、この流れのポイントです。

GitHub での管理

.drawio ファイルは Git にそのままコミットできます。バージョン管理される。ブランチを切って PR でレビューもできる。

設計情報を Git 管理する最大のメリットは、PR で図をレビューできることです。設計変更があったら図も一緒に PR に含めて、レビュアーが確認できる。ただ、ここで1つ問題があります。

GitHub は .drawio ファイルをレンダリングしません。リポジトリ上で開くと生の XML が表示される。これだと PR を開いてもレビュアーは図が見られないんですよね。

解決策が .drawio.svg 形式です。VS Code の拡張機能から SVG にエクスポートすると、SVG の中に Draw.io の XML が埋め込まれます。GitHub 上では画像として表示されるので、PR でレビュアーが図を確認できる。しかも draw.io で開けば再編集もできます。

.drawio ファイル（編集用ソース）と .drawio.svg（GitHub 表示・レビュー用）の両方をコミットしておくのがおすすめです。

CI で自動変換したい場合は render-drawio-action も選択肢に入ります。

MCP vs Skill の比較

ここまで Skill + 拡張機能のセットアップとワークフローを見てきました。じゃあ MCP Tool Server はもう要らないのかというと、そんなことはないです。用途が違うだけなんですよね。

比較表

比較項目MCP Tool ServerSkill + 拡張機能
出力URL → ブラウザで確認.drawio ファイル → VS Code で確認
Git 管理できない（ファイルが残らない）できる（.drawio をコミット）
入力フォーマットXML / Mermaid / CSVXML のみ
コンテキスト消費3ツール分の定義が常に載る使うときだけ読み込まれる（普段はゼロ）
編集環境ブラウザ（app.diagrams.net）VS Code 内
オフライン初回ダウンロード後は可能完全オフライン対応
セットアップ.mcp.json + Node.jsSKILL.md 1つ + 拡張機能
エクスポートブラウザから手動拡張機能から手動

Mermaid 入力に対応しているのは MCP だけです。Mermaid はトークン効率が良くて、XML の 1/10 くらいで同じ図を表現できる。フローチャートで比べると、XML だと約 800 トークンかかるところが Mermaid なら約 100 トークンで済みます。

逆に、Git 管理ができるのは Skill + 拡張機能だけです。ここは明確に分かれます。

どちらを選ぶか

判断はシンプルです。

  • Git で管理したい → Skill + 拡張機能。これ一択
  • Mermaid から変換したい → MCP Tool Server
  • URL を共有して相手にすぐ見せたい → MCP Tool Server
  • VS Code の中で完結したい → Skill + 拡張機能
  • 両方使い分けたい → 併用できる。同じリポジトリの別アプローチなので競合しない

僕の場合は、設計情報を GitHub で管理するのが前提なので Skill + 拡張機能をメインで使っています。Mermaid から Draw.io に変換したいときだけ MCP を使う、という使い分けですね。

全ツールの使い分け — Draw.io だけで考えない

Draw.io の話をしてきましたが、図を作るツールは Draw.io だけじゃないです。Mermaid、PlantUML、HTML ベースの図解もある。目的に合わせて選ぶのが大事なんですよね。

Draw.io の立ち位置

Draw.io の強みは GUI で直感的に編集できることです。AI が生成した図をそのままドラッグして色を塗って形を変えられる。Mermaid や PlantUML だとソースコードを書き換えて再レンダリングしないといけないけど、Draw.io ならマウスで触るだけです。

デザインの自由度も段違いで、色、形状、アイコン、グラデーション、何でもいける。素の Mermaid / PlantUML だと見た目の調整に限界があって、Mermaid を Tailwind で拡張する記事と PlantUML を Tailwind で仕上げる記事を書いたくらいなんですよね。Draw.io ならそもそもその問題が起きません。

ただ弱点もあります。

  • Git diff が見づらい:
    .drawio の中身は XML なので、diff を見ても座標やスタイル情報が大量に出てきて、何が変わったのかわかりにくい。Mermaid や PlantUML はテキストベースだから diff がきれいに出る
  • GitHub でレンダリングされない:
    さっき書いた通り、.drawio のままだと生 XML が表示される。.drawio.svg で回避はできるけど、ひと手間かかる

使い分け表

ユースケース推奨ツール理由
ブログ記事のフロー図・概念図HTML + Mermaid / PlantUMLPNG が直接出る。テキストで完結
テキスト管理したい仕様書の図Mermaid / PlantUMLdiff がきれい。テキストで完結
デザインにこだわりたい図Draw.io（Skill + 拡張機能）GUI 編集、デザイン自由度が高い
Mermaid / CSV からの変換Draw.io MCP変換に対応しているのはこれだけ
URL を貼って即共有Draw.io MCPリンク1つで相手が見られる

ブログ記事の図を作るだけなら、正直 HTML + Mermaid で作る図解や PlantUML で作る図解 のほうが手軽です。PNG が直接出てくるし、テキストだけで完結する。

Draw.io が活きるのは「デザインにこだわりたい」か「GUI で編集したい」場面です。設計書に載せる図とか、お客さんに見せる図とか、見た目が大事な場面ですね。

判断フロー

迷ったらこの流れで考えるとすっきりします。

図を作りたい ├─ テキストで管理・diff を見たい → Mermaid / PlantUML ├─ PNG がすぐ欲しい → HTML + Mermaid / PlantUML └─ GUI で編集・デザインにこだわりたい ├─ Git 管理する → Skill + 拡張機能 └─ Git 管理しない（共有メイン） → MCP Tool Server

仕様書の図はAIに読ませるな — 軽量コードを添える設計パターン や 図解作成、AIに丸投げしたら「たまに自分より上手い」件 も合わせて読むと、図解ツール全体の使い分けが見えてくると思います。

まとめ

Draw.io で描く図は設計情報です。設計情報なら GitHub で管理したい。MCP Tool Server は URL 方式で図が手元に残らないから、Git 管理には向かない。

だから Skill + VS Code 拡張機能を使う。SKILL.md を1つ置いて、devcontainer.json に拡張機能を1行追加する。これで .drawio ファイルの生成からプレビュー、GUI 編集、エクスポート、Git 管理まで VS Code で完結します。

MCP Tool Server が使えないわけじゃないです。Mermaid 変換や URL 共有には MCP のほうが向いている。同じリポジトリに両方のアプローチが用意されているのは、用途が違うからなんですよね。

ツールは目的で選ぶ。Git 管理が要るなら Skill + 拡張機能、共有が要るなら MCP。テキスト管理や diff 重視なら Mermaid / PlantUML もある。全部を1つで解決しようとしないで、場面に合わせて使い分けるのがいいんじゃないかなと思います。

ほなまた〜

関連ブログ

Draw.io MCP シリーズ

MCP と Skills の使い分け

AI × 図解作成

図解のデザイン強化

ご覧いただきありがとうございます！ この投稿はお役に立ちましたか？

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。
エンジニア募集中!

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

Draw.io公式MCPでできること・できないこと — 3フォ…