作者 jgraph · jgraph/drawio-mcp
First-party draw.io MCP — Claude authors and edits .drawio diagrams as XML, validates against the schema, and exports to PNG/SVG.
draw.io's official MCP lets Claude work with its native XML diagram format. Use it to generate architecture diagrams from prose, edit existing diagrams via instructions, validate XML, and export to SVG/PNG for embedding in PRs and docs.
%APPDATA%\Claude\claude_desktop_config.json{
"mcpServers": {
"drawio-mcp": {
"command": "npx",
"args": [
"-y",
"@jgraph/drawio-mcp"
]
}
}
}Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。
{
"mcpServers": {
"drawio-mcp": {
"command": "npx",
"args": [
"-y",
"@jgraph/drawio-mcp"
]
}
}
}Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。
{
"mcpServers": {
"drawio-mcp": {
"command": "npx",
"args": [
"-y",
"@jgraph/drawio-mcp"
]
}
}
}Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。
{
"mcpServers": {
"drawio-mcp": {
"command": "npx",
"args": [
"-y",
"@jgraph/drawio-mcp"
]
}
}
}Claude Desktop と同じ形式。Windsurf を再起動して反映。
{
"mcpServers": [
{
"name": "drawio-mcp",
"command": "npx",
"args": [
"-y",
"@jgraph/drawio-mcp"
]
}
]
}Continue はマップではなくサーバーオブジェクトの配列を使用。
{
"context_servers": {
"drawio-mcp": {
"command": {
"path": "npx",
"args": [
"-y",
"@jgraph/drawio-mcp"
]
}
}
}
}context_servers に追加。保存時に Zed がホットリロード。
claude mcp add drawio-mcp -- npx -y @jgraph/drawio-mcpワンライナー。claude mcp list で確認、claude mcp remove で削除。
使うタイミング： PR adds a new service; you want a diagram for the design doc.
結果： Diagram lives in repo as both .drawio (editable) and .svg (renderable).
Save .drawio + .svg next to the doc that references them
| ツール | 入力 | 呼び出すタイミング | コスト |
|---|---|---|---|
| generate_diagram | (see docs) | NL → drawio XML | 1 call |
| edit_diagram | (see docs) | Apply instructions to existing XML | 1 call |
| validate | (see docs) | Schema-check XML | 1 call |
| export | (see docs) | Render to PNG / SVG / PDF | 1 call |
Validation fails on generated XMLAsk the model to regenerate citing the schema; common issues: missing geometry parents
Exported SVG hugeUse --simplify; flatten transforms before export
| 代替案 | 代わりに使う場面 | トレードオフ |
|---|---|---|
| Mermaid (text-only) | Simple flow / sequence diagrams | Less control over layout |
| Excalidraw MCP | You prefer hand-drawn aesthetic | Different file format |