drawio-mcp-server 1.7.0 → 2.0.3

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);
+});

package/build/real-environment/harness.js

@@ -0,0 +1,175 @@
+import { chromium, } from "@playwright/test";
+import { Client } from "@modelcontextprotocol/sdk/client/index.js";
+import { InMemoryTransport } from "@modelcontextprotocol/sdk/inMemory.js";
+import { ensureAssets } from "../assets/index.js";
+import { getHttpFeatureConfig } from "../config.js";
+import { createDrawioMcpApp } from "../index.js";
+import { MemoryLogger } from "./logger.js";
+import { createArtifactRunDir } from "./screenshot.js";
+export async function createRealEnvironmentContext() {
+    const logger = new MemoryLogger();
+    const browserMessages = [];
+    const artifactRunDir = await createArtifactRunDir();
+    await ensureAssets({}, () => undefined);
+    const app = createDrawioMcpApp({ log: logger });
+    const wsServer = await app.startWebSocketServer(0);
+    const wsPort = Number(wsServer.address().port);
+    const config = {
+        extensionPort: wsPort,
+        httpPort: 0,
+        transports: ["http"],
+        editorEnabled: true,
+    };
+    const startedHttp = await app.startHttpServer(0, config, getHttpFeatureConfig(config));
+    const httpPort = startedHttp.port;
+    const [clientTransport, serverTransport] = InMemoryTransport.createLinkedPair();
+    const client = new Client({
+        name: "real-environment-test",
+        version: "1.0.0",
+    });
+    await Promise.all([
+        app.server.connect(serverTransport),
+        client.connect(clientTransport),
+    ]);
+    const browser = await chromium.launch({ headless: true });
+    const page = await browser.newPage();
+    page.on("console", (message) => {
+        browserMessages.push({
+            type: message.type(),
+            text: message.text(),
+        });
+    });
+    await page.addInitScript((port) => {
+        const store = {
+            websocketPort: port,
+        };
+        window.__DRAWIO_MCP_TEST_HOOKS__ = true;
+        window.localStorage.setItem("drawio-mcp-plugin-config", JSON.stringify(store));
+        window.localStorage.setItem("drawio-mcp-config", JSON.stringify(store));
+    }, wsPort);
+    await page.goto(`http://localhost:${httpPort}/`, {
+        waitUntil: "domcontentloaded",
+    });
+    await waitForPluginReady(page);
+    return {
+        browser,
+        page,
+        client,
+        app,
+        logger,
+        browserMessages,
+        artifactRunDir,
+        httpPort,
+        wsPort,
+    };
+}
+export async function disposeRealEnvironmentContext(context) {
+    await context.client.close();
+    await context.browser.close();
+    await context.app.close();
+}
+export async function waitForPluginReady(page) {
+    await page.waitForFunction(() => {
+        const maybeWindow = window;
+        return Boolean(maybeWindow.ui?.editor?.graph);
+    });
+    await page.waitForFunction(() => {
+        const maybeWindow = window;
+        const graph = maybeWindow.ui?.editor?.graph;
+        return Boolean(graph?.getModel?.()?.cells);
+    });
+    await page.waitForFunction(() => document.querySelector("svg") !== null);
+    await page.waitForTimeout(1500);
+}
+export async function getCells(page) {
+    return page.evaluate(() => {
+        const maybeWindow = window;
+        const graph = maybeWindow.ui?.editor?.graph;
+        const model = graph?.getModel?.();
+        const cells = Object.values(model?.cells ?? {});
+        return cells
+            .filter((cell) => cell?.vertex && cell?.geometry)
+            .map((cell) => ({
+            id: String(cell.id),
+            value: typeof cell.value === "string" ? cell.value : "",
+            style: String(cell.style ?? ""),
+            x: typeof cell.geometry?.x === "number" ? cell.geometry.x : null,
+            y: typeof cell.geometry?.y === "number" ? cell.geometry.y : null,
+            width: typeof cell.geometry?.width === "number" ? cell.geometry.width : null,
+            height: typeof cell.geometry?.height === "number"
+                ? cell.geometry.height
+                : null,
+            parentId: cell.parent?.id ? String(cell.parent.id) : null,
+        }))
+            .sort((a, b) => a.id.localeCompare(b.id));
+    });
+}
+export async function getCellById(page, cellId) {
+    return page.evaluate((id) => {
+        const maybeWindow = window;
+        const graph = maybeWindow.ui?.editor?.graph;
+        const cell = graph?.getModel?.().getCell?.(id);
+        if (!cell) {
+            return null;
+        }
+        return {
+            id: String(cell.id),
+            value: typeof cell.value === "string" ? cell.value : "",
+            style: String(cell.style ?? ""),
+            x: typeof cell.geometry?.x === "number" ? cell.geometry.x : null,
+            y: typeof cell.geometry?.y === "number" ? cell.geometry.y : null,
+            width: typeof cell.geometry?.width === "number" ? cell.geometry.width : null,
+            height: typeof cell.geometry?.height === "number" ? cell.geometry.height : null,
+            parentId: cell.parent?.id ? String(cell.parent.id) : null,
+            edge: Boolean(cell.edge),
+            vertex: Boolean(cell.vertex),
+            sourceId: cell.source?.id ? String(cell.source.id) : null,
+            targetId: cell.target?.id ? String(cell.target.id) : null,
+            points: Array.isArray(cell.geometry?.points)
+                ? cell.geometry.points.map((point) => ({
+                    x: typeof point.x === "number" ? point.x : null,
+                    y: typeof point.y === "number" ? point.y : null,
+                }))
+                : [],
+            attributes: typeof cell.value === "object" && cell.value?.attributes
+                ? Array.from(cell.value.attributes).reduce((acc, attr) => {
+                    acc[String(attr.name)] = String(attr.value);
+                    return acc;
+                }, {})
+                : {},
+        };
+    }, cellId);
+}
+export async function selectCell(page, cellId) {
+    await page.evaluate((id) => {
+        const maybeWindow = window;
+        const graph = maybeWindow.ui?.editor?.graph;
+        const cell = graph?.getModel?.().getCell?.(id);
+        if (!cell) {
+            throw new Error(`Cell ${id} not found for selection`);
+        }
+        graph.setSelectionCell(cell);
+    }, cellId);
+}
+export function browserErrors(context) {
+    return context.browserMessages.filter((entry) => entry.type === "error");
+}
+export async function resetDiagram(context) {
+    const emptyDiagram = '<mxGraphModel dx="0" dy="0" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0"><root><mxCell id="0"/><mxCell id="1" parent="0"/></root></mxGraphModel>';
+    await context.client.callTool({
+        name: "import-diagram",
+        arguments: {
+            data: emptyDiagram,
+            format: "xml",
+            mode: "replace",
+            filename: "blank.drawio",
+        },
+    });
+    await context.page.waitForFunction(() => {
+        const maybeWindow = window;
+        const graph = maybeWindow.ui?.editor?.graph;
+        const model = graph?.getModel?.();
+        const cells = Object.values(model?.cells ?? {});
+        return cells.filter((cell) => cell?.vertex).length === 0;
+    });
+}

package/build/real-environment/import-export.test.js

@@ -0,0 +1,82 @@
+import { afterAll, beforeAll, describe, expect, it } from "@jest/globals";
+import { existsSync, mkdtempSync, readFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { createRealEnvironmentContext, disposeRealEnvironmentContext, getCellById, resetDiagram, } from "./harness.js";
+import { expectNoBrowserErrors, expectNoServerErrors, withVerificationScreenshot, } from "./assertions.js";
+import { callToolJson, callToolRaw } from "./tools.js";
+import { expectToolSuccess } from "./test-helpers.js";
+describe("real environment/import export", () => {
+    let context;
+    beforeAll(async () => {
+        context = await createRealEnvironmentContext();
+    }, 180000);
+    afterAll(async () => {
+        await disposeRealEnvironmentContext(context);
+    });
+    it("covers xml export to file and xml import into the live diagram", async () => {
+        await resetDiagram(context);
+        context.browserMessages.length = 0;
+        const logCountBefore = context.logger.entries.length;
+        const { payload: rectangle } = await callToolJson(context, "add-rectangle", {
+            x: 120,
+            y: 110,
+            width: 150,
+            height: 90,
+            text: "Export me",
+        });
+        expectToolSuccess(rectangle);
+        const xmlExportDir = mkdtempSync(join(tmpdir(), "drawio-real-export-"));
+        const xmlExportPath = join(xmlExportDir, "diagram.xml");
+        const xmlExport = await callToolRaw(context, "export-diagram", {
+            format: "xml",
+            output_path: xmlExportPath,
+        });
+        expect(existsSync(xmlExportPath)).toBe(true);
+        expect(readFileSync(xmlExportPath, "utf-8")).toContain("mxGraphModel");
+        const xmlTextContent = xmlExport.content.find((item) => item.type === "text" && item.text?.includes("mxGraphModel"));
+        expect(xmlTextContent).toBeDefined();
+        const importXml = '<mxGraphModel dx="0" dy="0" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0"><root><mxCell id="0"/><mxCell id="1" parent="0"/><mxCell id="imported-1" value="Imported cell" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#ffe6cc;strokeColor=#d79b00;" vertex="1" parent="1"><mxGeometry x="80" y="220" width="160" height="80" as="geometry"/></mxCell></root></mxGraphModel>';
+        const { payload: importResult } = await callToolJson(context, "import-diagram", {
+            data: importXml,
+            format: "xml",
+            mode: "replace",
+            filename: "imported.drawio",
+        });
+        expect(importResult?.success).toBe(true);
+        await context.page.waitForFunction(() => {
+            const maybeWindow = window;
+            const graph = maybeWindow.ui?.editor?.graph;
+            const model = graph?.getModel?.();
+            const cells = Object.values(model?.cells ?? {});
+            return cells.some((cell) => cell?.value === "Imported cell");
+        });
+        await withVerificationScreenshot(context, "import-export", "before-live-state-verification", async () => {
+            const rectangleCell = await getCellById(context.page, rectangle.result.id);
+            expect(rectangleCell).toBeNull();
+            const importedCell = await context.page.evaluate(() => {
+                const maybeWindow = window;
+                const graph = maybeWindow.ui?.editor?.graph;
+                const model = graph?.getModel?.();
+                const cells = Object.values(model?.cells ?? {});
+                const cell = cells.find((candidate) => candidate?.value === "Imported cell");
+                if (!cell) {
+                    return null;
+                }
+                return {
+                    value: cell.value,
+                    style: String(cell.style ?? ""),
+                    width: typeof cell.geometry?.width === "number"
+                        ? cell.geometry.width
+                        : null,
+                };
+            });
+            expect(importedCell).not.toBeNull();
+            expect(importedCell?.value).toBe("Imported cell");
+            expect(importedCell?.style).toContain("fillColor=#ffe6cc");
+            expect(importedCell?.width).toBe(160);
+        });
+        await expectNoBrowserErrors(context, "import-export");
+        await expectNoServerErrors(context, "import-export", logCountBefore);
+    }, 180000);
+});