drawio-mcp-server 1.7.0 → 2.0.3

package/build/tools/export-diagram.js

@@ -0,0 +1,96 @@
+import { writeFileSync, existsSync } from "node:fs";
+import { z } from "zod";
+import { export_tool_handler } from "../tool.js";
+export const TOOL_export_diagram = "export-diagram";
+export const registerExportDiagramTool = (server, context) => {
+    server.tool(TOOL_export_diagram, "Export the current diagram as SVG, PNG, or XML. Returns the diagram data as base64 (PNG) or text (SVG/XML). Optionally saves to a file.", {
+        format: z
+            .enum(["svg", "png", "xml"])
+            .describe("Export format: svg for vector graphics, png for raster image, xml for raw diagram data"),
+        scale: z
+            .number()
+            .optional()
+            .default(1)
+            .describe("Zoom factor for the export (1 = 100%)"),
+        border: z
+            .number()
+            .optional()
+            .default(0)
+            .describe("Border width in pixels around the diagram"),
+        background: z
+            .string()
+            .optional()
+            .default("#ffffff")
+            .describe("Background color in hex format (e.g., #ffffff)"),
+        shadow: z
+            .boolean()
+            .optional()
+            .default(false)
+            .describe("Include shadow effects in the export"),
+        crop: z
+            .boolean()
+            .optional()
+            .default(true)
+            .describe("Crop the export to diagram bounds (true) or full page (false)"),
+        selection_only: z
+            .boolean()
+            .optional()
+            .default(false)
+            .describe("Export only the currently selected cells"),
+        transparent: z
+            .boolean()
+            .optional()
+            .default(false)
+            .describe("Use transparent background (overrides background color)"),
+        dpi: z
+            .number()
+            .optional()
+            .default(96)
+            .describe("DPI for PNG export (affects quality)"),
+        embed_xml: z
+            .boolean()
+            .optional()
+            .default(false)
+            .describe("Embed the diagram XML data in SVG/PNG so it can be reopened in draw.io"),
+        size: z
+            .enum(["selection", "page", "diagram"])
+            .optional()
+            .default("diagram")
+            .describe("What to export: 'selection' for selected cells only, 'page' for current page, 'diagram' for entire model"),
+        output_path: z
+            .string()
+            .optional()
+            .describe("Absolute file path to save the exported file (must be an absolute path)"),
+    }, async (args, _extra) => {
+        const exportHandler = export_tool_handler(TOOL_export_diagram, context);
+        const result = await exportHandler(args, _extra);
+        if (args.output_path) {
+            const path = await import("node:path");
+            if (!path.isAbsolute(args.output_path)) {
+                throw new Error("output_path must be an absolute path");
+            }
+            const dir = path.dirname(args.output_path);
+            if (!existsSync(dir)) {
+                throw new Error(`Directory does not exist: ${dir}`);
+            }
+            const exportContent = result.content;
+            if (args.format === "png") {
+                const imageContent = exportContent.find((c) => c.type === "image");
+                if (imageContent) {
+                    writeFileSync(args.output_path, Buffer.from(imageContent.data, "base64"));
+                }
+            }
+            else {
+                const textContent = exportContent.find((c) => c.type === "text");
+                if (textContent) {
+                    writeFileSync(args.output_path, textContent.text, "utf-8");
+                }
+            }
+            result.content.push({
+                type: "text",
+                text: `Saved to: ${args.output_path}`,
+            });
+        }
+        return result;
+    });
+};

package/build/tools/get-active-layer.js

@@ -0,0 +1,5 @@
+import { default_tool } from "../tool.js";
+export const TOOL_get_active_layer = "get-active-layer";
+export const registerGetActiveLayerTool = (server, context) => {
+    server.tool(TOOL_get_active_layer, "Gets the currently active layer information.", {}, default_tool(TOOL_get_active_layer, context));
+};

package/build/tools/get-selected-cell.js

@@ -0,0 +1,5 @@
+import { default_tool } from "../tool.js";
+export const TOOL_get_selected_cell = "get-selected-cell";
+export const registerGetSelectedCellTool = (server, context) => {
+    server.tool(TOOL_get_selected_cell, "This tool allows you to retrieve selected cell (whether vertex or edge) on the current page of a Draw.io diagram. The response is a JSON containing attributes of the cell.", {}, default_tool(TOOL_get_selected_cell, context));
+};

package/build/tools/get-shape-by-name.js

@@ -0,0 +1,10 @@
+import { z } from "zod";
+import { default_tool } from "../tool.js";
+export const TOOL_get_shape_by_name = "get-shape-by-name";
+export const registerGetShapeByNameTool = (server, context) => {
+    server.tool(TOOL_get_shape_by_name, "Retrieve a specific shape by its name from all available shapes in the diagram's library. It returns the shape and also the category it belongs.", {
+        shape_name: z
+            .string()
+            .describe("Name of the shape to retrieve from the shape library of the current diagram."),
+    }, default_tool(TOOL_get_shape_by_name, context));
+};

package/build/tools/get-shape-categories.js

@@ -0,0 +1,5 @@
+import { default_tool } from "../tool.js";
+export const TOOL_get_shape_categories = "get-shape-categories";
+export const registerGetShapeCategoriesTool = (server, context) => {
+    server.tool(TOOL_get_shape_categories, "Retrieves available shape categories from the diagram's library. Library is split into multiple categories.", {}, default_tool(TOOL_get_shape_categories, context));
+};

package/build/tools/get-shapes-in-category.js

@@ -0,0 +1,10 @@
+import { z } from "zod";
+import { default_tool } from "../tool.js";
+export const TOOL_get_shapes_in_category = "get-shapes-in-category";
+export const registerGetShapesInCategoryTool = (server, context) => {
+    server.tool(TOOL_get_shapes_in_category, "Retrieve all shapes in the provided category from the diagram's library. A shape primarily contains `style` based on which you can create new vertex cells.", {
+        category_id: z
+            .string()
+            .describe("Identifier (ID / key) of the category from which all the shapes should be retrieved."),
+    }, default_tool(TOOL_get_shapes_in_category, context));
+};

package/build/tools/import-diagram.js

@@ -0,0 +1,22 @@
+import { z } from "zod";
+import { default_tool } from "../tool.js";
+export const TOOL_import_diagram = "import-diagram";
+export const registerImportDiagramTool = (server, context) => {
+    server.tool(TOOL_import_diagram, "Import a diagram from XML, SVG with embedded XML, or PNG with embedded XML into the current Draw.io instance.", {
+        data: z
+            .string()
+            .describe("The diagram data: raw XML string, or base64-encoded SVG/PNG with embedded XML"),
+        format: z
+            .enum(["xml", "svg", "png"])
+            .describe("Input format: xml for raw Draw.io XML, svg for SVG with embedded XML, png for PNG with embedded XML"),
+        mode: z
+            .enum(["replace", "add", "new-page"])
+            .optional()
+            .default("replace")
+            .describe("Import mode: replace clears current diagram and loads new one, add merges imported cells into current diagram, new-page creates a new page with imported diagram"),
+        filename: z
+            .string()
+            .optional()
+            .describe("Optional original filename for context"),
+    }, default_tool(TOOL_import_diagram, context));
+};

package/build/tools/index.js

@@ -0,0 +1,49 @@
+import { registerAddCellOfShapeTool } from "./add-cell-of-shape.js";
+import { registerAddEdgeTool } from "./add-edge.js";
+import { registerAddRectangleTool } from "./add-rectangle.js";
+import { registerCreateLayerTool } from "./create-layer.js";
+import { registerDeleteCellByIdTool } from "./delete-cell-by-id.js";
+import { registerEditCellTool } from "./edit-cell.js";
+import { registerEditEdgeTool } from "./edit-edge.js";
+import { registerExportDiagramTool } from "./export-diagram.js";
+import { registerGetActiveLayerTool } from "./get-active-layer.js";
+import { registerGetSelectedCellTool } from "./get-selected-cell.js";
+import { registerGetShapeByNameTool } from "./get-shape-by-name.js";
+import { registerGetShapeCategoriesTool } from "./get-shape-categories.js";
+import { registerGetShapesInCategoryTool } from "./get-shapes-in-category.js";
+import { registerImportDiagramTool } from "./import-diagram.js";
+import { registerListLayersTool } from "./list-layers.js";
+import { registerListPagedModelTool } from "./list-paged-model.js";
+import { registerMoveCellToLayerTool } from "./move-cell-to-layer.js";
+import { registerSetActiveLayerTool } from "./set-active-layer.js";
+import { registerSetCellDataTool } from "./set-cell-data.js";
+import { registerSetCellParentTool } from "./set-cell-parent.js";
+import { registerSetCellShapeTool } from "./set-cell-shape.js";
+const registrars = [
+    registerGetSelectedCellTool,
+    registerAddRectangleTool,
+    registerAddEdgeTool,
+    registerDeleteCellByIdTool,
+    registerGetShapeCategoriesTool,
+    registerGetShapesInCategoryTool,
+    registerGetShapeByNameTool,
+    registerAddCellOfShapeTool,
+    registerSetCellShapeTool,
+    registerSetCellDataTool,
+    registerEditCellTool,
+    registerEditEdgeTool,
+    registerListPagedModelTool,
+    registerListLayersTool,
+    registerSetActiveLayerTool,
+    registerMoveCellToLayerTool,
+    registerSetCellParentTool,
+    registerGetActiveLayerTool,
+    registerCreateLayerTool,
+    registerExportDiagramTool,
+    registerImportDiagramTool,
+];
+export function registerTools(...args) {
+    for (const register of registrars) {
+        register(...args);
+    }
+}

package/build/tools/list-layers.js

@@ -0,0 +1,5 @@
+import { default_tool } from "../tool.js";
+export const TOOL_list_layers = "list-layers";
+export const registerListLayersTool = (server, context) => {
+    server.tool(TOOL_list_layers, "Lists all available layers in the diagram with their IDs and names.", {}, default_tool(TOOL_list_layers, context));
+};

package/build/tools/list-paged-model.js

@@ -0,0 +1,41 @@
+import { z } from "zod";
+import { default_tool } from "../tool.js";
+import { Attributes } from "./shared.js";
+export const TOOL_list_paged_model = "list-paged-model";
+export const registerListPagedModelTool = (server, context) => {
+    server.tool(TOOL_list_paged_model, "Retrieves a paginated view of all cells (vertices and edges) in the current Draw.io diagram. This tool provides access to the complete model data with essential fields only, sanitized to remove circular dependencies and excessive data. It allows to filter based on multiple criteria and attribute boolean logic. Useful for programmatic inspection of diagram structure without overwhelming response sizes.", {
+        page: z
+            .number()
+            .optional()
+            .describe("Zero-based page number for pagination. Page 0 returns the first batch of cells, page 1 returns the next batch, etc. Default is 0.")
+            .default(0),
+        page_size: z
+            .number()
+            .optional()
+            .describe("Maximum number of cells to return in a single page. Controls response size and performance. Must be between 1 and 1000. Default is 50.")
+            .default(50),
+        filter: z
+            .object({
+            cell_type: z
+                .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()
+            .describe("Optional filter criteria to apply to cells before pagination")
+            .default({}),
+    }, default_tool(TOOL_list_paged_model, context));
+};

package/build/tools/move-cell-to-layer.js

@@ -0,0 +1,11 @@
+import { z } from "zod";
+import { default_tool } from "../tool.js";
+export const TOOL_move_cell_to_layer = "move-cell-to-layer";
+export const registerMoveCellToLayerTool = (server, context) => {
+    server.tool(TOOL_move_cell_to_layer, "Moves a cell from its current layer to a target layer.", {
+        cell_id: z.string().describe("ID of the cell to move"),
+        target_layer_id: z
+            .string()
+            .describe("ID of the target layer where the cell will be moved"),
+    }, default_tool(TOOL_move_cell_to_layer, context));
+};

package/build/tools/set-active-layer.js

@@ -0,0 +1,8 @@
+import { z } from "zod";
+import { default_tool } from "../tool.js";
+export const TOOL_set_active_layer = "set-active-layer";
+export const registerSetActiveLayerTool = (server, context) => {
+    server.tool(TOOL_set_active_layer, "Sets the active layer for creating new elements. All subsequent element creation will happen in this layer.", {
+        layer_id: z.string().describe("ID of the layer to set as active"),
+    }, default_tool(TOOL_set_active_layer, context));
+};

package/build/tools/set-cell-data.js

@@ -0,0 +1,14 @@
+import { z } from "zod";
+import { default_tool } from "../tool.js";
+export const TOOL_set_cell_data = "set-cell-data";
+export const registerSetCellDataTool = (server, context) => {
+    server.tool(TOOL_set_cell_data, "Sets or updates a custom attribute on an existing cell.", {
+        cell_id: z
+            .string()
+            .describe("Identifier (`id` attribute) of the cell to update with custom data."),
+        key: z.string().describe("Name of the attribute to set on the cell."),
+        value: z
+            .union([z.string(), z.number(), z.boolean()])
+            .describe("Value to store for the attribute. Non-string values are stringified before storage."),
+    }, default_tool(TOOL_set_cell_data, context));
+};

package/build/tools/set-cell-parent.js

@@ -0,0 +1,9 @@
+import { z } from "zod";
+import { default_tool } from "../tool.js";
+export const TOOL_set_cell_parent = "set-cell-parent";
+export const registerSetCellParentTool = (server, context) => {
+    server.tool(TOOL_set_cell_parent, "Sets the parent of a cell, making it a child of the specified parent cell. This allows creating hierarchical relationships where moving the parent also moves its children.", {
+        cell_id: z.string().describe("ID of the cell to reparent"),
+        parent_id: z.string().describe("ID of the new parent cell"),
+    }, default_tool(TOOL_set_cell_parent, context));
+};

package/build/tools/set-cell-shape.js

@@ -0,0 +1,13 @@
+import { z } from "zod";
+import { default_tool } from "../tool.js";
+export const TOOL_set_cell_shape = "set-cell-shape";
+export const registerSetCellShapeTool = (server, context) => {
+    server.tool(TOOL_set_cell_shape, "Updates the visual style of an existing vertex cell to match a library shape by name.", {
+        cell_id: z
+            .string()
+            .describe("Identifier (`id` attribute) of the cell whose shape should change."),
+        shape_name: z
+            .string()
+            .describe("Name of the library shape whose style should be applied to the existing cell."),
+    }, default_tool(TOOL_set_cell_shape, context));
+};

package/build/tools/shared.js

@@ -0,0 +1,7 @@
+import { z } from "zod";
+export const Attributes = z.lazy(() => z
+    .array(z.union([z.string(), Attributes]))
+    .refine((arr) => arr.length === 0 || typeof arr[0] === "string", {
+    message: "If not empty, the first element must be a string operator",
+})
+    .default([]));

package/build/tools/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,26 +1,11 @@
 {
   "name": "drawio-mcp-server",
-  "version": "1.7.0",
+  "version": "2.0.3",
   "description": "Provides Draw.io services to MCP Clients",
   "type": "module",
-  "main": "index.js",
+  "main": "build/index.js",
   "bin": {
-    "drawio-mcp-server": "./build/index.js"
-  },
-  "scripts": {
-    "build": "tsc",
-    "ci": "pnpm install --frozen-lockfile",
-    "dev": "tsc --watch",
-    "inspect": "HOST=0.0.0.0 pnpx @modelcontextprotocol/inspector --config ./inspector.json --server drawio",
-    "prepublishOnly": "pnpm run build",
-    "lint": "tsc --noEmit",
-    "format": "prettier --write \"src/**/*.ts\"",
-    "format:check": "prettier --check \"src/**/*.ts\"",
-    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
-    "test:watch": "jest --watch",
-    "test:coverage": "NODE_OPTIONS=--experimental-vm-modules jest --coverage",
-    "clean": "rimraf build coverage .eslintcache",
-    "prebuild": "pnpm run clean"
+    "drawio-mcp-server": "build/index.js"
   },
   "engines": {
     "node": ">=20.0.0"
@@ -43,28 +28,50 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/lgazo/drawio-mcp-server"
+    "url": "git+https://github.com/lgazo/drawio-mcp-server.git"
   },
-  "packageManager": "pnpm@10.8.1",
   "dependencies": {
     "@hono/node-server": "1.19.7",
     "@modelcontextprotocol/sdk": "1.25.1",
+    "cachedir": "^2.4.0",
     "hono": "4.11.1",
     "nanoid": "5.1.6",
+    "unzipper": "^0.12.0",
     "ws": "8.18.3",
     "zod": "4.2.1"
   },
   "devDependencies": {
     "@jest/globals": "30.2.0",
+    "@playwright/test": "1.54.2",
     "@types/jest": "30.0.0",
     "@types/node": "25.0.3",
+    "@types/unzipper": "^0.10.11",
     "@types/ws": "^8.18.1",
+    "esbuild": "^0.24.0",
     "globals": "16.5.0",
     "jest": "30.2.0",
     "jest-environment-node": "30.2.0",
     "prettier": "3.7.4",
     "rimraf": "6.1.2",
     "ts-jest": "29.4.6",
-    "typescript": "5.9.3"
+    "typescript": "5.9.3",
+    "drawio-mcp-plugin": "2.0.0"
+  },
+  "scripts": {
+    "build": "rimraf build && tsc && mkdir -p build/plugin && cp node_modules/drawio-mcp-plugin/dist/mcp-plugin.js build/plugin/mcp-plugin.js",
+    "ci": "pnpm install --frozen-lockfile",
+    "dev": "tsc --watch",
+    "inspect": "HOST=0.0.0.0 pnpx @modelcontextprotocol/inspector --config ./inspector.json --server drawio",
+    "lint": "tsc --noEmit",
+    "prefetch-assets": "node build/prefetch-assets.js",
+    "format": "prettier --write \"**/*.ts\"",
+    "format:check": "prettier --check \"**/*.ts\"",
+    "test:real-environment": "NODE_OPTIONS=--experimental-vm-modules jest build/real-environment --runInBand",
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest build/",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --config ../../jest.config.js --coverage",
+    "clean": "rimraf build coverage .eslintcache",
+    "download-assets": "curl -sL \"$(curl -sL https://api.github.com/repos/jgraph/drawio/releases/latest | grep -o '\"browser_download_url\": *\"[^\"]*\\.war\"' | head -1 | cut -d'\"' -f4)\" -o draw.war && unzip -q -o draw.war -d assets/drawio/webapp && rm draw.war",
+    "start": "node build/index.js"
   }
-}
+}