drawio-mcp-server 1.6.0 → 1.8.0

package/build/assets/downloader.js

@@ -0,0 +1,96 @@
+import { createWriteStream, existsSync, mkdirSync, createReadStream, rmSync, } from "node:fs";
+import { pipeline } from "node:stream/promises";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { Extract } from "unzipper";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const DRAWIO_GITHUB_API = "https://api.github.com/repos/jgraph/drawio/releases/latest";
+export async function getLatestWarUrl() {
+    const response = await fetch(DRAWIO_GITHUB_API);
+    if (!response.ok) {
+        throw new Error(`Failed to get draw.io release info: ${response.status}`);
+    }
+    const data = await response.json();
+    const warAsset = data.assets?.find((asset) => asset.name === "draw.war");
+    if (!warAsset) {
+        throw new Error("Could not find draw.war in latest release");
+    }
+    return warAsset.browser_download_url;
+}
+export async function downloadFile(url, destPath) {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Failed to download: ${response.status} ${response.statusText}`);
+    }
+    if (!response.body) {
+        throw new Error("No response body");
+    }
+    const destDir = dirname(destPath);
+    if (!existsSync(destDir)) {
+        mkdirSync(destDir, { recursive: true });
+    }
+    await pipeline(response.body, createWriteStream(destPath));
+}
+export async function extractWar(warPath, extractDir) {
+    if (!existsSync(extractDir)) {
+        mkdirSync(extractDir, { recursive: true });
+    }
+    return new Promise((resolve, reject) => {
+        const extract = Extract({ path: extractDir });
+        const stream = createReadStream(warPath);
+        stream.pipe(extract);
+        extract.on("close", resolve);
+        extract.on("error", reject);
+    });
+}
+export function cleanupExtractedFiles(extractDir) {
+    const webappDir = join(extractDir, "webapp");
+    const pathsToRemove = [
+        join(webappDir, "WEB-INF"),
+        join(webappDir, "META-INF"),
+    ];
+    for (const path of pathsToRemove) {
+        if (existsSync(path)) {
+            try {
+                rmSync(path, { recursive: true, force: true });
+                console.log(`Removed: ${path}`);
+            }
+            catch (err) {
+                console.warn(`Failed to remove ${path}:`, err);
+            }
+        }
+    }
+}
+export async function downloadAndExtractAssets(targetDir, onProgress) {
+    const progress = onProgress || console.log;
+    progress("Fetching draw.io release info...");
+    const warUrl = await getLatestWarUrl();
+    const warPath = join(targetDir, "draw.war");
+    progress(`Downloading draw.war from ${warUrl}...`);
+    await downloadFile(warUrl, warPath);
+    progress("Download complete.");
+    const webappDir = join(targetDir, "webapp");
+    progress("Extracting archive...");
+    await extractWar(warPath, webappDir);
+    progress("Extraction complete.");
+    progress("Cleaning up unnecessary files...");
+    cleanupExtractedFiles(targetDir);
+    // Remove the WAR file
+    try {
+        rmSync(warPath, { force: true });
+    }
+    catch (err) {
+        console.warn("Failed to remove WAR file:", err);
+    }
+    progress("Assets ready!");
+}
+export async function ensureAssets(config, onProgress) {
+    const { getCacheDir, getAssetRoot, assetsExist } = await import("./manager.js");
+    const cacheDir = getCacheDir(config.assetPath);
+    const assetRoot = getAssetRoot(config);
+    if (!assetsExist(config)) {
+        console.log(`Assets not found in ${assetRoot}. Downloading...`);
+        await downloadAndExtractAssets(cacheDir, onProgress);
+    }
+    return { assetRoot, isLocal: true };
+}

package/build/assets/index.js

@@ -0,0 +1,2 @@
+export { DEFAULT_CACHE_NAME, getCacheDir, getAssetRoot, assetsExist, getLocalPluginPath, isUsingLocalAssets, } from "./manager.js";
+export { getLatestWarUrl, downloadFile, extractWar, cleanupExtractedFiles, downloadAndExtractAssets, ensureAssets, } from "./downloader.js";

package/build/assets/manager.js

@@ -0,0 +1,31 @@
+import cachedir from "cachedir";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { existsSync } from "node:fs";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+export const DEFAULT_CACHE_NAME = "drawio-mcp-server";
+export function getCacheDir(customPath) {
+    if (customPath) {
+        return customPath;
+    }
+    const dir = cachedir(DEFAULT_CACHE_NAME);
+    if (!dir) {
+        throw new Error("Could not determine cache directory. Use --asset-path to specify one.");
+    }
+    return dir;
+}
+export function getAssetRoot(config) {
+    const cacheDir = getCacheDir(config.assetPath);
+    return join(cacheDir, "webapp");
+}
+export function assetsExist(config) {
+    const assetRoot = getAssetRoot(config);
+    const indexPath = join(assetRoot, "index.html");
+    return existsSync(indexPath);
+}
+export function getLocalPluginPath() {
+    return join(__dirname, "..", "..", "build", "plugin", "mcp-plugin.js");
+}
+export function isUsingLocalAssets(config) {
+    return assetsExist(config);
+}

package/build/config.js

@@ -1,3 +1,6 @@
+/**
+ * Application configuration interface
+ */
 /**
  * Default configuration values
  */
@@ -5,6 +8,7 @@ const DEFAULT_CONFIG = {
     extensionPort: 3333,
     httpPort: 3000,
     transports: ["stdio"],
+    editorEnabled: false,
 };
 /**
  * Valid port range
@@ -97,6 +101,8 @@ export const parseConfig = (args) => {
     let httpPortValue;
     let parsedHttpPort;
     let transportValues;
+    let editorEnabled = false;
+    let assetPath;
     for (let i = 0; i < args.length; i += 1) {
         const arg = args[i];
         if (arg === "--extension-port" || arg === "-p") {
@@ -123,6 +129,31 @@ export const parseConfig = (args) => {
             transportValues = [nextValue];
             i += 1;
         }
+        else if (arg === "--editor" || arg === "-e") {
+            const nextValue = args[i + 1];
+            if (nextValue !== undefined &&
+                (nextValue === "false" || nextValue === "true")) {
+                editorEnabled = nextValue === "true";
+                i += 1;
+            }
+            else {
+                editorEnabled = true;
+            }
+        }
+        else if (arg === "--editor=true") {
+            editorEnabled = true;
+        }
+        else if (arg === "--editor=false") {
+            editorEnabled = false;
+        }
+        else if (arg === "--asset-path") {
+            const nextValue = args[i + 1];
+            if (nextValue === undefined) {
+                return new Error("--asset-path flag requires a path");
+            }
+            assetPath = nextValue;
+            i += 1;
+        }
     }
     if (httpPortValue !== undefined) {
         const httpPort = parseHttpPortValue(httpPortValue);
@@ -145,6 +176,8 @@ export const parseConfig = (args) => {
             extensionPort,
             httpPort: parsedHttpPort !== undefined ? parsedHttpPort : DEFAULT_CONFIG.httpPort,
             transports,
+            editorEnabled,
+            assetPath,
         };
     }
     if (httpPortValue !== undefined) {
@@ -156,6 +189,8 @@ export const parseConfig = (args) => {
             ...DEFAULT_CONFIG,
             httpPort: parsedHttpPort,
             transports,
+            editorEnabled,
+            assetPath,
         };
     }
     const transports = parseTransports(transportValues);
@@ -166,6 +201,8 @@ export const parseConfig = (args) => {
     return {
         ...DEFAULT_CONFIG,
         transports,
+        editorEnabled,
+        assetPath,
     };
 };
 /**
@@ -177,3 +214,11 @@ export const buildConfig = () => {
     const args = process.argv.slice(2);
     return parseConfig(args);
 };
+export function getHttpFeatureConfig(config) {
+    return {
+        enableMcp: config.transports.includes("http"),
+        enableEditor: config.editorEnabled,
+        enableHealth: true,
+        enableConfig: true,
+    };
+}

package/build/config.test.js

@@ -114,6 +114,7 @@ describe("parseConfig", () => {
             extensionPort: 3333,
             httpPort: 3000,
             transports: ["stdio"],
+            editorEnabled: false,
         });
     });
     test("--extension-port flag sets custom port", () => {
@@ -121,6 +122,7 @@ describe("parseConfig", () => {
             extensionPort: 8080,
             httpPort: 3000,
             transports: ["stdio"],
+            editorEnabled: false,
         });
     });
     test("-p flag sets custom port", () => {
@@ -128,6 +130,7 @@ describe("parseConfig", () => {
             extensionPort: 8080,
             httpPort: 3000,
             transports: ["stdio"],
+            editorEnabled: false,
         });
     });
     test("--http-port flag sets custom port", () => {
@@ -135,6 +138,7 @@ describe("parseConfig", () => {
             extensionPort: 3333,
             httpPort: 4242,
             transports: ["stdio"],
+            editorEnabled: false,
         });
     });
     test("both ports can be configured", () => {
@@ -142,6 +146,7 @@ describe("parseConfig", () => {
             extensionPort: 8080,
             httpPort: 4242,
             transports: ["stdio"],
+            editorEnabled: false,
         });
     });
     test("help flag is ignored in config parsing", () => {
@@ -149,6 +154,7 @@ describe("parseConfig", () => {
             extensionPort: 3333,
             httpPort: 3000,
             transports: ["stdio"],
+            editorEnabled: false,
         });
     });
     test("invalid port returns Error", () => {
@@ -176,6 +182,7 @@ describe("parseConfig", () => {
             extensionPort: 9090,
             httpPort: 3000,
             transports: ["stdio"],
+            editorEnabled: false,
         });
     });
     test("short and long form both work, last wins", () => {
@@ -183,6 +190,7 @@ describe("parseConfig", () => {
             extensionPort: 9090,
             httpPort: 3000,
             transports: ["stdio"],
+            editorEnabled: false,
         });
     });
     test("last http-port flag wins", () => {
@@ -190,6 +198,7 @@ describe("parseConfig", () => {
             extensionPort: 3333,
             httpPort: 5000,
             transports: ["stdio"],
+            editorEnabled: false,
         });
     });
     test("sets single transport", () => {
@@ -197,6 +206,7 @@ describe("parseConfig", () => {
             extensionPort: 3333,
             httpPort: 3000,
             transports: ["stdio"],
+            editorEnabled: false,
         });
     });
     test("sets multiple transports", () => {
@@ -204,12 +214,53 @@ describe("parseConfig", () => {
             extensionPort: 3333,
             httpPort: 3000,
             transports: ["stdio", "http"],
+            editorEnabled: false,
         });
     });
     test("rejects unknown transport", () => {
         const result = parseConfig(["--transport", "foo"]);
         expect(result).toBeInstanceOf(Error);
     });
+    test("--editor flag enables editor", () => {
+        expect(parseConfig(["--editor"])).toEqual({
+            extensionPort: 3333,
+            httpPort: 3000,
+            transports: ["stdio"],
+            editorEnabled: true,
+        });
+    });
+    test("-e flag enables editor", () => {
+        expect(parseConfig(["-e"])).toEqual({
+            extensionPort: 3333,
+            httpPort: 3000,
+            transports: ["stdio"],
+            editorEnabled: true,
+        });
+    });
+    test("--editor false disables editor explicitly", () => {
+        expect(parseConfig(["--editor", "false"])).toEqual({
+            extensionPort: 3333,
+            httpPort: 3000,
+            transports: ["stdio"],
+            editorEnabled: false,
+        });
+    });
+    test("--editor=true enables editor", () => {
+        expect(parseConfig(["--editor=true"])).toEqual({
+            extensionPort: 3333,
+            httpPort: 3000,
+            transports: ["stdio"],
+            editorEnabled: true,
+        });
+    });
+    test("--editor=false disables editor explicitly", () => {
+        expect(parseConfig(["--editor=false"])).toEqual({
+            extensionPort: 3333,
+            httpPort: 3000,
+            transports: ["stdio"],
+            editorEnabled: false,
+        });
+    });
 });
 describe("buildConfig", () => {
     const originalArgv = process.argv;
@@ -223,6 +274,7 @@ describe("buildConfig", () => {
             extensionPort: 3333,
             httpPort: 3000,
             transports: ["stdio"],
+            editorEnabled: false,
         });
     });
     test("parses custom port from argv", () => {
@@ -232,6 +284,7 @@ describe("buildConfig", () => {
             extensionPort: 8080,
             httpPort: 3000,
             transports: ["stdio"],
+            editorEnabled: false,
         });
     });
     test("parses custom http port from argv", () => {
@@ -241,6 +294,7 @@ describe("buildConfig", () => {
             extensionPort: 3333,
             httpPort: 4242,
             transports: ["stdio"],
+            editorEnabled: false,
         });
     });
     test("returns Error for invalid config", () => {

package/build/index.js

@@ -8,31 +8,42 @@ import { Hono } from "hono";
 import { cors } from "hono/cors";
 import EventEmitter from "node:events";
 import { createServer } from "node:net";
+import { join } from "node:path";
+import { readFileSync, existsSync, statSync, readdirSync } from "node:fs";
 import { WebSocket, WebSocketServer } from "ws";
-import { buildConfig, shouldShowHelp } from "./config.js";
+import { buildConfig, shouldShowHelp, getHttpFeatureConfig, } from "./config.js";
 import { bus_reply_stream, bus_request_stream, } from "./types.js";
 import { create_bus } from "./emitter_bus.js";
 import { default_tool } from "./tool.js";
 import { nanoid_id_generator } from "./nanoid_id_generator.js";
 import { create_logger as create_console_logger } from "./mcp_console_logger.js";
 import { create_logger as create_server_logger, validLogLevels, } from "./mcp_server_logger.js";
+import { getLocalPluginPath, isUsingLocalAssets, getAssetRoot, ensureAssets, } from "./assets/index.js";
+const VERSION = "1.8.0";
 /**
  * Display help message and exit
  */
 function showHelp() {
     console.log(`
-Draw.io MCP Server
+Draw.io MCP Server (${VERSION})
 
 Usage: drawio-mcp-server [options]
 
 Options:
   --extension-port, -p <number>  WebSocket server port for browser extension (default: 3333)
+  --editor, -e                   Enable draw.io editor endpoint
+  --http-port                    HTTP server port for Streamable HTTP transport (default: 3000)
+  --transport                    Transport type: stdio, http (default: stdio)
+  --asset-path <path>           Custom path for downloaded assets
   --help, -h                     Show this help message
 
 Examples:
   drawio-mcp-server                           # Use default extension port 3333
   drawio-mcp-server --extension-port 8080     # Use custom extension port 8080
   drawio-mcp-server -p 8080                   # Short form
+  drawio-mcp-server --editor                  # Enable draw.io editor endpoint
+  drawio-mcp-server -e --http                 # Enable editor and HTTP transport
+  drawio-mcp-server --editor --asset-path /data/assets # Use custom asset path
   `);
     process.exit(0);
 }
@@ -66,7 +77,7 @@ const bus_to_ws_forwarder_listener = (event) => {
 };
 emitter.on(bus_request_stream, bus_to_ws_forwarder_listener);
 async function start_websocket_server(extensionPort) {
-    log.debug(`Draw.io MCP Server starting (WebSocket extension port: ${extensionPort})`);
+    log.debug(`Draw.io MCP Server (${VERSION}) starting (WebSocket extension port: ${extensionPort})`);
     const isPortAvailable = await checkPortAvailable(extensionPort);
     if (!isPortAvailable) {
         console.error(`[start_websocket_server] Error: Port ${extensionPort} is already in use. Please stop the process using this port and try again.`);
@@ -122,7 +133,7 @@ if (logger_type === "mcp_server") {
 // Create server instance
 const server = new McpServer({
     name: "drawio-mcp-server",
-    version: "1.6.0",
+    version: VERSION,
 }, {
     capabilities,
 });
@@ -332,6 +343,18 @@ server.tool(TOOL_list_paged_model, "Retrieves a paginated view of all cells (ver
             .enum(["edge", "vertex", "object", "layer", "group"])
             .optional()
             .describe("Filter by cell type: 'edge' for connection lines, 'vertex' for vertices/shapes, 'object' for any cell type, 'layer' for layer cells, 'group' for grouped cells"),
+        parent_ids: z
+            .array(z.string())
+            .optional()
+            .describe("Filter cells to only those whose parent is one of the specified parent IDs."),
+        layer_ids: z
+            .array(z.string())
+            .optional()
+            .describe("Filter cells to only those whose parent is one of the specified layer IDs. Alias for parent_ids."),
+        ids: z
+            .array(z.string())
+            .optional()
+            .describe("Filter cells to only those whose ID is one of the specified IDs."),
         attributes: Attributes.optional().describe('Boolean logic array expressions for filtering cell attributes. Format: ["and" | "or", ...expressions] or ["equal", key, value]. Matches against cell attributes and parsed style properties.'),
     })
         .optional()
@@ -362,12 +385,7 @@ async function start_stdio_transport() {
     await server.connect(transport);
     log.debug(`Draw.io MCP Server STDIO transport active`);
 }
-async function start_streamable_http_transport(http_port) {
-    // Create a stateless transport (no options = no session management)
-    const transport = new WebStandardStreamableHTTPServerTransport();
-    // Create the Hono app
-    const app = new Hono();
-    // Enable CORS for all origins
+function setupCors(app) {
     app.use("*", cors({
         origin: "*",
         allowMethods: ["GET", "POST", "DELETE", "OPTIONS"],
@@ -379,16 +397,125 @@ async function start_streamable_http_transport(http_port) {
         ],
         exposeHeaders: ["mcp-session-id", "mcp-protocol-version"],
     }));
+}
+function registerHealthRoute(app) {
     app.get("/health", (c) => c.json({ status: server.isConnected() ? "ok" : "mcp not ready" }));
+}
+function registerConfigRoute(app, config) {
+    app.get("/api/config", (c) => c.json({
+        websocketPort: config.extensionPort,
+        serverUrl: `http://localhost:${config.httpPort}`,
+    }));
+}
+function registerEditorRoutes(app, config) {
+    const assetConfig = {
+        assetPath: config.assetPath,
+    };
+    const isLocal = isUsingLocalAssets(assetConfig);
+    const assetRoot = isLocal ? getAssetRoot(assetConfig) : null;
+    const localPluginPath = getLocalPluginPath();
+    app.get("/js/mcp-plugin.js", (c) => {
+        if (existsSync(localPluginPath)) {
+            const content = readFileSync(localPluginPath);
+            c.header("Content-Type", "application/javascript");
+            return c.body(content);
+        }
+        return c.text("Plugin not found", 404);
+    });
+    app.use("/*", async (c, next) => {
+        let path = c.req.path;
+        if (path === "" || path === "/") {
+            path = "index.html";
+        }
+        if (!isLocal || !assetRoot) {
+            await next();
+            return;
+        }
+        let filePath = join(assetRoot, path);
+        if (existsSync(filePath)) {
+            const fileStats = statSync(filePath);
+            if (fileStats.isDirectory()) {
+                const normalizedPath = path.endsWith("/") ? path.slice(0, -1) : path;
+                const parentDir = join(assetRoot, normalizedPath);
+                if (existsSync(parentDir) && statSync(parentDir).isDirectory()) {
+                    const entries = readdirSync(parentDir);
+                    const firstFile = entries.find((e) => !statSync(join(parentDir, e)).isDirectory());
+                    if (firstFile) {
+                        filePath = join(parentDir, firstFile);
+                    }
+                    else {
+                        await next();
+                        return;
+                    }
+                }
+                else {
+                    await next();
+                    return;
+                }
+            }
+            let content = readFileSync(filePath);
+            const ext = filePath.split(".").pop()?.toLowerCase();
+            if (ext === "html") {
+                const contentStr = content.toString("utf-8");
+                if (contentStr.includes("</body>") &&
+                    !contentStr.includes("mcp-plugin.js")) {
+                    const pluginScript = `<script src="/js/mcp-plugin.js"></script>`;
+                    content = Buffer.from(contentStr.replace("</body>", `${pluginScript}</body>`));
+                }
+            }
+            const contentTypes = {
+                html: "text/html",
+                css: "text/css",
+                js: "application/javascript",
+                json: "application/json",
+                svg: "image/svg+xml",
+                png: "image/png",
+                ico: "image/x-icon",
+                map: "application/json",
+            };
+            c.header("Content-Type", contentTypes[ext || ""] || "text/plain");
+            return c.body(content);
+        }
+        await next();
+    });
+    app.get("/", (c) => {
+        return c.redirect("/index.html?offline=1&local=1");
+    });
+    log.debug(`Draw.io editor enabled at: http://localhost:${config.httpPort}/`);
+}
+function registerMcpRoute(app) {
+    const transport = new WebStandardStreamableHTTPServerTransport();
     app.all("/mcp", (c) => transport.handleRequest(c.req.raw));
-    await server.connect(transport);
+    return transport;
+}
+function createHttpApp(config, features) {
+    const app = new Hono();
+    setupCors(app);
+    if (features.enableHealth)
+        registerHealthRoute(app);
+    if (features.enableConfig)
+        registerConfigRoute(app, config);
+    const mcpTransport = features.enableMcp ? registerMcpRoute(app) : undefined;
+    if (features.enableEditor)
+        registerEditorRoutes(app, config);
+    return { app, mcpTransport };
+}
+async function startHttpServer(httpPort, config, features) {
+    const { app, mcpTransport } = createHttpApp(config, features);
+    if (mcpTransport) {
+        await server.connect(mcpTransport);
+    }
     serve({
         fetch: app.fetch,
-        port: http_port,
+        port: httpPort,
     });
-    log.debug(`Draw.io MCP Server Streamable HTTP transport active`);
-    log.debug(`Health check: http://localhost:${http_port}/health`);
-    log.debug(`MCP endpoint: http://localhost:${http_port}/mcp`);
+    log.debug(`Draw.io MCP Server HTTP active on port ${httpPort}`);
+    if (features.enableMcp) {
+        log.debug(`MCP endpoint: http://localhost:${httpPort}/mcp`);
+    }
+    if (features.enableEditor) {
+        log.debug(`Editor: http://localhost:${httpPort}/`);
+    }
 }
 async function main() {
     // Check if help was requested (before parsing config)
@@ -404,13 +531,21 @@ async function main() {
         process.exit(1);
     }
     const config = configResult;
+    const features = getHttpFeatureConfig(config);
+    // Initialize assets if needed
+    if (features.enableEditor) {
+        console.log("Initializing draw.io assets...");
+        const assetConfig = {
+            assetPath: config.assetPath,
+        };
+        await ensureAssets(assetConfig, (msg) => console.log(msg));
+        console.log("Assets ready!");
+    }
     await start_websocket_server(config.extensionPort);
     if (config.transports.indexOf("stdio") > -1) {
         await start_stdio_transport();
     }
-    if (config.transports.indexOf("http") > -1) {
-        start_streamable_http_transport(config.httpPort);
-    }
+    startHttpServer(config.httpPort, config, features);
     log.debug(`Draw.io MCP Server running on ${config.transports}`);
 }
 main().catch((error) => {