Lets LLMs create and open draw.io diagrams from chat, such as flowcharts and documentation visuals.
Setup
Choose your client, copy the config, then fill in any required environment variables.
Local
claude mcp add draw-io -- npx @drawio/mcp~/.codex/config.toml
[mcp_servers.draw-io]
command = "npx"
args = ["@drawio/mcp"]
# codex mcp add draw-io -- npx @drawio/mcp~/.cursor/mcp.json
{
"mcpServers": {
"draw-io": {
"command": "npx",
"args": [
"@drawio/mcp"
]
}
}
}.vscode/mcp.json
{
"servers": {
"draw-io": {
"type": "stdio",
"command": "npx",
"args": [
"@drawio/mcp"
]
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"draw-io": {
"command": "npx",
"args": [
"@drawio/mcp"
]
}
}
}claude_desktop_config.json
{
"mcpServers": {
"draw-io": {
"command": "npx",
"args": [
"@drawio/mcp"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"draw-io": {
"command": "npx",
"args": [
"@drawio/mcp"
]
}
}
}Remote
claude mcp add --transport http draw-io https://mcp.draw.io/mcp~/.codex/config.toml
[mcp_servers.draw-io]
url = "https://mcp.draw.io/mcp"
# codex mcp add draw-io --url https://mcp.draw.io/mcp~/.cursor/mcp.json
{
"mcpServers": {
"draw-io": {
"url": "https://mcp.draw.io/mcp"
}
}
}.vscode/mcp.json
{
"servers": {
"draw-io": {
"type": "http",
"url": "https://mcp.draw.io/mcp"
}
}
}~/.gemini/settings.json
{
"mcpServers": {
"draw-io": {
"httpUrl": "https://mcp.draw.io/mcp"
}
}
}claude_desktop_config.json · Customize › Connectors › Add custom connector
{
"mcpServers": {
"draw-io": {
"command": "npx",
"args": [
"-y",
"mcp-remote",
"https://mcp.draw.io/mcp"
]
}
}
}.trae/mcp.json
{
"mcpServers": {
"draw-io": {
"url": "https://mcp.draw.io/mcp"
}
}
}