このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。 原文を見る
公式 draw.io MCP(Model Context Protocol)サーバーで、LLMが draw.io エディタ内で図を作成・開くことを可能にします。
概要
公式 draw.io MCP(Model Context Protocol)サーバーで、LLMが draw.io エディタ内で図を作成・開くことを可能にします。 このリポジトリでは、draw.io とAIアシスタントを統合するための4つのアプローチが紹介されています。ご自身のセットアップに合ったものを選んでください: MCPアプリサーバーは、MCPアプリプロトコルを用いてAIチャットインターフェースで draw.io 図をレンダリングします。ブラウザタブを開く代わりに、対話中にインタラクティブなiframeとして図が直接表示されます。 公式にホストされたエンドポイントは以下の場所で利用可能です: このURLを Claude.ai またはMCP Apps互換ホストのリモートMCPサーバーとして追加できます — インストールは不要です。 また、Node.jsでローカルサーバーを運用したり、Cloudflare Workersに自社インスタンスをデプロイすることもできます。 - — チャット内で draw.io インタラクティブな図としてXMLをレンダリング- — キーワードですべての draw.io ライブラリ(AWS、Azure、GCP、P&ID、electrical、Cisco、Kubernetes、UML、BPMNなど)で10,000+の形状を検索。XMLで直接使用できる正確なスタイル文字列を返します。
概要（AI 翻訳）
公式 draw.io MCP(Model Context Protocol)サーバーで、LLMが draw.io エディタ内で図を作成・開くことを可能にします。
▶ 動画を見て、drawio.com/mcp のAIアシスタントで draw.io を設定しましょう。
図の4つの作り方
このリポジトリでは、draw.io とAIアシスタントを統合するための4つのアプローチが紹介されています。ご自身のセットアップに合ったものを選んでください:
| MCPアプリサーバー | MCPツールサーバー | アシスタントプラグイン | プロジェクト指示 | |
|---|---|---|---|---|
| 仕組み | チャットで図をインラインでレンダリング | ブラウザで図を開く | .drawioファイルを生成し、オプションでPNG/SVG/PDFのエクスポートやブラウザURLも |
ClaudeはPythonで draw.io URLを生成する |
| 図の出力 | 会話に埋め込まれたインタラクティブビューア | 新しいタブの draw.io エディター | .drawio、.drawio.png / .svg / .pdf、またはブラウザのURL |
クリック可能なリンク draw.io |
インストールが必要いいえ(mcp.draw.ioでホスト) |
はい(npmパッケージ) | 一行プラグインインストール(draw.io デスクトップのみでPNG/SVG/PDFのエクスポート) | いいえ — ただの指示を貼り付けるだけです | |
| XML、CSV、マーメイドに対応していますXMLとマーメイド | ✅ 3つすべて | XMLとマーメイド(Mermaidはデスクトップ draw.io 必要) | ✅ 3つすべて | |
| **ドローで編集可能。 |
このページは AI により自動翻訳されています。技術的な詳細は原文をご確認ください。
README
以下は原文 README の抜粋です。原文を見る。
Draw.io MCP Server
The official draw.io MCP (Model Context Protocol) server that enables LLMs to create and open diagrams in the draw.io editor.
▶ Watch the video and set up draw.io in your AI assistant on drawio.com/mcp.
Four Ways to Create Diagrams
This repository offers four approaches for integrating draw.io with AI assistants. Pick the one that fits your setup:
| MCP App Server | MCP Tool Server | Assistant Plugins | Project Instructions | |
|---|---|---|---|---|
| How it works | Renders diagrams inline in chat | Opens diagrams in your browser | Generates .drawio files, optional PNG/SVG/PDF export or browser URL |
Claude generates draw.io URLs via Python |
| Diagram output | Interactive viewer embedded in conversation | draw.io editor in a new tab | .drawio, .drawio.png / .svg / .pdf, or browser URL |
Clickable link to draw.io |
| Requires installation | No (hosted at mcp.draw.io) |
Yes (npm package) | One-line plugin install (draw.io Desktop only for PNG/SVG/PDF export) | No — just paste instructions |
| Supports XML, CSV, Mermaid | XML and Mermaid | ✅ All three | XML and Mermaid (Mermaid needs draw.io Desktop) | ✅ All three |
| Editable in draw.io | Via “Open in draw.io” button | ✅ Directly | ✅ Directly | Via link |
| Works with | Claude.ai, ChatGPT, VS Code, Cursor, GitHub Copilot CLI, any MCP Apps host | Claude Desktop, Cursor, OpenCode, any MCP client | Claude Code, Codex CLI, GitHub Copilot, Cursor, Antigravity, OpenCode | Claude.ai (with Projects) |
| Best for | Inline previews in chat | Local desktop workflows | Local development workflows | Quick setup, no install needed |
Guides
User guides with tested prompts and examples are in the draw.io documentation, and the setup for each assistant is on drawio.com/mcp:
- Write prompts: Mermaid or draw.io XML, speed and models
- Diagram types and examples and the gallery of every diagram type
- Change and style diagrams: changes by prompt, color themes, styles
- Install options and output formats
- Diagram viewer
インストール
This server does not publish a one-line install command.
Open the repository installation guide MCP 初心者？mcpskill.org のガイドから始めましょう →