@drawio/mcp 1.1.2 → 1.1.4

package/README.md

@@ -12,7 +12,6 @@ This package is part of the [drawio-mcp](https://github.com/jgraph/drawio-mcp) r
 - **Open XML diagrams**: Load native draw.io/mxGraph XML format
 - **Import CSV data**: Convert tabular data to diagrams (org charts, flowcharts, etc.)
 - **Render Mermaid.js**: Transform Mermaid syntax into editable draw.io diagrams
-- **URL support**: Fetch content from URLs automatically
 - **Customizable display**: Lightbox mode, dark mode, and more
 
 ## Installation
@@ -75,7 +74,7 @@ Opens the draw.io editor with XML content.
 
 | Parameter | Type | Required | Description |
 |-----------|------|----------|-------------|
-| `content` | string | Yes | Draw.io XML or URL to XML |
+| `content` | string | Yes | Draw.io XML content |
 | `lightbox` | boolean | No | Read-only view mode (default: false) |
 | `dark` | string | No | "auto", "true", or "false" (default: "auto") |
 
@@ -85,7 +84,7 @@ Opens the draw.io editor with CSV data converted to a diagram.
 
 | Parameter | Type | Required | Description |
 |-----------|------|----------|-------------|
-| `content` | string | Yes | CSV content or URL to CSV |
+| `content` | string | Yes | CSV content |
 | `lightbox` | boolean | No | Read-only view mode (default: false) |
 | `dark` | string | No | "auto", "true", or "false" (default: "auto") |
 
@@ -95,7 +94,7 @@ Opens the draw.io editor with a Mermaid.js diagram.
 
 | Parameter | Type | Required | Description |
 |-----------|------|----------|-------------|
-| `content` | string | Yes | Mermaid syntax or URL |
+| `content` | string | Yes | Mermaid.js syntax |
 | `lightbox` | boolean | No | Read-only view mode (default: false) |
 | `dark` | string | No | "auto", "true", or "false" (default: "auto") |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawio/mcp",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "description": "Official draw.io MCP server for LLMs - Open diagrams in draw.io editor",
   "type": "module",
   "main": "src/index.js",
@@ -36,7 +36,7 @@
     "node": ">=18.0.0"
   },
   "dependencies": {
-    "@modelcontextprotocol/sdk": "1.11.2",
+    "@modelcontextprotocol/sdk": "^1.27.1",
     "pako": "^2.1.0"
   },
   "files": [

package/src/index.js

@@ -4,7 +4,7 @@ import { Server } from "@modelcontextprotocol/sdk/server/index.js";
 import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
 import { ListToolsRequestSchema, CallToolRequestSchema } from "@modelcontextprotocol/sdk/types.js";
 import pako from "pako";
-import { exec } from "child_process";
+import { spawn } from "child_process";
 
 const DRAWIO_BASE_URL = "https://app.diagrams.net/";
 
@@ -13,29 +13,27 @@ const DRAWIO_BASE_URL = "https://app.diagrams.net/";
  */
 function openBrowser(url)
 {
-  const platform = process.platform;
-  let command;
+  let child;
 
-  if (platform === "win32")
+  if (process.platform === "win32")
   {
-    command = `start "" "${url}"`;
+    child = spawn("cmd", ["/c", "start", "", url], { shell: false, stdio: "ignore" });
   }
-  else if (platform === "darwin")
+  else if (process.platform === "darwin")
   {
-    command = `open "${url}"`;
+    child = spawn("open", [url], { shell: false, stdio: "ignore" });
   }
   else
   {
-    command = `xdg-open "${url}"`;
+    child = spawn("xdg-open", [url], { shell: false, stdio: "ignore" });
   }
 
-  exec(command, (error) =>
+  child.on("error", function(error)
   {
-    if (error)
-    {
-      console.error(`Failed to open browser: ${error.message}`);
-    }
+    console.error(`Failed to open browser: ${error.message}`);
   });
+
+  child.unref();
 }
 
 /**
@@ -101,45 +99,27 @@ function generateDrawioUrl(data, type, options = {})
   return DRAWIO_BASE_URL + (paramsStr ? "?" + paramsStr : "") + createHash;
 }
 
-/**
- * Fetches content from a URL
- */
-async function fetchContent(url)
-{
-  const response = await fetch(url);
-  if (!response.ok)
-  {
-    throw new Error(`Failed to fetch ${url}: ${response.status} ${response.statusText}`);
-  }
-  return response.text();
-}
-
-/**
- * Determines if the input is a URL
- */
-function isUrl(input)
-{
-  try
-  {
-    new URL(input);
-    return true;
-  }
-  catch
-  {
-    return false;
-  }
-}
-
 // Define the tools
 const tools =
 [
   {
     name: "open_drawio_xml",
     description:
-      "Opens the draw.io editor with a diagram from XML content or a URL to XML content. " +
+      "Opens the draw.io editor with a diagram from XML content. " +
       "Use this to view, edit, or create diagrams in draw.io format. " +
       "The XML should be valid draw.io/mxGraph XML format. " +
-      "IMPORTANT: Do NOT use double hyphens (--) inside XML comments, as this is invalid XML and will break the parser. Use single hyphens or rephrase instead.",
+      "IMPORTANT: Do NOT use double hyphens (--) inside XML comments, as this is invalid XML and will break the parser. Use single hyphens or rephrase instead. " +
+      "EDGE ROUTING: Use edgeStyle=orthogonalEdgeStyle for right-angle connectors. " +
+      "Space nodes at least 60px apart to avoid overlapping edges. " +
+      "Use exitX/exitY/entryX/entryY (0-1) to control which side of a node an edge connects to, spreading connections across different sides. " +
+      "Add explicit waypoints via <Array as=\"points\"><mxPoint x=\"...\" y=\"...\"/></Array> inside mxGeometry when edges would overlap. " +
+      "CONTAINERS: For architecture diagrams and any diagram with nested elements, use proper parent-child containment (set parent=\"containerId\" on children, use relative coordinates). " +
+      "Container types: (1) group style (style=\"group;\") for invisible containers with no connections - includes pointerEvents=0 so child connections are not captured by the container; " +
+      "(2) swimlane style (style=\"swimlane;startSize=30;\") for labeled containers with a title bar - use when the container needs visual borders/headers or when the container itself has connections; " +
+      "(3) any shape can be a container by adding container=1 to its style, but also add pointerEvents=0 unless the container itself needs to be connectable. " +
+      "Always use pointerEvents=0 on container styles that should not capture connections being rewired between children. " +
+      "LAYOUT: Align nodes to a grid (multiples of 10). Use consistent spacing (e.g., 200px horizontal, 120px vertical between nodes). " +
+      "See https://www.drawio.com/doc/faq/drawio-style-reference.html for the complete style reference.",
     inputSchema:
     {
       type: "object",
@@ -149,8 +129,7 @@ const tools =
         {
           type: "string",
           description:
-            "The draw.io XML content or a URL pointing to XML content. " +
-            "If a URL is provided, the content will be fetched automatically.",
+            "The draw.io XML content in mxGraphModel format.",
         },
         lightbox:
         {
@@ -170,7 +149,7 @@ const tools =
   {
     name: "open_drawio_csv",
     description:
-      "Opens the draw.io editor with a diagram generated from CSV data or a URL to CSV data. " +
+      "Opens the draw.io editor with a diagram generated from CSV data. " +
       "The CSV format should follow draw.io's CSV import specification which allows " +
       "creating org charts, flowcharts, and other diagrams from tabular data.",
     inputSchema:
@@ -182,9 +161,7 @@ const tools =
         {
           type: "string",
           description:
-            "The CSV content or a URL pointing to CSV content. " +
-            "If a URL is provided, the content will be fetched automatically. " +
-            "The CSV should follow draw.io's CSV import format.",
+            "The CSV content following draw.io's CSV import format.",
         },
         lightbox:
         {
@@ -204,7 +181,7 @@ const tools =
   {
     name: "open_drawio_mermaid",
     description:
-      "Opens the draw.io editor with a diagram generated from Mermaid.js syntax or a URL to Mermaid content. " +
+      "Opens the draw.io editor with a diagram generated from Mermaid.js syntax. " +
       "Supports flowcharts, sequence diagrams, class diagrams, state diagrams, " +
       "entity relationship diagrams, and more using Mermaid.js syntax.",
     inputSchema:
@@ -216,8 +193,7 @@ const tools =
         {
           type: "string",
           description:
-            "The Mermaid.js diagram definition or a URL pointing to Mermaid content. " +
-            "If a URL is provided, the content will be fetched automatically. " +
+            "The Mermaid.js diagram definition. " +
             "Example: 'graph TD; A-->B; B-->C;'",
         },
         lightbox:
@@ -286,15 +262,7 @@ server.setRequestHandler(CallToolRequestSchema, async (request) =>
       };
     }
 
-    // Fetch content if it's a URL
-    if (isUrl(inputContent))
-    {
-      content = await fetchContent(inputContent);
-    }
-    else
-    {
-      content = inputContent;
-    }
+    content = inputContent;
 
     switch (name)
     {