drawio-mcp-server 1.8.0 → 2.0.4

package/build/prefetch-assets.js

@@ -0,0 +1,11 @@
+import { ensureAssets } from "./assets/index.js";
+async function main() {
+    const { assetRoot } = await ensureAssets({}, (message) => {
+        console.log(message);
+    });
+    console.log(`Assets ready at ${assetRoot}`);
+}
+main().catch((error) => {
+    console.error("Failed to prefetch draw.io assets", error);
+    process.exit(1);
+});

package/build/real-environment/add-cell-of-shape.test.js

@@ -0,0 +1,51 @@
+import { afterAll, beforeAll, describe, expect, it } from "@jest/globals";
+import { createRealEnvironmentContext, disposeRealEnvironmentContext, getCells, resetDiagram, } from "./harness.js";
+import { expectNoBrowserErrors, expectNoServerErrors, withVerificationScreenshot, } from "./assertions.js";
+import { callToolJson } from "./tools.js";
+describe("real environment/add-cell-of-shape", () => {
+    let context;
+    beforeAll(async () => {
+        context = await createRealEnvironmentContext();
+    }, 180000);
+    afterAll(async () => {
+        await disposeRealEnvironmentContext(context);
+    });
+    it("adds a cell via MCP and verifies the live diagram state", async () => {
+        await resetDiagram(context);
+        context.browserMessages.length = 0;
+        const logCountBefore = context.logger.entries.length;
+        const beforeCells = await getCells(context.page);
+        const { payload } = await callToolJson(context, "add-cell-of-shape", {
+            shape_name: "rectangle",
+            text: "MCP rectangle",
+            x: 180,
+            y: 140,
+            width: 160,
+            height: 90,
+            style: "fillColor=#dae8fc;strokeColor=#6c8ebf;",
+        });
+        expect(payload.success).toBe(true);
+        expect(payload.result.id).toBeTruthy();
+        await context.page.waitForFunction((id) => {
+            const ui = window.ui;
+            const graph = ui?.editor?.graph;
+            const cell = graph?.getModel?.().getCell?.(id);
+            return Boolean(cell);
+        }, payload.result.id);
+        await withVerificationScreenshot(context, "add-cell-of-shape", "before-live-state-verification", async () => {
+            const afterCells = await getCells(context.page);
+            expect(afterCells).toHaveLength(beforeCells.length + 1);
+            const insertedCell = afterCells.find((cell) => cell.id === payload.result.id);
+            expect(insertedCell).toBeDefined();
+            expect(insertedCell?.value).toBe("MCP rectangle");
+            expect(insertedCell?.x).toBe(180);
+            expect(insertedCell?.y).toBe(140);
+            expect(insertedCell?.width).toBe(160);
+            expect(insertedCell?.height).toBe(90);
+            expect(insertedCell?.style).toContain("fillColor=#dae8fc");
+            expect(insertedCell?.style).toContain("strokeColor=#6c8ebf");
+        });
+        await expectNoBrowserErrors(context, "add-cell-of-shape");
+        await expectNoServerErrors(context, "add-cell-of-shape", logCountBefore);
+    }, 180000);
+});

package/build/real-environment/add-edge.test.js

@@ -0,0 +1,86 @@
+import { afterAll, beforeAll, describe, expect, it } from "@jest/globals";
+import { createRealEnvironmentContext, disposeRealEnvironmentContext, resetDiagram, } from "./harness.js";
+import { expectNoBrowserErrors, expectNoServerErrors, withVerificationScreenshot, } from "./assertions.js";
+import { callToolJson } from "./tools.js";
+describe("real environment/add-edge", () => {
+    let context;
+    beforeAll(async () => {
+        context = await createRealEnvironmentContext();
+    }, 180000);
+    afterAll(async () => {
+        await disposeRealEnvironmentContext(context);
+    });
+    it("adds an edge through MCP and verifies the live diagram state", async () => {
+        await resetDiagram(context);
+        context.browserMessages.length = 0;
+        const logCountBefore = context.logger.entries.length;
+        const { payload: source } = await callToolJson(context, "add-cell-of-shape", {
+            shape_name: "rectangle",
+            text: "Source",
+            x: 100,
+            y: 140,
+            width: 120,
+            height: 70,
+        });
+        const { payload: target } = await callToolJson(context, "add-cell-of-shape", {
+            shape_name: "rectangle",
+            text: "Target",
+            x: 360,
+            y: 140,
+            width: 120,
+            height: 70,
+        });
+        expect(source.success).toBe(true);
+        expect(target.success).toBe(true);
+        const { payload } = await callToolJson(context, "add-edge", {
+            source_id: source.result.id,
+            target_id: target.result.id,
+            text: "connects to",
+            style: "endArrow=classic;strokeColor=#b85450;html=1;rounded=0;",
+        });
+        expect(payload.success).toBe(true);
+        expect(payload.result.id).toBeTruthy();
+        await context.page.waitForFunction(({ edgeId, sourceId, targetId, }) => {
+            const ui = window.ui;
+            const graph = ui?.editor?.graph;
+            const edge = graph?.getModel?.().getCell?.(edgeId);
+            return (edge &&
+                edge.edge === true &&
+                edge.source?.id === sourceId &&
+                edge.target?.id === targetId &&
+                edge.value === "connects to" &&
+                String(edge.style || "").includes("strokeColor=#b85450"));
+        }, {
+            edgeId: payload.result.id,
+            sourceId: source.result.id,
+            targetId: target.result.id,
+        });
+        await withVerificationScreenshot(context, "add-edge", "before-live-state-verification", async () => {
+            const edge = await context.page.evaluate((edgeId) => {
+                const ui = window.ui;
+                const graph = ui?.editor?.graph;
+                const cell = graph?.getModel?.().getCell?.(edgeId);
+                if (!cell) {
+                    return null;
+                }
+                return {
+                    id: String(cell.id),
+                    edge: Boolean(cell.edge),
+                    value: typeof cell.value === "string" ? cell.value : "",
+                    style: String(cell.style || ""),
+                    sourceId: cell.source?.id ? String(cell.source.id) : null,
+                    targetId: cell.target?.id ? String(cell.target.id) : null,
+                };
+            }, payload.result.id);
+            expect(edge).toBeDefined();
+            expect(edge).not.toBeNull();
+            expect(edge?.edge).toBe(true);
+            expect(edge?.value).toBe("connects to");
+            expect(edge?.sourceId).toBe(source.result.id);
+            expect(edge?.targetId).toBe(target.result.id);
+            expect(edge?.style).toContain("strokeColor=#b85450");
+        });
+        await expectNoBrowserErrors(context, "add-edge");
+        await expectNoServerErrors(context, "add-edge", logCountBefore);
+    }, 180000);
+});

package/build/real-environment/assertions.js

@@ -0,0 +1,18 @@
+import { expect } from "@jest/globals";
+import { captureVerificationArtifact } from "./screenshot.js";
+import { browserErrors } from "./harness.js";
+export async function withVerificationScreenshot(context, testName, stepName, verify) {
+    await captureVerificationArtifact(context.artifactRunDir, context.page, testName, stepName);
+    return await verify();
+}
+export async function expectNoBrowserErrors(context, testName) {
+    return withVerificationScreenshot(context, testName, "before-browser-log-verification", () => {
+        expect(browserErrors(context)).toEqual([]);
+    });
+}
+export async function expectNoServerErrors(context, testName, logCountBefore) {
+    return withVerificationScreenshot(context, testName, "before-server-log-verification", () => {
+        const serverErrors = context.logger.errors().slice(logCountBefore);
+        expect(serverErrors).toEqual([]);
+    });
+}

package/build/real-environment/delete-cell-by-id.test.js

@@ -0,0 +1,45 @@
+import { afterAll, beforeAll, describe, expect, it } from "@jest/globals";
+import { createRealEnvironmentContext, disposeRealEnvironmentContext, getCells, resetDiagram, } from "./harness.js";
+import { expectNoBrowserErrors, expectNoServerErrors, withVerificationScreenshot, } from "./assertions.js";
+import { callToolJson } from "./tools.js";
+describe("real environment/delete-cell-by-id", () => {
+    let context;
+    beforeAll(async () => {
+        context = await createRealEnvironmentContext();
+    }, 180000);
+    afterAll(async () => {
+        await disposeRealEnvironmentContext(context);
+    });
+    it("deletes a cell through MCP and verifies the live diagram state", async () => {
+        await resetDiagram(context);
+        context.browserMessages.length = 0;
+        const logCountBefore = context.logger.entries.length;
+        const { payload: createdPayload } = await callToolJson(context, "add-cell-of-shape", {
+            shape_name: "rectangle",
+            text: "Delete me",
+            x: 260,
+            y: 160,
+            width: 120,
+            height: 70,
+        });
+        expect(createdPayload.success).toBe(true);
+        const beforeDelete = await getCells(context.page);
+        expect(beforeDelete.some((cell) => cell.id === createdPayload.result.id)).toBe(true);
+        const { payload } = await callToolJson(context, "delete-cell-by-id", {
+            cell_id: createdPayload.result.id,
+        });
+        expect(payload.success).toBe(true);
+        await context.page.waitForFunction((id) => {
+            const ui = window.ui;
+            const graph = ui?.editor?.graph;
+            return !graph?.getModel?.().getCell?.(id);
+        }, createdPayload.result.id);
+        await withVerificationScreenshot(context, "delete-cell-by-id", "before-live-state-verification", async () => {
+            const afterDelete = await getCells(context.page);
+            expect(afterDelete.some((cell) => cell.id === createdPayload.result.id)).toBe(false);
+            expect(afterDelete).toHaveLength(beforeDelete.length - 1);
+        });
+        await expectNoBrowserErrors(context, "delete-cell-by-id");
+        await expectNoServerErrors(context, "delete-cell-by-id", logCountBefore);
+    }, 180000);
+});

package/build/real-environment/edge-editing.test.js

@@ -0,0 +1,70 @@
+import { afterAll, beforeAll, describe, expect, it } from "@jest/globals";
+import { createRealEnvironmentContext, disposeRealEnvironmentContext, getCellById, resetDiagram, } from "./harness.js";
+import { expectNoBrowserErrors, expectNoServerErrors, withVerificationScreenshot, } from "./assertions.js";
+import { callToolJson } from "./tools.js";
+import { expectToolSuccess } from "./test-helpers.js";
+describe("real environment/edge editing", () => {
+    let context;
+    beforeAll(async () => {
+        context = await createRealEnvironmentContext();
+    }, 180000);
+    afterAll(async () => {
+        await disposeRealEnvironmentContext(context);
+    });
+    it("covers edge editing with target change, style change, and waypoints", async () => {
+        await resetDiagram(context);
+        context.browserMessages.length = 0;
+        const logCountBefore = context.logger.entries.length;
+        const { payload: source } = await callToolJson(context, "add-rectangle", {
+            x: 120,
+            y: 110,
+            width: 150,
+            height: 90,
+            text: "Source",
+        });
+        const { payload: target } = await callToolJson(context, "add-rectangle", {
+            x: 360,
+            y: 110,
+            width: 150,
+            height: 90,
+            text: "Target",
+        });
+        const { payload: alternateTarget } = await callToolJson(context, "add-rectangle", {
+            x: 620,
+            y: 110,
+            width: 150,
+            height: 90,
+            text: "Alternate target",
+        });
+        expectToolSuccess(source);
+        expectToolSuccess(target);
+        expectToolSuccess(alternateTarget);
+        const { payload: initialEdge } = await callToolJson(context, "add-edge", {
+            source_id: source.result.id,
+            target_id: target.result.id,
+            text: "initial edge",
+        });
+        expectToolSuccess(initialEdge);
+        await callToolJson(context, "edit-edge", {
+            cell_id: initialEdge.result.id,
+            text: "edited edge",
+            target_id: alternateTarget.result.id,
+            style: "endArrow=classic;strokeColor=#9673a6;html=1;rounded=0;",
+            points: [{ x: 500, y: 70 }],
+        });
+        await withVerificationScreenshot(context, "edge-editing", "before-live-state-verification", async () => {
+            const edge = await getCellById(context.page, initialEdge.result.id);
+            expect(edge).not.toBeNull();
+            expect(edge?.edge).toBe(true);
+            expect(edge?.value).toBe("edited edge");
+            expect(edge?.sourceId).toBe(source.result.id);
+            expect(edge?.targetId).toBe(alternateTarget.result.id);
+            expect(edge?.style).toContain("strokeColor=#9673a6");
+            expect(edge?.points).toHaveLength(1);
+            expect(edge?.points[0]?.x).toBe(500);
+            expect(edge?.points[0]?.y).toBe(70);
+        });
+        await expectNoBrowserErrors(context, "edge-editing");
+        await expectNoServerErrors(context, "edge-editing", logCountBefore);
+    }, 180000);
+});

package/build/real-environment/edit-cell.test.js

@@ -0,0 +1,64 @@
+import { afterAll, beforeAll, describe, expect, it } from "@jest/globals";
+import { createRealEnvironmentContext, disposeRealEnvironmentContext, getCells, resetDiagram, } from "./harness.js";
+import { expectNoBrowserErrors, expectNoServerErrors, withVerificationScreenshot, } from "./assertions.js";
+import { callToolJson } from "./tools.js";
+describe("real environment/edit-cell", () => {
+    let context;
+    beforeAll(async () => {
+        context = await createRealEnvironmentContext();
+    }, 180000);
+    afterAll(async () => {
+        await disposeRealEnvironmentContext(context);
+    });
+    it("edits an existing cell through MCP and verifies the live diagram state", async () => {
+        await resetDiagram(context);
+        context.browserMessages.length = 0;
+        const logCountBefore = context.logger.entries.length;
+        const { payload: created } = await callToolJson(context, "add-cell-of-shape", {
+            shape_name: "rectangle",
+            text: "Original",
+            x: 100,
+            y: 120,
+            width: 120,
+            height: 70,
+            style: "fillColor=#ffffff;strokeColor=#000000;",
+        });
+        expect(created.success).toBe(true);
+        const { payload } = await callToolJson(context, "edit-cell", {
+            cell_id: created.result.id,
+            text: "Edited via MCP",
+            x: 260,
+            y: 210,
+            width: 180,
+            height: 95,
+            style: "fillColor=#d5e8d4;strokeColor=#82b366;",
+        });
+        expect(payload.success).toBe(true);
+        await context.page.waitForFunction((id) => {
+            const ui = window.ui;
+            const graph = ui?.editor?.graph;
+            const cell = graph?.getModel?.().getCell?.(id);
+            return (cell &&
+                cell.value === "Edited via MCP" &&
+                cell.geometry?.x === 260 &&
+                cell.geometry?.y === 210 &&
+                cell.geometry?.width === 180 &&
+                cell.geometry?.height === 95 &&
+                String(cell.style || "").includes("fillColor=#d5e8d4"));
+        }, created.result.id);
+        await withVerificationScreenshot(context, "edit-cell", "before-live-state-verification", async () => {
+            const cells = await getCells(context.page);
+            const editedCell = cells.find((cell) => cell.id === created.result.id);
+            expect(editedCell).toBeDefined();
+            expect(editedCell?.value).toBe("Edited via MCP");
+            expect(editedCell?.x).toBe(260);
+            expect(editedCell?.y).toBe(210);
+            expect(editedCell?.width).toBe(180);
+            expect(editedCell?.height).toBe(95);
+            expect(editedCell?.style).toContain("fillColor=#d5e8d4");
+            expect(editedCell?.style).toContain("strokeColor=#82b366");
+        });
+        await expectNoBrowserErrors(context, "edit-cell");
+        await expectNoServerErrors(context, "edit-cell", logCountBefore);
+    }, 180000);
+});