概要

最近の猛烈なAIプッシュ、またGitHubの活用により、Office製品などバイナリ形式での保存より、テキストベースで保存できるファイル形式に少しずつ移行しつつあります。
基本的にはmdがベースではあるんですが、設計書内の図示部分とかはどんなツールを使っていくか、まだまだ探っている途中です。

そんな中、draw.ioの公式MCPサーバが先日公開されました。テキストベースで図示をするといえばmermaidを思い浮かべる人も多いと思いますが、個人的にはdrawioもかなり好きです。MCPにてどんなことが可能になったのか、実際に試していきましょう！

導入

今回はVSCode環境にて導入していきます。

draw.io拡張機能の導入

マーケットプレイスからこちらの拡張機能を導入しておきます。これで、後述するプレビュー機能などが使えるようになります。

MCPサーバの追加

Ctrl + Shift + Pにて設定一覧を出し、「MCPサーバの追加」を選択します。
その後、HTTPを選択し

以下MCPサーバのURLを記入し、適当なIDを記入するだけ！jsonファイルが作成され、MCPサーバの導入が完了です。

https://mcp.draw.io/mcp

CopilotのToolから見ると、drawioのcreate_diagramというツールが使えるようになっていました。

何ができる？

create_diagramツールの公式の説明は以下です。

Tool: create_diagram

The rendered diagram includes:

Interactive zoom, pan, and navigation

Layer toggling and lightbox mode

"Open in draw.io" button to edit the diagram in the full editor

Fullscreen mode

単にdrawioの図を作る、というわけではなくそれをレンダリングした図形がチャットベースで確認できる、ということみたいです。
また、draw.ioでそれをすぐ開くことも可能だそう。これにより、AIが図示のベースを作り、人間の手でちょっと手直しする、みたいなこともやりやすそうです。

使ってみる

先日、プロジェクト内のgitのブランチ戦略を考える、みたいなタスクを行っていたので、こんな感じの質問をしてみました。

一般的なgit flowのブランチ戦略について、drawioで図にしてもらっていい？

なんと返ってきたのがこちら。

そう、VSCodeのCopilotチャット上に、drawioで構築した図示がそのまま表示されております！

ズームイン/アウトの機能もあったり

draw.ioで開くボタン、作成したxmlをコピーするボタン、フルスクリーンで描画するボタンもあったりします。

フルスクリーンで開くボタンは私環境ではうまく動作しませんでした。

draw.ioで開いてみる

「Open in draw.io」ボタンをクリックすると、ブラウザが開き次のように編集可能な形で開くことができました。これでちょっと手直しなども楽ちん。

感想

一番いいところは、AIでざっくり作る→人間で手直しするが簡単にできるところ！
mermaid形式とかだと、微妙な図形同士の位置の調整とかは直感的にはやり辛いので、やっぱりそこがGUIでぱっとやれちゃうdraw.ioはかなり便利です。

もちろんMCPを使わずともAIを使ってのxmlの作成はできるのですが、それを簡単にエディタ使って変更する、という部分がこのMCPの真骨頂みたいですね。
今回みたいなブランチ戦略の図や機能の構成図などは、どうしても最終的には人間で微調整したい部分、もしくは途中から追加したいものなどが出てくるのではないかと思います。最初に大枠を作成+人間での修正を考えるなら、かなり柔軟に使えそうだと思いました。