drawio-mcp-server 1.8.0 → 2.0.3

package/build/plugin/mcp-plugin.js

@@ -1,6 +1,6 @@
 "use strict";
 var DrawMcp = (() => {
-  // src/plugin/shape-library.ts
+  // src/shape-library.ts
   var shapeLibrary = {
     rectangle: {
       category: "general",
@@ -337,7 +337,7 @@ var DrawMcp = (() => {
     }
   };
 
-  // src/plugin/websocketManager.ts
+  // src/websocketManager.ts
   function createWebSocketManager(options) {
     let socket = null;
     let reconnectAttempts = 0;
@@ -495,7 +495,7 @@ var DrawMcp = (() => {
     };
   }
 
-  // src/plugin/pluginConfig.ts
+  // src/pluginConfig.ts
   var DEFAULT_PLUGIN_CONFIG = {
     websocketPort: 3333,
     serverUrl: ""
@@ -573,7 +573,7 @@ var DrawMcp = (() => {
     return `ws://${host}:${config.websocketPort}`;
   }
 
-  // src/plugin/settingsDialog.ts
+  // src/settingsDialog.ts
   function createDialogContainer() {
     const container = document.createElement("div");
     container.id = "mcp-settings-dialog";
@@ -1013,7 +1013,7 @@ var DrawMcp = (() => {
     }
   }
 
-  // src/plugin/drawio-tools.ts
+  // src/drawio-tools.ts
   function transform_NamedNodeMap_to_record(attributes) {
     const tstr = Object.prototype.toString.call(attributes);
     if (tstr !== "[object NamedNodeMap]") {
@@ -1065,7 +1065,7 @@ var DrawMcp = (() => {
     const result = {};
     for (const key in obj) {
       const value = obj[key];
-      if (typeof value !== "function" && key !== "children" && key !== "edges" && !key.startsWith("aria") && key !== "ownerDocument" && key !== "part" && key !== "classList" && key !== "childNodes" && key !== "shadowRoot" && key !== "innerHTML" && key !== "outerHTML" && key !== "scrollTop" && key !== "scrollLeft" && key !== "scrollWidth" && key !== "scrollHeight" && key !== "clientTop" && key !== "clientLeft" && key !== "clientWidth" && key !== "clientHeight" && key !== "onbeforecopy" && key !== "onbeforecut" && key !== "onbeforepaste" && key !== "onsearch" && key !== "elementTiming" && key !== "onfullscreenchange" && key !== "onfullscreenerror" && key !== "onwebkitfullscreenchange" && key !== "onwebkitfullscreenerror" && key !== "firstElementChild" && key !== "lastElementChild" && key !== "childElementCount" && key !== "previousElementSibling" && key !== "nextElementSibling" && key !== "currentCSSZoom" && key !== "parentNode" && key !== "parentElement" && key !== "firstChild" && key !== "lastChild" && key !== "previousSibling" && key !== "nextSibling" && key !== "nodeValue" && key !== "textContent") {
+      if (typeof value !== "function" && key !== "children" && key !== "edges" && !key.startsWith("aria") && key !== "ownerDocument" && key !== "part" && key !== "classList" && key !== "childNodes" && key !== "shadowRoot" && key !== "innerHTML" && key !== "outerHTML" && key !== "scrollTop" && key !== "scrollLeft" && key !== "scrollWidth" && key !== "scrollHeight" && key !== "clientTop" && key !== "clientLeft" && key !== "clientWidth" && key !== "clientHeight" && key !== "onbeforecopy" && key !== "onbeforecut" && key !== "onbeforepaste" && key !== "onsearch" && key !== "elementTiming" && key !== "onfullscreenchange" && key !== "onfullscreenerror" && key !== "onwebkitfullscreenchange" && key !== "onwebkitfullscreenerror" && key !== "firstElementChild" && key !== "lastElementChild" && key !== "childElementCount" && key !== "previousElementSibling" && key !== "nextElementSibling" && key !== "currentCSSZoom" && key !== "parentNode" && key !== "parentElement" && key !== "firstChild" && key !== "lastChild" && key !== "previousSibling" && key !== "nextSibling" && key !== "nodeValue" && key !== "textContent" && key !== "ELEMENT_NODE" && key !== "ATTRIBUTE_NODE" && key !== "TEXT_NODE" && key !== "CDATA_SECTION_NODE" && key !== "ENTITY_REFERENCE_NODE" && key !== "ENTITY_NODE" && key !== "PROCESSING_INSTRUCTION_NODE" && key !== "COMMENT_NODE" && key !== "DOCUMENT_NODE" && key !== "DOCUMENT_TYPE_NODE" && key !== "DOCUMENT_FRAGMENT_NODE" && key !== "NOTATION_NODE" && key !== "DOCUMENT_POSITION_DISCONNECTED" && key !== "DOCUMENT_POSITION_PRECEDING" && key !== "DOCUMENT_POSITION_FOLLOWING" && key !== "DOCUMENT_POSITION_CONTAINS" && key !== "DOCUMENT_POSITION_CONTAINED_BY" && key !== "DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC") {
         let stripped_value = {};
         if ((key === "parent" || key === "source" || key === "target") && value !== void 0 && value !== null) {
           stripped_value = {
@@ -1082,6 +1082,122 @@ var DrawMcp = (() => {
     }
     return result;
   }
+  function transform_cell_for_display(cell) {
+    if (!cell || typeof cell !== "object") {
+      return null;
+    }
+    const transformed = {
+      id: cell.id || "",
+      mxObjectId: cell.mxObjectId || "",
+      value: "",
+      geometry: cell.geometry,
+      style: cell.style,
+      edge: cell.edge,
+      edges: cell.edges,
+      parent: cell.parent,
+      source: cell.source,
+      target: cell.target
+    };
+    if (cell.value !== null && cell.value !== void 0) {
+      if (typeof cell.value === "string") {
+        transformed.value = cell.value;
+      } else if (typeof cell.value === "object") {
+        const transformed_attributes = transform_cells_NamedNodeMap_to_attributes(cell);
+        transformed.value = {
+          attributes: transformed_attributes,
+          nodeName: cell.value.nodeName,
+          localName: cell.value.localName,
+          tagName: cell.value.tagName
+        };
+      }
+    }
+    return transformed;
+  }
+  function get_cell_layer(graph, cell) {
+    if (!cell || !graph) {
+      return null;
+    }
+    try {
+      const layer = graph.getLayerForCell(cell);
+      if (layer) {
+        return {
+          id: layer.id || "",
+          name: layer.value || "Default Layer"
+        };
+      }
+    } catch (error) {
+      console.warn("Could not get layer for cell:", error);
+    }
+    return null;
+  }
+  function get_cell_tags(graph, cell) {
+    if (!cell || !graph) {
+      return [];
+    }
+    try {
+      const tags = graph.getTagsForCell(cell);
+      return tags || [];
+    } catch (error) {
+      console.warn("Could not get tags for cell:", error);
+      return [];
+    }
+  }
+  function mx_isRoot(root_cell) {
+    return function(cell) {
+      return null != cell && cell == root_cell;
+    };
+  }
+  function mx_isLayer(root_cell) {
+    return function(cell) {
+      return mx_isRoot(root_cell)(cell.getParent());
+    };
+  }
+  function resolve_parent(graph, parent_id) {
+    if (parent_id) {
+      const model = graph.getModel();
+      const parent = model.getCell(parent_id);
+      if (!parent) {
+        throw new Error(`Parent cell '${parent_id}' not found`);
+      }
+      return parent;
+    }
+    return graph.getDefaultParent();
+  }
+  function normalize_shape_style(shapeName, style) {
+    if (!style || !shapeName.startsWith("mxgraph.aws4.")) {
+      return style;
+    }
+    const hasExplicitShape = style.includes("shape=");
+    if (hasExplicitShape) {
+      return style;
+    }
+    return `shape=${shapeName};${style}`;
+  }
+  function apply_style_to_cell(graph, cell, style) {
+    if (!style || !cell) {
+      return;
+    }
+    const model = graph.getModel();
+    model.setStyle(cell, style);
+    if (typeof cell.setStyle === "function") {
+      cell.setStyle(style);
+    }
+    if (typeof graph.refresh === "function") {
+      graph.refresh(cell);
+    }
+  }
+  function create_shape_vertex(graph, options) {
+    const mxCell = window.mxCell;
+    const mxGeometry = window.mxGeometry;
+    const cell = new mxCell(
+      options.text,
+      new mxGeometry(options.x, options.y, options.width, options.height),
+      options.style
+    );
+    cell.vertex = true;
+    graph.addCell(cell, options.parent);
+    return cell;
+  }
   function add_new_rectangle(ui2, options) {
     const { editor } = ui2;
     const { graph } = editor;
@@ -1091,10 +1207,11 @@ var DrawMcp = (() => {
     const height = options.height || 60;
     const text = options.text || "";
     const style = options.style || "whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#000000;";
+    const parent = resolve_parent(graph, options.parent_id);
     graph.getModel().beginUpdate();
     try {
       const vertex = graph.insertVertex(
-        graph.getDefaultParent(),
+        parent,
         null,
         text,
         x,
@@ -1124,6 +1241,7 @@ var DrawMcp = (() => {
       graph.getModel().endUpdate();
     }
   }
+  var SELF_CONNECTOR_DEFAULT_STYLE = "edgeStyle=loopEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=classic;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;";
   function add_edge(ui2, options) {
     const { editor } = ui2;
     const { graph } = editor;
@@ -1133,19 +1251,20 @@ var DrawMcp = (() => {
     if (!source || !target) {
       return null;
     }
-    const defaultStyle = "endArrow=classic;html=1;rounded=0;";
+    const isSelfConnector = options.source_id === options.target_id;
+    const defaultStyle = isSelfConnector ? SELF_CONNECTOR_DEFAULT_STYLE : "endArrow=classic;html=1;rounded=0;";
     const style = options.style || defaultStyle;
     const text = options.text || "";
+    const parent = resolve_parent(graph, options.parent_id);
     model.beginUpdate();
     try {
-      const edge = graph.insertEdge(
-        graph.getDefaultParent(),
-        null,
-        text,
-        source,
-        target,
-        style
-      );
+      const edge = graph.insertEdge(parent, null, text, source, target, style);
+      if (options.points && options.points.length > 0) {
+        const geo = edge.getGeometry();
+        const mxPoint = window.mxPoint;
+        geo.points = options.points.map((p) => new mxPoint(p.x, p.y));
+        model.setGeometry(edge, geo);
+      }
       return edge;
     } finally {
       model.endUpdate();
@@ -1233,6 +1352,12 @@ var DrawMcp = (() => {
       if (options.style !== void 0) {
         graph.setCellStyle(options.style, [edge]);
       }
+      if (options.points !== void 0) {
+        const geo = edge.getGeometry().clone();
+        const mxPoint = window.mxPoint;
+        geo.points = options.points.map((p) => new mxPoint(p.x, p.y));
+        model.setGeometry(edge, geo);
+      }
     } finally {
       model.endUpdate();
     }
@@ -1267,7 +1392,7 @@ var DrawMcp = (() => {
     }
     model.beginUpdate();
     try {
-      graph.setCellStyle(style, [cell]);
+      apply_style_to_cell(graph, cell, style);
     } finally {
       model.endUpdate();
     }
@@ -1343,28 +1468,34 @@ var DrawMcp = (() => {
   function add_cell_of_shape(ui2, options) {
     const { editor } = ui2;
     const { graph } = editor;
-    const shape_name = options.shape_name || "rectangle";
+    const shape_name = options.shape_name;
+    if (!shape_name) {
+      throw new Error("add_cell_of_shape requires a shape_name");
+    }
     const x = options.x || 100;
     const y = options.y || 100;
     const width = options.width || 120;
     const height = options.height || 80;
     const text = options.text || "";
     const style = options.style || "";
+    const parent = resolve_parent(graph, options.parent_id);
     const shape_entry = get_shape_by_name(ui2, { shape_name });
     if (!shape_entry) return null;
+    const mergedStyle = normalize_shape_style(
+      shape_name,
+      [shape_entry.style, style].filter((entry) => typeof entry === "string" && entry.trim().length > 0).join(";")
+    );
     graph.getModel().beginUpdate();
     try {
-      const cell = graph.insertVertex(
-        graph.getDefaultParent(),
-        null,
+      const cell = create_shape_vertex(graph, {
+        parent,
         text,
         x,
         y,
         width,
         height,
-        `${shape_entry.style};${style}`,
-        false
-      );
+        style: mergedStyle
+      });
       return cell;
     } finally {
       graph.getModel().endUpdate();
@@ -1406,7 +1537,29 @@ var DrawMcp = (() => {
       }
       return attributes;
     }
-    function matches_cell_type(cell, cell_type) {
+    function evaluate_filter_expression(expression, attributes) {
+      if (!Array.isArray(expression) || expression.length === 0) {
+        return true;
+      }
+      const [operator, ...operands] = expression;
+      switch (operator) {
+        case "and":
+          return operands.every(
+            (op) => evaluate_filter_expression(op, attributes)
+          );
+        case "or":
+          return operands.some(
+            (op) => evaluate_filter_expression(op, attributes)
+          );
+        case "equal":
+          if (operands.length !== 2) return false;
+          const [key, value] = operands;
+          return attributes[key] === value;
+        default:
+          return true;
+      }
+    }
+    function matches_cell_type(cell, cell_type, isLayer) {
       switch (cell_type) {
         case "edge":
           return cell.edge === true || cell.edge === 1;
@@ -1416,6 +1569,8 @@ var DrawMcp = (() => {
           return cell.value?.nodeName === "object";
         case "group":
           return cell.style === "group";
+        case "layer":
+          return isLayer(cell);
         default:
           return true;
       }
@@ -1423,27 +1578,60 @@ var DrawMcp = (() => {
     let filtered_cells = Object.values(cells);
     if (options.filter) {
       const filter = options.filter;
-      if (filter.cell_type) {
-        filtered_cells = filtered_cells.filter(
-          (cell) => matches_cell_type(cell, filter.cell_type)
-        );
-      }
-      if (filter.ids && filter.ids.length > 0) {
-        filtered_cells = filtered_cells.filter(
-          (cell) => filter.ids.includes(cell.id)
-        );
-      }
+      const allParentIds = [
+        ...filter.parent_ids || [],
+        ...filter.layer_ids || []
+      ];
+      filtered_cells = filtered_cells.filter((cell) => {
+        if (options.filter?.cell_type && !matches_cell_type(
+          cell,
+          options.filter.cell_type,
+          mx_isLayer(model.root)
+        )) {
+          return false;
+        }
+        if (options.filter?.attributes && options.filter.attributes.length > 0) {
+          const cellAttributes = extract_cell_attributes(cell);
+          if (!evaluate_filter_expression(options.filter.attributes, cellAttributes)) {
+            return false;
+          }
+        }
+        if (allParentIds.length > 0) {
+          const parent = cell.parent;
+          if (!parent || !parent.id || !allParentIds.includes(parent.id)) {
+            return false;
+          }
+        }
+        if (filter.ids && filter.ids.length > 0) {
+          if (!filter.ids.includes(cell.id)) {
+            return false;
+          }
+        }
+        return true;
+      });
     }
     const page = Math.max(0, options.page || 0);
     const page_size = Math.max(1, options.page_size || 50);
     const start_index = page * page_size;
-    const paginated_ids = filtered_cells.slice(start_index, start_index + page_size).map((c) => c.id);
+    const cell_ids = filtered_cells.map((cell) => cell.id);
+    const paginated_ids = cell_ids.slice(start_index, start_index + page_size);
     const transformed_cells = [];
     for (const cell_id of paginated_ids) {
       const cell = cells[cell_id];
       if (cell) {
         const sanitized_cell = remove_circular_dependencies(cell);
-        transformed_cells.push(sanitized_cell);
+        const transformed_cell = transform_cell_for_display(sanitized_cell);
+        if (transformed_cell) {
+          const layer_info = get_cell_layer(graph, cell);
+          if (layer_info) {
+            transformed_cell.layer = layer_info;
+          }
+          const tags_info = get_cell_tags(graph, cell);
+          if (tags_info && tags_info.length > 0) {
+            transformed_cell.tags = tags_info;
+          }
+          transformed_cells.push(transformed_cell);
+        }
       }
     }
     return transformed_cells;
@@ -1506,6 +1694,29 @@ var DrawMcp = (() => {
       to_layer: options.target_layer_id
     };
   }
+  function set_cell_parent(ui2, options) {
+    const { editor } = ui2;
+    const { graph } = editor;
+    const model = graph.getModel();
+    const cell = model.getCell(options.cell_id);
+    if (!cell) {
+      throw new Error(`Cell with ID ${options.cell_id} not found`);
+    }
+    const parent = model.getCell(options.parent_id);
+    if (!parent) {
+      throw new Error(`Parent cell with ID ${options.parent_id} not found`);
+    }
+    model.beginUpdate();
+    try {
+      model.add(parent, cell);
+    } finally {
+      model.endUpdate();
+    }
+    return {
+      cell_id: options.cell_id,
+      parent_id: options.parent_id
+    };
+  }
   function get_active_layer(ui2) {
     const { editor } = ui2;
     const { graph } = editor;
@@ -1534,8 +1745,541 @@ var DrawMcp = (() => {
       name: options.name
     };
   }
+  var PNG_SIZE_WARNING_THRESHOLD = 5 * 1024 * 1024;
+  function export_diagram(ui2, options) {
+    const format = options.format || "xml";
+    const scale = options.scale ?? 1;
+    const border = options.border ?? 0;
+    const background = options.transparent ? null : options.background ?? null;
+    const includeShadow = options.shadow ?? false;
+    const cropToDiagram = options.crop ?? true;
+    const selectionOnly = options.selection_only ?? false;
+    const embedXml = options.embed_xml ?? false;
+    const size = options.size ?? "diagram";
+    const dpi = options.dpi ?? 96;
+    switch (format) {
+      case "xml":
+        return export_xml(ui2, { selectionOnly, size });
+      case "svg":
+        return export_svg(ui2, {
+          scale,
+          border,
+          background,
+          includeShadow,
+          cropToDiagram,
+          selectionOnly,
+          embedXml,
+          size
+        });
+      case "png":
+        return export_png(ui2, {
+          scale,
+          border,
+          background,
+          includeShadow,
+          cropToDiagram,
+          selectionOnly,
+          embedXml,
+          size,
+          dpi
+        });
+      default:
+        throw new Error(`Unsupported export format: ${format}`);
+    }
+  }
+  function export_xml(ui2, params) {
+    const mxUtils = window.mxUtils;
+    const { selectionOnly, size } = params;
+    const ignoreSelection = !selectionOnly;
+    const currentPage = size === "page" || size === "selection";
+    const uncompressed = true;
+    let xml;
+    if (size === "selection" && selectionOnly) {
+      const enc = new window.mxCodec();
+      const node = enc.encode(ui2.editor.graph.getModel());
+      xml = mxUtils.getXml(node);
+    } else {
+      const node = ui2.getXmlFileData(ignoreSelection, currentPage, uncompressed);
+      xml = mxUtils.getXml(node);
+    }
+    return {
+      format: "xml",
+      mimeType: "application/xml",
+      data: xml
+    };
+  }
+  function export_svg(ui2, params) {
+    const mxUtils = window.mxUtils;
+    const Graph = window.Graph;
+    const {
+      scale,
+      border,
+      background,
+      includeShadow,
+      selectionOnly,
+      embedXml,
+      size
+    } = params;
+    const graph = ui2.editor.graph;
+    const ignoreSelection = !selectionOnly && size !== "selection";
+    const bg = background !== "none" ? background : null;
+    if (embedXml) {
+      const currentPage = size === "page" || size === "selection";
+      const svgString2 = ui2.getFileData(
+        false,
+        true,
+        null,
+        null,
+        ignoreSelection,
+        currentPage
+      );
+      const bounds = graph.getGraphBounds();
+      const w2 = Math.ceil(bounds.width * scale + bounds.x * scale + 2 * border);
+      const h2 = Math.ceil(bounds.height * scale + bounds.y * scale + 2 * border);
+      return {
+        format: "svg",
+        mimeType: "image/svg+xml",
+        data: svgString2,
+        width: w2,
+        height: h2
+      };
+    }
+    const svgRoot = graph.getSvg(
+      bg,
+      scale,
+      border,
+      !params.cropToDiagram,
+      null,
+      ignoreSelection
+    );
+    if (graph.shadowVisible || includeShadow) {
+      graph.addSvgShadow(svgRoot, null, null, border === 0);
+    }
+    const svgString = (Graph.xmlDeclaration || '<?xml version="1.0" encoding="UTF-8"?>') + "\n" + (Graph.svgDoctype || "") + "\n" + mxUtils.getXml(svgRoot);
+    const w = parseInt(svgRoot.getAttribute("width")) || 0;
+    const h = parseInt(svgRoot.getAttribute("height")) || 0;
+    return {
+      format: "svg",
+      mimeType: "image/svg+xml",
+      data: svgString,
+      width: w,
+      height: h
+    };
+  }
+  function export_png(ui2, params) {
+    return new Promise((resolve, reject) => {
+      const {
+        scale,
+        border,
+        background,
+        includeShadow,
+        selectionOnly,
+        embedXml,
+        size,
+        dpi,
+        cropToDiagram
+      } = params;
+      const imageCache = {};
+      const ignoreSelection = !selectionOnly && size !== "selection";
+      let xml = null;
+      if (embedXml) {
+        xml = ui2.getFileData(
+          true,
+          null,
+          null,
+          null,
+          ignoreSelection,
+          size === "page" || size === "selection"
+        );
+      }
+      ui2.exportToCanvas(
+        (canvas) => {
+          try {
+            let dataUrl;
+            if (xml != null) {
+              dataUrl = ui2.createImageDataUri(canvas, xml, "png", dpi);
+            } else {
+              dataUrl = canvas.toDataURL("image/png");
+            }
+            const base64Data = dataUrl.replace(/^data:image\/png;base64,/, "");
+            const result = {
+              format: "png",
+              mimeType: "image/png",
+              data: base64Data,
+              width: canvas.width,
+              height: canvas.height
+            };
+            if (base64Data.length > PNG_SIZE_WARNING_THRESHOLD) {
+              const sizeMB = (base64Data.length / (1024 * 1024)).toFixed(1);
+              result.warning = `PNG export is large (${sizeMB} MB). Consider using SVG or reducing scale to reduce size.`;
+            }
+            resolve(result);
+          } catch (err) {
+            reject(err);
+          }
+        },
+        null,
+        imageCache,
+        background,
+        (err) => reject(err),
+        null,
+        ignoreSelection,
+        scale,
+        background === null,
+        includeShadow,
+        null,
+        null,
+        border,
+        !cropToDiagram,
+        false,
+        null
+      );
+    });
+  }
+  function extractXmlFromSvg(svgContent) {
+    try {
+      const parser = new DOMParser();
+      const svgDoc = parser.parseFromString(svgContent, "image/svg+xml");
+      const metadata = svgDoc.querySelector("metadata");
+      if (metadata) {
+        const mxfile2 = metadata.querySelector("mxfile");
+        if (mxfile2) {
+          const serializer = new XMLSerializer();
+          return serializer.serializeToString(mxfile2);
+        }
+      }
+      const defs = svgDoc.querySelector("defs");
+      if (defs) {
+        const mxfile2 = defs.querySelector("mxfile");
+        if (mxfile2) {
+          const serializer = new XMLSerializer();
+          return serializer.serializeToString(mxfile2);
+        }
+      }
+      const mxfile = svgDoc.querySelector("mxfile");
+      if (mxfile) {
+        const serializer = new XMLSerializer();
+        return serializer.serializeToString(mxfile);
+      }
+      return null;
+    } catch (error) {
+      console.error("[import-diagram] Error extracting XML from SVG:", error);
+      return null;
+    }
+  }
+  function extractXmlFromPng(base64Png) {
+    try {
+      const binaryString = atob(base64Png);
+      const bytes = new Uint8Array(binaryString.length);
+      for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+      }
+      const pngSignature = [137, 80, 78, 71, 13, 10, 26, 10];
+      for (let i = 0; i < 8; i++) {
+        if (bytes[i] !== pngSignature[i]) {
+          console.error("[import-diagram] Invalid PNG signature");
+          return null;
+        }
+      }
+      let offset = 8;
+      while (offset < bytes.length) {
+        const length = bytes[offset] << 24 | bytes[offset + 1] << 16 | bytes[offset + 2] << 8 | bytes[offset + 3];
+        const chunkType = String.fromCharCode(
+          bytes[offset + 4],
+          bytes[offset + 5],
+          bytes[offset + 6],
+          bytes[offset + 7]
+        );
+        if (chunkType === "tEXt") {
+          const chunkData = bytes.slice(offset + 8, offset + 8 + length);
+          let nullIndex = -1;
+          for (let i = 0; i < chunkData.length; i++) {
+            if (chunkData[i] === 0) {
+              nullIndex = i;
+              break;
+            }
+          }
+          if (nullIndex !== -1) {
+            const keyword = String.fromCharCode(...chunkData.slice(0, nullIndex));
+            const text = String.fromCharCode(...chunkData.slice(nullIndex + 1));
+            if (keyword === "mxGraphModel" || keyword === "mxfile" || text.includes("<mxfile") || text.includes("<mxGraphModel")) {
+              return text;
+            }
+          }
+        }
+        if (chunkType === "zTXt") {
+          const chunkData = bytes.slice(offset + 8, offset + 8 + length);
+          let nullIndex = -1;
+          for (let i = 0; i < chunkData.length; i++) {
+            if (chunkData[i] === 0) {
+              nullIndex = i;
+              break;
+            }
+          }
+          if (nullIndex !== -1) {
+            const keyword = String.fromCharCode(...chunkData.slice(0, nullIndex));
+            const compressionMethod = chunkData[nullIndex + 1];
+            if (compressionMethod === 0) {
+              const compressedData = chunkData.slice(nullIndex + 2);
+              if (typeof DecompressionStream !== "undefined") {
+                console.warn(
+                  "[import-diagram] zTXt chunk found but decompression not implemented in sync context"
+                );
+              }
+            }
+          }
+        }
+        offset += 12 + length;
+      }
+      return null;
+    } catch (error) {
+      console.error("[import-diagram] Error extracting XML from PNG:", error);
+      return null;
+    }
+  }
+  function import_diagram(ui2, options) {
+    const {
+      data,
+      format,
+      mode = "replace",
+      filename
+    } = options;
+    if (!data) {
+      return { success: false, message: "No data provided" };
+    }
+    let xml = null;
+    switch (format) {
+      case "xml":
+        xml = data;
+        break;
+      case "svg":
+        let svgContent = data;
+        if (!data.trim().startsWith("<")) {
+          try {
+            svgContent = atob(data);
+          } catch (e) {
+            return { success: false, message: "Invalid base64 SVG data" };
+          }
+        }
+        xml = extractXmlFromSvg(svgContent);
+        if (!xml) {
+          return { success: false, message: "Could not extract XML from SVG" };
+        }
+        break;
+      case "png":
+        xml = extractXmlFromPng(data);
+        if (!xml) {
+          return { success: false, message: "Could not extract XML from PNG" };
+        }
+        break;
+      default:
+        return { success: false, message: `Unsupported format: ${format}` };
+    }
+    if (!xml) {
+      return { success: false, message: "Failed to extract XML from input" };
+    }
+    const mxUtils = window.mxUtils;
+    if (!mxUtils) {
+      return { success: false, message: "mxUtils not available" };
+    }
+    try {
+      const doc = mxUtils.parseXml(xml);
+      if (!doc || !doc.documentElement) {
+        return { success: false, message: "Invalid XML structure" };
+      }
+      const root = doc.documentElement;
+      if (root.nodeName !== "mxfile" && root.nodeName !== "mxGraphModel") {
+        return {
+          success: false,
+          message: `Invalid Draw.io XML: expected mxfile or mxGraphModel, got ${root.nodeName}`
+        };
+      }
+      const { editor } = ui2;
+      const { graph } = editor;
+      const model = graph.getModel();
+      let cellCount = 0;
+      const cells = doc.getElementsByTagName("mxCell");
+      cellCount = cells.length;
+      switch (mode) {
+        case "replace":
+          let graphModelElement = doc.documentElement;
+          if (graphModelElement.nodeName === "mxfile") {
+            const diagram = graphModelElement.querySelector("diagram");
+            if (diagram) {
+              const mxGraphModel = diagram.querySelector("mxGraphModel");
+              if (mxGraphModel) {
+                graphModelElement = mxGraphModel;
+              }
+            }
+          }
+          if (editor.setGraphXml) {
+            editor.setGraphXml(graphModelElement);
+            graph.refresh();
+            graph.fit();
+          } else {
+            model.clear();
+            model.setRoot(new window.mxCell());
+            const codec = new window.mxCodec(
+              graphModelElement.ownerDocument
+            );
+            codec.decode(graphModelElement, model);
+          }
+          return {
+            success: true,
+            message: `Diagram replaced successfully${filename ? ` from ${filename}` : ""}`,
+            cells: cellCount
+          };
+        case "add":
+          model.beginUpdate();
+          try {
+            const importedDoc = mxUtils.parseXml(xml);
+            const importedRoot = importedDoc.documentElement;
+            let graphModel = importedRoot;
+            if (importedRoot.nodeName === "mxfile") {
+              const diagram = importedRoot.querySelector("diagram");
+              if (diagram) {
+                graphModel = diagram.querySelector("mxGraphModel") || diagram;
+              }
+            }
+            const importedRootCell = graphModel.querySelector("root");
+            if (importedRootCell) {
+              const defaultParent = graph.getDefaultParent();
+              const importedCells = importedRootCell.querySelectorAll("mxCell");
+              const idMapping = {};
+              importedCells.forEach((cell) => {
+                const oldId = cell.getAttribute("id");
+                if (oldId === "0" || oldId === "1") {
+                  return;
+                }
+                const newCell = new window.mxCell();
+                newCell.setId(null);
+                if (cell.hasAttribute("value")) {
+                  newCell.setValue(cell.getAttribute("value"));
+                }
+                if (cell.hasAttribute("style")) {
+                  newCell.setStyle(cell.getAttribute("style"));
+                }
+                if (cell.hasAttribute("vertex")) {
+                  newCell.vertex = cell.getAttribute("vertex") === "1";
+                }
+                if (cell.hasAttribute("edge")) {
+                  newCell.edge = cell.getAttribute("edge") === "1";
+                }
+                const geo = cell.querySelector("mxGeometry");
+                if (geo) {
+                  const geometry = new window.mxGeometry(
+                    parseFloat(geo.getAttribute("x") || "0"),
+                    parseFloat(geo.getAttribute("y") || "0"),
+                    parseFloat(geo.getAttribute("width") || "0"),
+                    parseFloat(geo.getAttribute("height") || "0")
+                  );
+                  if (geo.getAttribute("relative") === "1") {
+                    geometry.relative = true;
+                  }
+                  newCell.setGeometry(geometry);
+                }
+                model.add(defaultParent, newCell);
+                idMapping[oldId] = newCell.getId();
+              });
+              importedCells.forEach((cell) => {
+                const oldId = cell.getAttribute("id");
+                const newId = idMapping[oldId];
+                if (!newId) return;
+                const newCell = model.getCell(newId);
+                if (!newCell) return;
+                const parentId = cell.getAttribute("parent");
+                if (parentId && idMapping[parentId]) {
+                  const parentCell = model.getCell(idMapping[parentId]);
+                  if (parentCell) {
+                    model.add(parentCell, newCell);
+                  }
+                }
+                if (newCell.edge) {
+                  const sourceId = cell.getAttribute("source");
+                  const targetId = cell.getAttribute("target");
+                  if (sourceId && idMapping[sourceId]) {
+                    const sourceCell = model.getCell(idMapping[sourceId]);
+                    if (sourceCell) {
+                      model.setTerminal(newCell, sourceCell, true);
+                    }
+                  }
+                  if (targetId && idMapping[targetId]) {
+                    const targetCell = model.getCell(idMapping[targetId]);
+                    if (targetCell) {
+                      model.setTerminal(newCell, targetCell, false);
+                    }
+                  }
+                }
+              });
+            }
+          } finally {
+            model.endUpdate();
+          }
+          return {
+            success: true,
+            message: `Diagram imported successfully (added to current diagram)${filename ? ` from ${filename}` : ""}`,
+            cells: cellCount
+          };
+        case "new-page":
+          if (!ui2.pages || !ui2.insertPage) {
+            return {
+              success: false,
+              message: "New page creation not supported in this Draw.io version"
+            };
+          }
+          const newPage = ui2.insertPage();
+          if (!newPage) {
+            return { success: false, message: "Failed to create new page" };
+          }
+          ui2.selectPage(newPage);
+          model.beginUpdate();
+          try {
+            let pageGraphModel = doc.documentElement;
+            if (pageGraphModel.nodeName === "mxfile") {
+              const diagram = pageGraphModel.querySelector("diagram");
+              if (diagram) {
+                const mxGraphModel = diagram.querySelector("mxGraphModel");
+                if (mxGraphModel) {
+                  pageGraphModel = mxGraphModel;
+                }
+              }
+            }
+            if (editor.setGraphXml) {
+              editor.setGraphXml(pageGraphModel);
+              graph.refresh();
+              graph.fit();
+            } else {
+              const codec = new window.mxCodec(
+                pageGraphModel.ownerDocument
+              );
+              codec.decode(pageGraphModel, model);
+            }
+          } finally {
+            model.endUpdate();
+          }
+          if (filename && newPage.setName) {
+            const pageName = filename.replace(/\.[^/.]+$/, "");
+            newPage.setName(pageName);
+          }
+          return {
+            success: true,
+            message: `Diagram imported successfully (new page created)${filename ? `: ${filename}` : ""}`,
+            pages: ui2.pages.length,
+            cells: cellCount
+          };
+        default:
+          return { success: false, message: `Unsupported import mode: ${mode}` };
+      }
+    } catch (error) {
+      console.error("[import-diagram] Error importing diagram:", error);
+      return {
+        success: false,
+        message: `Import failed: ${error instanceof Error ? error.message : "Unknown error"}`
+      };
+    }
+  }
 
-  // src/plugin/plugin.ts
+  // src/plugin.ts
   function reply_name(event_name, request_id) {
     return `${event_name}.${request_id}`;
   }
@@ -1551,31 +2295,42 @@ var DrawMcp = (() => {
         },
         {}
       );
-      let reply;
-      try {
-        const result = executeFunction(ui, options);
-        reply = {
+      const sendReply = (result, success, error) => {
+        const reply = {
           __event: reply_name(toolName, request.__request_id),
           __request_id: request.__request_id,
-          success: true,
-          result: remove_circular_dependencies(result)
+          success,
+          result: success ? remove_circular_dependencies(result) : void 0,
+          error: !success ? remove_circular_dependencies(error) : void 0
         };
+        if (wsManager) {
+          wsManager.send(reply);
+        }
+        return reply;
+      };
+      try {
+        const result = executeFunction(ui, options);
+        if (result instanceof Promise) {
+          result.then(
+            (resolved) => sendReply(resolved, true),
+            (err) => {
+              console.error(
+                `[plugin] Tool ${toolName} failed for request ID ${request.__request_id}:`,
+                err
+              );
+              sendReply(void 0, false, err);
+            }
+          );
+          return void 0;
+        }
+        return sendReply(result, true);
       } catch (error) {
         console.error(
           `[plugin] Tool ${toolName} failed for request ID ${request.__request_id}:`,
           error
         );
-        reply = {
-          __event: reply_name(toolName, request.__request_id),
-          __request_id: request.__request_id,
-          success: false,
-          error: remove_circular_dependencies(error)
-        };
-      }
-      if (wsManager) {
-        wsManager.send(reply);
+        return sendReply(void 0, false, error);
       }
-      return reply;
     };
   };
   var ui;
@@ -1591,7 +2346,7 @@ var DrawMcp = (() => {
     },
     {
       name: "add-rectangle",
-      params: /* @__PURE__ */ new Set(["x", "y", "width", "height", "text", "style"]),
+      params: /* @__PURE__ */ new Set(["x", "y", "width", "height", "text", "style", "parent_id"]),
       handler: add_new_rectangle
     },
     {
@@ -1601,7 +2356,7 @@ var DrawMcp = (() => {
     },
     {
       name: "add-edge",
-      params: /* @__PURE__ */ new Set(["source_id", "target_id", "style", "text"]),
+      params: /* @__PURE__ */ new Set(["source_id", "target_id", "style", "text", "parent_id", "points"]),
       handler: add_edge
     },
     {
@@ -1621,7 +2376,16 @@ var DrawMcp = (() => {
     },
     {
       name: "add-cell-of-shape",
-      params: /* @__PURE__ */ new Set(["x", "y", "width", "height", "text", "style"]),
+      params: /* @__PURE__ */ new Set([
+        "shape_name",
+        "x",
+        "y",
+        "width",
+        "height",
+        "text",
+        "style",
+        "parent_id"
+      ]),
       handler: add_cell_of_shape
     },
     {
@@ -1633,8 +2397,7 @@ var DrawMcp = (() => {
       name: "set-cell-data",
       params: /* @__PURE__ */ new Set(["cell_id", "key", "value"]),
       handler: (ui2, options) => {
-        const mxUtils = window.mxUtils;
-        return set_cell_data(mxUtils)(ui2, options);
+        return set_cell_data(ui2, options);
       }
     },
     {
@@ -1649,7 +2412,7 @@ var DrawMcp = (() => {
     },
     {
       name: "edit-edge",
-      params: /* @__PURE__ */ new Set(["cell_id", "text", "source_id", "target_id", "style"]),
+      params: /* @__PURE__ */ new Set(["cell_id", "text", "source_id", "target_id", "style", "points"]),
       handler: edit_edge
     },
     {
@@ -1667,6 +2430,11 @@ var DrawMcp = (() => {
       params: /* @__PURE__ */ new Set(["cell_id", "target_layer_id"]),
       handler: move_cell_to_layer
     },
+    {
+      name: "set-cell-parent",
+      params: /* @__PURE__ */ new Set(["cell_id", "parent_id"]),
+      handler: set_cell_parent
+    },
     {
       name: "get-active-layer",
       params: /* @__PURE__ */ new Set([]),
@@ -1676,6 +2444,28 @@ var DrawMcp = (() => {
       name: "create-layer",
       params: /* @__PURE__ */ new Set(["name"]),
       handler: create_layer
+    },
+    {
+      name: "export-diagram",
+      params: /* @__PURE__ */ new Set([
+        "format",
+        "scale",
+        "border",
+        "background",
+        "shadow",
+        "crop",
+        "selection_only",
+        "transparent",
+        "dpi",
+        "embed_xml",
+        "size"
+      ]),
+      handler: export_diagram
+    },
+    {
+      name: "import-diagram",
+      params: /* @__PURE__ */ new Set(["data", "format", "mode", "filename"]),
+      handler: import_diagram
     }
   ];
   var toolHandlers = /* @__PURE__ */ new Map();
@@ -1803,6 +2593,9 @@ var DrawMcp = (() => {
         window.Draw.loadPlugin((drawioUI) => {
           console.debug("[plugin] Plugin loaded successfully");
           ui = drawioUI;
+          if (window.__DRAWIO_MCP_TEST_HOOKS__ === true) {
+            window.ui = drawioUI;
+          }
           toolDefinitions.forEach((def) => {
             const handler = createToolHandler(def.name, def.params, def.handler);
             toolHandlers.set(def.name, handler);