@civilization/dsh-drawio 0.2.1 → 0.3.0

package/README.md

@@ -10,9 +10,11 @@
 - 编辑器资源由 DSH Host 从本机提供，不连接 diagrams.net。
 - 用户保存和 Agent 工具修改的是同一份 XML 文件。
 - 文件读取、写入、路径限制和审批继续经过 DSH 服务。
+- 提供 `drawio-operation` Skill 和 3 个模型专属工具。
 
-## Agent 工具
+## Agent 工具与 Skill
 
+- `drawio-operation` Skill：向模型注入 Draw.io 画板整体架构、离线导出机制与最佳绘图工作流。
 - `drawio_inspect`：把画板读取为页面、节点、连线和几何信息。
 - `drawio_edit`：批量新增、更新、删除节点和连线。
 - `drawio_write`：校验并写入完整的 Draw.io XML。
@@ -20,6 +22,19 @@
 工具统一保存为未压缩 XML，便于 Agent 继续修改，也便于 Git 查看差异。画板会
 自动保存，并轮询同步 Agent 对同一文件的修改。
 
+## 本地离线图片导出 (Export)
+
+由于 Draw.io 原版导出功能依赖云端渲染服务（`export.diagrams.net`），在离线及局域网环境下无法正常工作。本插件基于 Draw.io 离线内核的 Embed 消息通道与 Canvas / SVG 渲染协议，实现了**100% 纯本地离线图片导出引擎**：
+
+- **支持格式**：
+  - **PNG (超清 2x)**：采用高倍率抗锯齿光栅化渲染，支持透明背景切换，适合插入文档和交流汇报；
+  - **SVG (矢量图)**：提取无损矢量图形，任意放大不失真；
+  - **XML-PNG (可编辑图)**：在 PNG 图像中内嵌图表 XML 原数据，既能作为常规图片展示，又可随时拖回 Draw.io 继续二次编辑。
+- **三大输出方式**：
+  - **保存到工作区**：在当前画板文件同级目录下自动生成同名图片文件（如 `arch.drawio` -> `arch.png`），自动触发 DSH 文件系统感知；
+  - **复制到剪贴板**：一键将 PNG 图片写入操作系统剪贴板（`navigator.clipboard`），方便在 Markdown、PRD 或聊天工具中直接 `Ctrl + V` 粘贴；
+  - **下载图片文件**：触发浏览器原生下载弹窗保存到本地磁盘。
+
 ## 开发验证
 
 ```powershell
@@ -38,4 +53,4 @@ dsh web --port 3082 --no-open
 已在 DSH 0.1.5-rc.2 上验证构建、XML 操作、本地静态资源加载和官方右侧栏注册。
 
 当前内置的精简 Draw.io runtime 固定为 31.4.5。包含完整满血版内置图库（通用、流程图、UML、ER、BPMN、网络、Kubernetes、AWS、GCP、Cisco、电子、平面图等全部分类均可自由开启）以及 PlantUML 离线渲染模块；
-云盘、在线图库、模板库、VSDX/Gliffy 导入和服务端导出未包含。
+云盘、在线图库、模板库、VSDX/Gliffy 导入未包含；已全面支持纯本地离线 Canvas + SVG 导出引擎。

package/lib/client.js

@@ -23,7 +23,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   apply: () => apply,
-  inject: () => inject
+  inject: () => inject,
+  parseDrawioAddress: () => parseDrawioAddress
 });
 module.exports = __toCommonJS(index_exports);
 var import_react = require("react");
@@ -51,34 +52,55 @@ function apply(ctx) {
 }
 function OfficialDrawioTabTitle({ useTabInfo }) {
   const { tab } = useTabInfo();
+  const title = tab?.title || (tab?.navigation?.address ? fileName(parseDrawioAddress(tab.navigation.address)?.path ?? "Draw.io") : "Draw.io");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CanvasIcon, { size: 15 }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: tab.title })
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: title })
   ] });
 }
 function OfficialDrawioTabBody({ sessionId, useSessions, useTabInfo }) {
   const { tab } = useTabInfo();
-  const cwd = useSessions((sessions) => sessions?.byId?.[sessionId]?.cwd);
-  const resource = (0, import_react.useMemo)(() => parseDrawioAddress(tab.navigation.address), [tab.navigation.address]);
+  const rawAddress = tab?.navigation?.address;
+  const resource = (0, import_react.useMemo)(() => parseDrawioAddress(rawAddress, sessionId), [rawAddress, sessionId]);
+  const activeCwd = useSessions((sessions) => sessions?.byId?.[sessionId]?.cwd);
+  const resourceCwd = useSessions((sessions) => resource?.sessionId ? sessions?.byId?.[resource.sessionId]?.cwd : void 0);
+  const cwd = activeCwd || resourceCwd;
+  const effectiveSessionId = sessionId || resource?.sessionId || "";
   const [file, setFile] = (0, import_react.useState)(null);
   const [error, setError] = (0, import_react.useState)(null);
-  const key = `${sessionId}\0${cwd ?? ""}\0${resource?.path ?? ""}`;
+  const key = `${effectiveSessionId}\0${cwd ?? ""}\0${resource?.path ?? ""}`;
   (0, import_react.useEffect)(() => {
-    if (!resource || resource.sessionId !== sessionId || !cwd) return;
+    if (!resource?.path || !effectiveSessionId || !cwd) return;
     const controller = new AbortController();
     setError(null);
-    void fsRead({ sessionId, cwd }, resource.path, controller.signal).then((content) => {
+    void fsRead({ sessionId: effectiveSessionId, cwd }, resource.path, controller.signal).then((content) => {
       if (!controller.signal.aborted) setFile({ key, content });
     }).catch((reason) => {
       if (!controller.signal.aborted) setError(messageOf(reason));
     });
     return () => controller.abort();
-  }, [key, resource?.sessionId, resource?.path, sessionId, cwd]);
-  if (!resource || resource.sessionId !== sessionId) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CenteredMessage, { title: "\u65E0\u6CD5\u6253\u5F00\u753B\u677F", detail: "\u6587\u4EF6\u5730\u5740\u4E0D\u662F\u5F53\u524D\u4F1A\u8BDD\u4E2D\u7684 Draw.io \u6587\u4EF6\u3002" });
-  if (!cwd) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CenteredMessage, { title: "\u65E0\u6CD5\u6253\u5F00\u753B\u677F", detail: "\u5F53\u524D\u4F1A\u8BDD\u6CA1\u6709\u53EF\u7528\u7684\u5DE5\u4F5C\u533A\u3002" });
+  }, [key, resource?.path, effectiveSessionId, cwd]);
+  if (!resource || !resource.path) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CenteredMessage,
+      {
+        title: "\u65E0\u6CD5\u6253\u5F00\u753B\u677F",
+        detail: rawAddress ? `\u65E0\u6CD5\u89E3\u6790 Draw.io \u6587\u4EF6\u5730\u5740\uFF1A${rawAddress}` : "\u65E0\u6CD5\u83B7\u53D6\u6587\u4EF6\u5BFC\u822A\u5730\u5740\u3002"
+      }
+    );
+  }
+  if (!cwd) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      CenteredMessage,
+      {
+        title: "\u65E0\u6CD5\u6253\u5F00\u753B\u677F",
+        detail: "\u5F53\u524D\u4F1A\u8BDD\u6CA1\u6709\u5173\u8054\u53EF\u7528\u7684\u5DE5\u4F5C\u533A\uFF0C\u8BF7\u5148\u5728 DSH \u4E2D\u6253\u5F00\u6216\u9009\u62E9\u4E00\u4E2A\u5DE5\u4F5C\u533A\u6587\u4EF6\u5939\u3002"
+      }
+    );
+  }
   if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CenteredMessage, { title: "\u753B\u677F\u8F7D\u5165\u5931\u8D25", detail: error });
   if (file?.key !== key) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CenteredMessage, { title: "\u6B63\u5728\u8F7D\u5165\u753B\u677F", detail: fileName(resource.path) });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawioCanvas, { content: file.content, path: resource.path, scope: { sessionId, cwd } });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawioCanvas, { content: file.content, path: resource.path, scope: { sessionId: effectiveSessionId, cwd } });
 }
 function DrawioCanvas({ content, truncated, path, scope }) {
   const frame = (0, import_react.useRef)(null);
@@ -162,6 +184,76 @@ function DrawioCanvas({ content, truncated, path, scope }) {
     const timer = window.setInterval(handleFrameAttach, 800);
     return () => window.clearInterval(timer);
   }, []);
+  const [menuOpen, setMenuOpen] = (0, import_react.useState)(false);
+  const [exportFormat, setExportFormat] = (0, import_react.useState)("png");
+  const [isTransparent, setIsTransparent] = (0, import_react.useState)(false);
+  const [isExporting, setIsExporting] = (0, import_react.useState)(false);
+  const [toast, setToast] = (0, import_react.useState)(null);
+  const pendingExport = (0, import_react.useRef)(null);
+  const menuRef = (0, import_react.useRef)(null);
+  const showToast = (0, import_react.useCallback)((msg) => {
+    setToast(msg);
+    window.setTimeout(() => setToast((current) => current === msg ? null : current), 3200);
+  }, []);
+  const startExport = (0, import_react.useCallback)((target) => {
+    if (!ready || isExporting) return;
+    const ext = exportFormat === "svg" ? ".svg" : exportFormat === "xmlpng" ? ".drawio.png" : ".png";
+    const base = path.replace(/\.drawio$/i, "");
+    const targetPath = `${base}${ext}`;
+    pendingExport.current = {
+      format: exportFormat,
+      target,
+      targetPath
+    };
+    setIsExporting(true);
+    setMenuOpen(false);
+    post({
+      action: "export",
+      format: exportFormat,
+      scale: exportFormat === "svg" ? 1 : 2,
+      transparent: isTransparent,
+      border: 10,
+      spin: "\u6B63\u5728\u6E32\u67D3\u5BFC\u51FA\u56FE\u7247..."
+    });
+  }, [ready, isExporting, exportFormat, isTransparent, path, post]);
+  const handleExportResult = (0, import_react.useCallback)(async (pending, data) => {
+    try {
+      if (pending.target === "download") {
+        const link = document.createElement("a");
+        link.download = fileName(pending.targetPath);
+        link.href = data;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        showToast(`\u5DF2\u5F00\u59CB\u4E0B\u8F7D\uFF1A${fileName(pending.targetPath)}`);
+      } else if (pending.target === "clipboard") {
+        if (pending.format === "svg") {
+          const svgText = data.startsWith("data:image/svg+xml") ? decodeURIComponent(data.split(",")[1] || "") : data;
+          await navigator.clipboard.writeText(svgText);
+          showToast("\u5DF2\u590D\u5236 SVG \u4EE3\u7801\u5230\u526A\u8D34\u677F");
+        } else {
+          const res = await fetch(data);
+          const blob = await res.blob();
+          await navigator.clipboard.write([new ClipboardItem({ "image/png": blob })]);
+          showToast("\u5DF2\u590D\u5236\u56FE\u7247\u5230\u526A\u8D34\u677F");
+        }
+      } else if (pending.target === "workspace") {
+        const result = await fsSaveImage(scope, pending.targetPath, data);
+        showToast(`\u5DF2\u4FDD\u5B58\u5230\u5DE5\u4F5C\u533A\uFF1A${fileName(result.path)} (${Math.round(result.bytes / 1024)} KB)`);
+      }
+    } catch (reason) {
+      setError(`\u5BFC\u51FA\u5931\u8D25\uFF1A${messageOf(reason)}`);
+    }
+  }, [scope, showToast]);
+  (0, import_react.useEffect)(() => {
+    const handleOutsideClick = (e) => {
+      if (menuOpen && menuRef.current && !menuRef.current.contains(e.target)) {
+        setMenuOpen(false);
+      }
+    };
+    window.addEventListener("pointerdown", handleOutsideClick);
+    return () => window.removeEventListener("pointerdown", handleOutsideClick);
+  }, [menuOpen]);
   (0, import_react.useEffect)(() => {
     setReady(false);
     setSaveState("loading");
@@ -181,11 +273,18 @@ function DrawioCanvas({ content, truncated, path, scope }) {
         setSaveState("saved");
       } else if ((message.event === "autosave" || message.event === "save") && typeof message.xml === "string") {
         scheduleSave(message.xml, message.event === "save");
+      } else if (message.event === "export" && typeof message.data === "string") {
+        const pending = pendingExport.current;
+        pendingExport.current = null;
+        setIsExporting(false);
+        if (pending) {
+          void handleExportResult(pending, message.data);
+        }
       }
     };
     window.addEventListener("message", receive);
     return () => window.removeEventListener("message", receive);
-  }, [src, dark, path, post, scheduleSave]);
+  }, [src, dark, path, post, scheduleSave, handleExportResult]);
   (0, import_react.useEffect)(() => {
     if (!ready || truncated) return;
     let cancelled = false;
@@ -222,8 +321,104 @@ function DrawioCanvas({ content, truncated, path, scope }) {
     if (latestEditor.current !== latestFile.current) void fsWrite(scope, path, latestEditor.current, true);
   }, [scope.sessionId, scope.cwd, path]);
   if (truncated) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CenteredMessage, { title: "\u65E0\u6CD5\u6253\u5F00\u753B\u677F", detail: "\u6587\u4EF6\u5185\u5BB9\u5DF2\u88AB\u622A\u65AD\uFF0C\u7EE7\u7EED\u7F16\u8F91\u53EF\u80FD\u635F\u574F\u539F\u6587\u4EF6\u3002" });
+  const targetExt = exportFormat === "svg" ? ".svg" : exportFormat === "xmlpng" ? ".drawio.png" : ".png";
+  const previewName = `${fileName(path).replace(/\.drawio$/i, "")}${targetExt}`;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.root, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("iframe", { ref: frame, title: `${fileName(path)} Draw.io \u753B\u677F`, src, style: styles.frame }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: menuRef, style: styles.toolbar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "button",
+        {
+          type: "button",
+          onClick: () => setMenuOpen((open) => !open),
+          disabled: !ready || isExporting,
+          style: { ...styles.exportTrigger, ...isExporting ? styles.triggerActive : {} },
+          title: "\u5BFC\u51FA\u5F53\u524D\u753B\u677F\u4E3A\u56FE\u7247",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CameraIcon, { size: 14 }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: isExporting ? "\u6B63\u5728\u5BFC\u51FA..." : "\u5BFC\u51FA\u56FE\u7247" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.arrowIcon, children: "\u25BE" })
+          ]
+        }
+      ),
+      menuOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.exportMenu, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.menuHeader, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.menuTitle, children: "\u5BFC\u51FA\u753B\u677F\u56FE\u7247" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.menuSub, children: previewName })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.formatRow, children: ["png", "svg", "xmlpng"].map((fmt) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setExportFormat(fmt),
+            style: {
+              ...styles.formatBtn,
+              ...exportFormat === fmt ? { ...styles.formatBtnActive, borderColor: accentColor } : {}
+            },
+            children: fmt === "png" ? "PNG (\u8D85\u6E05)" : fmt === "svg" ? "SVG (\u77E2\u91CF)" : "XML-PNG"
+          },
+          fmt
+        )) }),
+        exportFormat !== "svg" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: styles.checkRow, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              checked: isTransparent,
+              onChange: (e) => setIsTransparent(e.target.checked),
+              style: styles.checkbox
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u900F\u660E\u80CC\u666F" })
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.actionCol, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => startExport("workspace"),
+              style: { ...styles.actionBtn, ...styles.actionBtnPrimary, background: accentColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SaveIcon, { size: 13 }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                  "\u4FDD\u5B58\u5230\u5DE5\u4F5C\u533A (",
+                  targetExt,
+                  ")"
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => startExport("clipboard"),
+              style: styles.actionBtn,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyIcon, { size: 13 }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u590D\u5236\u5230\u526A\u8D34\u677F" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              type: "button",
+              onClick: () => startExport("download"),
+              style: styles.actionBtn,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DownloadIcon, { size: 13 }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "\u4E0B\u8F7D\u56FE\u7247\u6587\u4EF6" })
+              ]
+            }
+          )
+        ] })
+      ] }) : null
+    ] }),
+    toast ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.toast, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckIcon, { size: 14 }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: toast })
+    ] }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { role: "status", "aria-live": "polite", style: { ...styles.status, ...saveState === "error" ? styles.statusError : {} }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...styles.dot, background: accentColor } }),
       statusText(saveState)
@@ -276,6 +471,9 @@ async function fsRead(scope, path, signal) {
 async function fsWrite(scope, path, content, keepalive = false) {
   await call("write", scope, { path, content }, keepalive);
 }
+async function fsSaveImage(scope, path, data) {
+  return call("save-image", scope, { path, data });
+}
 async function call(method, scope, extra, keepalive = false, signal) {
   const response = await fetch(`/dsh-drawio/api/${method}`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ sessionId: scope.sessionId, ...scope.cwd ? { cwd: scope.cwd } : {}, ...extra }), keepalive, signal });
   const envelope = await response.json().catch(() => null);
@@ -290,6 +488,34 @@ function CanvasIcon({ size = 16, className }) {
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8.4 7.8l3.2 4.4M8.2 6.2h3.6M6.2 8.2v3.6", stroke: "currentColor", strokeLinecap: "round" })
   ] });
 }
+function CameraIcon({ size = 16, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className, "aria-hidden": true, viewBox: "0 0 20 20", width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 6.5A1.5 1.5 0 0 1 5.5 5h1.8a1.5 1.5 0 0 0 1.2-.6l.5-.7A1.5 1.5 0 0 1 10.2 3h1.6a1.5 1.5 0 0 1 1.2.7l.5.7a1.5 1.5 0 0 0 1.2.6h1.8A1.5 1.5 0 0 1 18 6.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 15.5v-9z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "11", r: "3.5" })
+  ] });
+}
+function SaveIcon({ size = 16, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className, "aria-hidden": true, viewBox: "0 0 20 20", width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 17H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h9.5l3.5 3.5V16a1 1 0 0 1-1 1z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13 17v-6H7v6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 3v4h6" })
+  ] });
+}
+function CopyIcon({ size = 16, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className, "aria-hidden": true, viewBox: "0 0 20 20", width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "7", y: "7", width: "10", height: "10", rx: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 13H3.5A1.5 1.5 0 0 1 2 11.5v-8A1.5 1.5 0 0 1 3.5 2h8A1.5 1.5 0 0 1 13 3.5V4" })
+  ] });
+}
+function DownloadIcon({ size = 16, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className, "aria-hidden": true, viewBox: "0 0 20 20", width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 3v10m0 0l-3.5-3.5M10 13l3.5-3.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 14v2a1.5 1.5 0 0 0 1.5 1.5h11a1.5 1.5 0 0 0 1.5-1.5v-2" })
+  ] });
+}
+function CheckIcon({ size = 16, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className, "aria-hidden": true, viewBox: "0 0 20 20", width: size, height: size, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M4 10.5l4 4 8-9" }) });
+}
 function CenteredMessage({ title, detail }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: styles.center, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: title }),
@@ -297,15 +523,37 @@ function CenteredMessage({ title, detail }) {
   ] });
 }
 var fileName = (path) => path.replace(/\\/g, "/").split("/").pop() || path;
-function parseDrawioAddress(address) {
-  const prefix = "dsh-resource://file/session/";
-  if (!address.startsWith(prefix)) return null;
+function parseDrawioAddress(address, fallbackSessionId) {
+  if (!address || typeof address !== "string") return null;
   try {
-    const parts = address.slice(prefix.length).split("/").map(decodeURIComponent);
-    const sessionId = parts.shift() ?? "";
-    const path = parts.join("/");
-    if (!sessionId || !path || !/\.drawio$/i.test(path) || parts.some((part) => part.includes("/") || part.includes("\\") || part.includes("\0"))) return null;
-    return { sessionId, path };
+    let clean = address.trim();
+    let parsedSessionId = "";
+    if (clean.startsWith("dsh-resource://file/session/")) {
+      const rest = clean.slice("dsh-resource://file/session/".length);
+      const slashIdx = rest.indexOf("/");
+      if (slashIdx >= 0) {
+        parsedSessionId = decodeURIComponent(rest.slice(0, slashIdx));
+        clean = rest.slice(slashIdx + 1);
+      } else {
+        clean = rest;
+      }
+    } else if (clean.startsWith("dsh-resource://file/")) {
+      clean = clean.slice("dsh-resource://file/".length);
+    } else if (clean.startsWith("file:///")) {
+      clean = clean.slice("file:///".length);
+    }
+    let decodedPath = clean;
+    try {
+      decodedPath = decodeURIComponent(clean);
+    } catch {
+    }
+    decodedPath = decodedPath.replace(/\\/g, "/").replace(/^\/+/, "");
+    if (!/\.drawio$/i.test(decodedPath)) return null;
+    if (decodedPath.includes("\0")) return null;
+    return {
+      sessionId: parsedSessionId || fallbackSessionId || "",
+      path: decodedPath
+    };
   } catch {
     return null;
   }
@@ -320,6 +568,23 @@ var accent = "var(--dsw-alias-brand-primary, #ed67ad)";
 var styles = {
   root: { position: "relative", width: "100%", height: "100%", minHeight: 0, overflow: "hidden", color: fg, background: layer },
   frame: { display: "block", width: "100%", height: "100%", border: 0, background: layer },
+  toolbar: { position: "absolute", right: 12, top: 12, zIndex: 10, display: "flex", flexDirection: "column", alignItems: "flex-end" },
+  exportTrigger: { display: "flex", alignItems: "center", gap: 6, padding: "5px 10px", border: `1px solid ${border}`, borderRadius: 6, color: fg, background: layer, boxShadow: "var(--dsw-alias-shadow-sm, 0 2px 8px rgba(0,0,0,.12))", fontSize: 12, fontWeight: 500, cursor: "pointer", backdropFilter: "blur(8px)", transition: "all 0.15s ease" },
+  triggerActive: { opacity: 0.75, cursor: "wait" },
+  arrowIcon: { fontSize: 10, opacity: 0.6, marginLeft: 2 },
+  exportMenu: { marginTop: 6, width: 220, padding: 12, border: `1px solid ${border}`, borderRadius: 8, background: layer, boxShadow: "var(--dsw-alias-shadow-md, 0 6px 20px rgba(0,0,0,.18))", backdropFilter: "blur(12px)", display: "flex", flexDirection: "column", gap: 10 },
+  menuHeader: { display: "flex", flexDirection: "column", gap: 2, paddingBottom: 6, borderBottom: `1px solid ${border}` },
+  menuTitle: { fontSize: 12, fontWeight: 600, color: fg },
+  menuSub: { fontSize: 10, color: muted, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+  formatRow: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 4 },
+  formatBtn: { padding: "4px 2px", border: `1px solid ${border}`, borderRadius: 4, background: "transparent", color: muted, fontSize: 10.5, cursor: "pointer", textAlign: "center", transition: "all 0.1s ease" },
+  formatBtnActive: { color: fg, fontWeight: 600, background: "var(--dsw-alias-fill-quaternary, rgba(127,127,127,0.12))" },
+  checkRow: { display: "flex", alignItems: "center", gap: 6, fontSize: 11, color: muted, cursor: "pointer", userSelect: "none" },
+  checkbox: { cursor: "pointer", margin: 0 },
+  actionCol: { display: "flex", flexDirection: "column", gap: 6, paddingTop: 4 },
+  actionBtn: { display: "flex", alignItems: "center", justifyContent: "center", gap: 6, padding: "6px 10px", border: `1px solid ${border}`, borderRadius: 5, background: "transparent", color: fg, fontSize: 11.5, cursor: "pointer", transition: "all 0.12s ease" },
+  actionBtnPrimary: { color: "#ffffff", border: "none", fontWeight: 500 },
+  toast: { position: "absolute", top: 12, left: "50%", transform: "translateX(-50%)", zIndex: 12, display: "flex", alignItems: "center", gap: 6, padding: "6px 14px", border: `1px solid ${border}`, borderRadius: 20, background: layer, color: fg, boxShadow: "var(--dsw-alias-shadow-md, 0 4px 14px rgba(0,0,0,.16))", fontSize: 12, backdropFilter: "blur(10px)", pointerEvents: "none" },
   status: { position: "absolute", right: 10, bottom: 9, zIndex: 2, display: "flex", alignItems: "center", gap: 6, padding: "4px 8px", border: `1px solid ${border}`, borderRadius: 999, color: muted, background: layer, boxShadow: "var(--dsw-alias-shadow-sm, 0 2px 8px rgba(0,0,0,.12))", fontSize: 11, pointerEvents: "none" },
   statusError: { color: "var(--dsw-alias-danger, #d84f5f)" },
   dot: { width: 6, height: 6, borderRadius: 99, background: accent },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civilization/dsh-drawio",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Local draw.io canvas and model tools for DeepSeek Harness",
   "license": "Apache-2.0",
   "type": "module",
@@ -14,6 +14,7 @@
     "src",
     "lib",
     "vendor",
+    "skills",
     "cordis.patch.yml",
     "README.md",
     "THIRD_PARTY_NOTICES.md",

package/skills/drawio-operation/SKILL.md

@@ -0,0 +1,53 @@
+---
+name: drawio-operation
+description: Read, inspect, create, and semantically edit Draw.io diagrams and architecture flows, collaborate with the native offline canvas, and guide export workflows.
+---
+
+# Draw.io operation
+
+The `dsh-drawio` plugin integrates a 100% local, offline Draw.io diagram editor into DeepSeek Harness (DSH) right sidebar and equips the model with structured diagram editing tools.
+
+When the user asks about Draw.io capabilities or diagram tools, describe the available tools and features directly without scanning or probing the workspace.
+
+## Core Model Tools
+
+1. **`drawio_inspect`**:
+   - Reads an existing `.drawio` file into structured pages, nodes, edges, labels, and geometry bounds.
+   - Always call this before modifying an existing diagram to understand existing cell IDs, hierarchy, and connection points.
+   - Set `include_xml: true` only when raw XML attributes or specific unparsed mxCell metadata are needed.
+
+2. **`drawio_edit`**:
+   - Applies targeted semantic operations to an existing `.drawio` file.
+   - Supported batch operations:
+     - `add_node`: Add a new vertex with `id`, `label`, `style`, `x`, `y`, `width`, `height`.
+     - `add_edge`: Connect vertices with `id`, `source`, `target`, `label`, and routing `style`.
+     - `update`: Modify existing node or edge properties without disturbing unchanged geometry.
+     - `delete`: Safely remove a cell and automatically cascade clean-up of connected edges.
+   - Maintain stable, unique, descriptive cell IDs (e.g. `client`, `api_gateway`, `db_cluster`).
+
+3. **`drawio_write`**:
+   - Validates and writes a complete Draw.io `mxfile` or `mxGraphModel` XML document.
+   - Automatically normalizes the XML to uncompressed, human-readable format for reliable Git diffs and future AI edits.
+   - Prefer `drawio_write` when creating a brand-new diagram from scratch, and prefer `drawio_edit` for incremental revisions.
+
+## Canvas & Offline Export Capabilities
+
+- **Interactive Right-Sidebar Canvas**:
+  - Double-clicking any `.drawio` file in the DSH workspace opens the full-featured Draw.io canvas.
+  - Changes made by the model via `drawio_edit` or `drawio_write` are polled and synchronized into the canvas automatically without overwriting active user dragging.
+- **Pure Local Image Export**:
+  - The canvas includes a built-in offline export engine in the top-right toolbar:
+    - **PNG (2x Ultra HD)**: High-resolution rasterization with optional transparent background.
+    - **SVG (Vector)**: Infinite resolution vector diagram.
+    - **XML-PNG**: Dual-mode image embedding editable diagram XML metadata.
+  - Supports saving directly back into the current workspace (e.g. `architecture.png`), copying directly to the system clipboard, or downloading to local disk.
+
+## Recommended Workflows
+
+- **Creating a new diagram**:
+  - Propose clear architecture/flowchart structure.
+  - Call `drawio_write` with a clean `mxfile` XML document at a workspace path ending in `.drawio`.
+  - Inform the user that the diagram is immediately viewable and editable in the right sidebar tab and can be exported to PNG/SVG from the canvas toolbar.
+- **Updating an existing diagram**:
+  - Call `drawio_inspect` first.
+  - Formulate precise `operations` and call `drawio_edit`.

package/src/client/index.tsx

@@ -30,32 +30,53 @@ export function apply(ctx: Context): void {
 
 function OfficialDrawioTabTitle({ useTabInfo }: any): JSX.Element {
   const { tab } = useTabInfo()
-  return <><CanvasIcon size={15} /><span>{tab.title}</span></>
+  const title = tab?.title || (tab?.navigation?.address ? fileName(parseDrawioAddress(tab.navigation.address)?.path ?? 'Draw.io') : 'Draw.io')
+  return <><CanvasIcon size={15} /><span>{title}</span></>
 }
 
 function OfficialDrawioTabBody({ sessionId, useSessions, useTabInfo }: any): JSX.Element {
   const { tab } = useTabInfo()
-  const cwd = useSessions((sessions: any) => sessions?.byId?.[sessionId]?.cwd) as string | undefined
-  const resource = useMemo(() => parseDrawioAddress(tab.navigation.address), [tab.navigation.address])
+  const rawAddress = tab?.navigation?.address
+  const resource = useMemo(() => parseDrawioAddress(rawAddress, sessionId), [rawAddress, sessionId])
+
+  const activeCwd = useSessions((sessions: any) => sessions?.byId?.[sessionId]?.cwd) as string | undefined
+  const resourceCwd = useSessions((sessions: any) => resource?.sessionId ? sessions?.byId?.[resource.sessionId]?.cwd : undefined) as string | undefined
+  const cwd = activeCwd || resourceCwd
+  const effectiveSessionId = sessionId || resource?.sessionId || ''
+
   const [file, setFile] = useState<{ key: string; content: string } | null>(null)
   const [error, setError] = useState<string | null>(null)
-  const key = `${sessionId}\0${cwd ?? ''}\0${resource?.path ?? ''}`
+  const key = `${effectiveSessionId}\0${cwd ?? ''}\0${resource?.path ?? ''}`
 
   useEffect(() => {
-    if (!resource || resource.sessionId !== sessionId || !cwd) return
+    if (!resource?.path || !effectiveSessionId || !cwd) return
     const controller = new AbortController()
     setError(null)
-    void fsRead({ sessionId, cwd }, resource.path, controller.signal)
+    void fsRead({ sessionId: effectiveSessionId, cwd }, resource.path, controller.signal)
       .then(content => { if (!controller.signal.aborted) setFile({ key, content }) })
       .catch(reason => { if (!controller.signal.aborted) setError(messageOf(reason)) })
     return () => controller.abort()
-  }, [key, resource?.sessionId, resource?.path, sessionId, cwd])
+  }, [key, resource?.path, effectiveSessionId, cwd])
 
-  if (!resource || resource.sessionId !== sessionId) return <CenteredMessage title="无法打开画板" detail="文件地址不是当前会话中的 Draw.io 文件。" />
-  if (!cwd) return <CenteredMessage title="无法打开画板" detail="当前会话没有可用的工作区。" />
+  if (!resource || !resource.path) {
+    return (
+      <CenteredMessage
+        title="无法打开画板"
+        detail={rawAddress ? `无法解析 Draw.io 文件地址：${rawAddress}` : '无法获取文件导航地址。'}
+      />
+    )
+  }
+  if (!cwd) {
+    return (
+      <CenteredMessage
+        title="无法打开画板"
+        detail="当前会话没有关联可用的工作区，请先在 DSH 中打开或选择一个工作区文件夹。"
+      />
+    )
+  }
   if (error) return <CenteredMessage title="画板载入失败" detail={error} />
   if (file?.key !== key) return <CenteredMessage title="正在载入画板" detail={fileName(resource.path)} />
-  return <DrawioCanvas content={file.content} path={resource.path} scope={{ sessionId, cwd }} />
+  return <DrawioCanvas content={file.content} path={resource.path} scope={{ sessionId: effectiveSessionId, cwd }} />
 }
 
 function DrawioCanvas({ content, truncated, path, scope }: FileViewerProps): JSX.Element {
@@ -147,12 +168,90 @@ function DrawioCanvas({ content, truncated, path, scope }: FileViewerProps): JSX
     return () => window.clearInterval(timer)
   }, [])
 
+  const [menuOpen, setMenuOpen] = useState(false)
+  const [exportFormat, setExportFormat] = useState<'png' | 'svg' | 'xmlpng'>('png')
+  const [isTransparent, setIsTransparent] = useState(false)
+  const [isExporting, setIsExporting] = useState(false)
+  const [toast, setToast] = useState<string | null>(null)
+  const pendingExport = useRef<{ format: 'png' | 'svg' | 'xmlpng'; target: 'workspace' | 'download' | 'clipboard'; targetPath: string } | null>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+
+  const showToast = useCallback((msg: string) => {
+    setToast(msg)
+    window.setTimeout(() => setToast(current => current === msg ? null : current), 3200)
+  }, [])
+
+  const startExport = useCallback((target: 'workspace' | 'download' | 'clipboard') => {
+    if (!ready || isExporting) return
+    const ext = exportFormat === 'svg' ? '.svg' : exportFormat === 'xmlpng' ? '.drawio.png' : '.png'
+    const base = path.replace(/\.drawio$/i, '')
+    const targetPath = `${base}${ext}`
+
+    pendingExport.current = {
+      format: exportFormat,
+      target,
+      targetPath,
+    }
+    setIsExporting(true)
+    setMenuOpen(false)
+    post({
+      action: 'export',
+      format: exportFormat,
+      scale: exportFormat === 'svg' ? 1 : 2,
+      transparent: isTransparent,
+      border: 10,
+      spin: '正在渲染导出图片...',
+    })
+  }, [ready, isExporting, exportFormat, isTransparent, path, post])
+
+  const handleExportResult = useCallback(async (pending: { format: 'png' | 'svg' | 'xmlpng'; target: 'workspace' | 'download' | 'clipboard'; targetPath: string }, data: string) => {
+    try {
+      if (pending.target === 'download') {
+        const link = document.createElement('a')
+        link.download = fileName(pending.targetPath)
+        link.href = data
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+        showToast(`已开始下载：${fileName(pending.targetPath)}`)
+      } else if (pending.target === 'clipboard') {
+        if (pending.format === 'svg') {
+          const svgText = data.startsWith('data:image/svg+xml')
+            ? decodeURIComponent(data.split(',')[1] || '')
+            : data
+          await navigator.clipboard.writeText(svgText)
+          showToast('已复制 SVG 代码到剪贴板')
+        } else {
+          const res = await fetch(data)
+          const blob = await res.blob()
+          await navigator.clipboard.write([new ClipboardItem({ 'image/png': blob })])
+          showToast('已复制图片到剪贴板')
+        }
+      } else if (pending.target === 'workspace') {
+        const result = await fsSaveImage(scope, pending.targetPath, data)
+        showToast(`已保存到工作区：${fileName(result.path)} (${Math.round(result.bytes / 1024)} KB)`)
+      }
+    } catch (reason) {
+      setError(`导出失败：${messageOf(reason)}`)
+    }
+  }, [scope, showToast])
+
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      if (menuOpen && menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setMenuOpen(false)
+      }
+    }
+    window.addEventListener('pointerdown', handleOutsideClick)
+    return () => window.removeEventListener('pointerdown', handleOutsideClick)
+  }, [menuOpen])
+
   useEffect(() => {
     setReady(false)
     setSaveState('loading')
     const receive = (event: MessageEvent) => {
       if (event.source !== frame.current?.contentWindow || event.origin !== window.location.origin) return
-      let message: { event?: string; xml?: string }
+      let message: { event?: string; xml?: string; format?: string; data?: string }
       try { message = typeof event.data === 'string' ? JSON.parse(event.data) : event.data }
       catch { return }
       if (message.event === 'configure') {
@@ -163,11 +262,18 @@ function DrawioCanvas({ content, truncated, path, scope }: FileViewerProps): JSX
         setSaveState('saved')
       } else if ((message.event === 'autosave' || message.event === 'save') && typeof message.xml === 'string') {
         scheduleSave(message.xml, message.event === 'save')
+      } else if (message.event === 'export' && typeof message.data === 'string') {
+        const pending = pendingExport.current
+        pendingExport.current = null
+        setIsExporting(false)
+        if (pending) {
+          void handleExportResult(pending, message.data)
+        }
       }
     }
     window.addEventListener('message', receive)
     return () => window.removeEventListener('message', receive)
-  }, [src, dark, path, post, scheduleSave])
+  }, [src, dark, path, post, scheduleSave, handleExportResult])
 
   useEffect(() => {
     if (!ready || truncated) return
@@ -208,9 +314,103 @@ function DrawioCanvas({ content, truncated, path, scope }: FileViewerProps): JSX
   }, [scope.sessionId, scope.cwd, path])
 
   if (truncated) return <CenteredMessage title="无法打开画板" detail="文件内容已被截断，继续编辑可能损坏原文件。" />
+
+  const targetExt = exportFormat === 'svg' ? '.svg' : exportFormat === 'xmlpng' ? '.drawio.png' : '.png'
+  const previewName = `${fileName(path).replace(/\.drawio$/i, '')}${targetExt}`
+
   return (
     <div style={styles.root}>
       <iframe ref={frame} title={`${fileName(path)} Draw.io 画板`} src={src} style={styles.frame} />
+
+      {/* 右上角悬浮导出工具面板 */}
+      <div ref={menuRef} style={styles.toolbar}>
+        <button
+          type="button"
+          onClick={() => setMenuOpen(open => !open)}
+          disabled={!ready || isExporting}
+          style={{ ...styles.exportTrigger, ...(isExporting ? styles.triggerActive : {}) }}
+          title="导出当前画板为图片"
+        >
+          <CameraIcon size={14} />
+          <span>{isExporting ? '正在导出...' : '导出图片'}</span>
+          <span style={styles.arrowIcon}>▾</span>
+        </button>
+
+        {menuOpen ? (
+          <div style={styles.exportMenu}>
+            <div style={styles.menuHeader}>
+              <span style={styles.menuTitle}>导出画板图片</span>
+              <span style={styles.menuSub}>{previewName}</span>
+            </div>
+
+            <div style={styles.formatRow}>
+              {(['png', 'svg', 'xmlpng'] as const).map(fmt => (
+                <button
+                  key={fmt}
+                  type="button"
+                  onClick={() => setExportFormat(fmt)}
+                  style={{
+                    ...styles.formatBtn,
+                    ...(exportFormat === fmt ? { ...styles.formatBtnActive, borderColor: accentColor } : {}),
+                  }}
+                >
+                  {fmt === 'png' ? 'PNG (超清)' : fmt === 'svg' ? 'SVG (矢量)' : 'XML-PNG'}
+                </button>
+              ))}
+            </div>
+
+            {exportFormat !== 'svg' ? (
+              <label style={styles.checkRow}>
+                <input
+                  type="checkbox"
+                  checked={isTransparent}
+                  onChange={e => setIsTransparent(e.target.checked)}
+                  style={styles.checkbox}
+                />
+                <span>透明背景</span>
+              </label>
+            ) : null}
+
+            <div style={styles.actionCol}>
+              <button
+                type="button"
+                onClick={() => startExport('workspace')}
+                style={{ ...styles.actionBtn, ...styles.actionBtnPrimary, background: accentColor }}
+              >
+                <SaveIcon size={13} />
+                <span>保存到工作区 ({targetExt})</span>
+              </button>
+
+              <button
+                type="button"
+                onClick={() => startExport('clipboard')}
+                style={styles.actionBtn}
+              >
+                <CopyIcon size={13} />
+                <span>复制到剪贴板</span>
+              </button>
+
+              <button
+                type="button"
+                onClick={() => startExport('download')}
+                style={styles.actionBtn}
+              >
+                <DownloadIcon size={13} />
+                <span>下载图片文件</span>
+              </button>
+            </div>
+          </div>
+        ) : null}
+      </div>
+
+      {/* Toast 提示 */}
+      {toast ? (
+        <div style={styles.toast}>
+          <CheckIcon size={14} />
+          <span>{toast}</span>
+        </div>
+      ) : null}
+
       <div role="status" aria-live="polite" style={{ ...styles.status, ...(saveState === 'error' ? styles.statusError : {}) }}>
         <span style={{ ...styles.dot, background: accentColor }} />{statusText(saveState)}
       </div>
@@ -269,6 +469,10 @@ async function fsWrite(scope: SessionScope, path: string, content: string, keepa
   await call('write', scope, { path, content }, keepalive)
 }
 
+async function fsSaveImage(scope: SessionScope, path: string, data: string): Promise<{ path: string; bytes: number }> {
+  return call<{ path: string; bytes: number }>('save-image', scope, { path, data })
+}
+
 async function call<T = { ok: true }>(method: string, scope: SessionScope, extra: Record<string, unknown>, keepalive = false, signal?: AbortSignal): Promise<T> {
   const response = await fetch(`/dsh-drawio/api/${method}`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ sessionId: scope.sessionId, ...(scope.cwd ? { cwd: scope.cwd } : {}), ...extra }), keepalive, signal })
   const envelope = await response.json().catch(() => null) as { ok?: boolean; value?: T; error?: { message?: string } } | null
@@ -280,21 +484,75 @@ function CanvasIcon({ size = 16, className }: { size?: number; className?: strin
   return <svg className={className} aria-hidden viewBox="0 0 20 20" width={size} height={size} fill="none"><rect x="2.5" y="2.5" width="15" height="15" rx="2.5" stroke="currentColor"/><circle cx="7" cy="7" r="1.5" fill="currentColor"/><circle cx="13" cy="13" r="1.5" fill="currentColor"/><path d="M8.4 7.8l3.2 4.4M8.2 6.2h3.6M6.2 8.2v3.6" stroke="currentColor" strokeLinecap="round"/></svg>
 }
 
+function CameraIcon({ size = 16, className }: { size?: number; className?: string }): JSX.Element {
+  return <svg className={className} aria-hidden viewBox="0 0 20 20" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M4 6.5A1.5 1.5 0 0 1 5.5 5h1.8a1.5 1.5 0 0 0 1.2-.6l.5-.7A1.5 1.5 0 0 1 10.2 3h1.6a1.5 1.5 0 0 1 1.2.7l.5.7a1.5 1.5 0 0 0 1.2.6h1.8A1.5 1.5 0 0 1 18 6.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 2 15.5v-9z"/><circle cx="10" cy="11" r="3.5"/></svg>
+}
+
+function SaveIcon({ size = 16, className }: { size?: number; className?: string }): JSX.Element {
+  return <svg className={className} aria-hidden viewBox="0 0 20 20" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M16 17H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h9.5l3.5 3.5V16a1 1 0 0 1-1 1z"/><path d="M13 17v-6H7v6"/><path d="M7 3v4h6"/></svg>
+}
+
+function CopyIcon({ size = 16, className }: { size?: number; className?: string }): JSX.Element {
+  return <svg className={className} aria-hidden viewBox="0 0 20 20" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="7" y="7" width="10" height="10" rx="1.5"/><path d="M4 13H3.5A1.5 1.5 0 0 1 2 11.5v-8A1.5 1.5 0 0 1 3.5 2h8A1.5 1.5 0 0 1 13 3.5V4"/></svg>
+}
+
+function DownloadIcon({ size = 16, className }: { size?: number; className?: string }): JSX.Element {
+  return <svg className={className} aria-hidden viewBox="0 0 20 20" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M10 3v10m0 0l-3.5-3.5M10 13l3.5-3.5"/><path d="M3 14v2a1.5 1.5 0 0 0 1.5 1.5h11a1.5 1.5 0 0 0 1.5-1.5v-2"/></svg>
+}
+
+function CheckIcon({ size = 16, className }: { size?: number; className?: string }): JSX.Element {
+  return <svg className={className} aria-hidden viewBox="0 0 20 20" width={size} height={size} fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 10.5l4 4 8-9"/></svg>
+}
+
 function CenteredMessage({ title, detail }: { title: string; detail: string }): JSX.Element {
   return <div style={styles.center}><strong>{title}</strong><span style={styles.muted}>{detail}</span></div>
 }
 
 const fileName = (path: string): string => path.replace(/\\/g, '/').split('/').pop() || path
-function parseDrawioAddress(address: string): { sessionId: string; path: string } | null {
-  const prefix = 'dsh-resource://file/session/'
-  if (!address.startsWith(prefix)) return null
+
+export function parseDrawioAddress(address?: string, fallbackSessionId?: string): { sessionId: string; path: string } | null {
+  if (!address || typeof address !== 'string') return null
   try {
-    const parts = address.slice(prefix.length).split('/').map(decodeURIComponent)
-    const sessionId = parts.shift() ?? ''
-    const path = parts.join('/')
-    if (!sessionId || !path || !/\.drawio$/i.test(path) || parts.some(part => part.includes('/') || part.includes('\\') || part.includes('\0'))) return null
-    return { sessionId, path }
-  } catch { return null }
+    let clean = address.trim()
+    let parsedSessionId = ''
+
+    if (clean.startsWith('dsh-resource://file/session/')) {
+      const rest = clean.slice('dsh-resource://file/session/'.length)
+      const slashIdx = rest.indexOf('/')
+      if (slashIdx >= 0) {
+        parsedSessionId = decodeURIComponent(rest.slice(0, slashIdx))
+        clean = rest.slice(slashIdx + 1)
+      } else {
+        clean = rest
+      }
+    } else if (clean.startsWith('dsh-resource://file/')) {
+      clean = clean.slice('dsh-resource://file/'.length)
+    } else if (clean.startsWith('file:///')) {
+      clean = clean.slice('file:///'.length)
+    }
+
+    // 处理可能是 URL 编码的 path（支持嵌套目录 %2F）
+    let decodedPath = clean
+    try {
+      decodedPath = decodeURIComponent(clean)
+    } catch {}
+
+    // 规范化斜杠并去除开头的斜杠
+    decodedPath = decodedPath.replace(/\\/g, '/').replace(/^\/+/, '')
+
+    // 必须是 .drawio 文件
+    if (!/\.drawio$/i.test(decodedPath)) return null
+
+    // 防空字符
+    if (decodedPath.includes('\0')) return null
+
+    return {
+      sessionId: parsedSessionId || fallbackSessionId || '',
+      path: decodedPath,
+    }
+  } catch {
+    return null
+  }
 }
 const messageOf = (reason: unknown): string => reason instanceof Error ? reason.message : String(reason)
 const statusText = (state: string): string => state === 'loading' ? '正在载入' : state === 'saving' ? '正在保存' : state === 'external' ? '已同步 AI 修改' : state === 'error' ? '保存失败' : '已保存'
@@ -306,6 +564,23 @@ const accent = 'var(--dsw-alias-brand-primary, #ed67ad)'
 const styles: Record<string, React.CSSProperties> = {
   root: { position: 'relative', width: '100%', height: '100%', minHeight: 0, overflow: 'hidden', color: fg, background: layer },
   frame: { display: 'block', width: '100%', height: '100%', border: 0, background: layer },
+  toolbar: { position: 'absolute', right: 12, top: 12, zIndex: 10, display: 'flex', flexDirection: 'column', alignItems: 'flex-end' },
+  exportTrigger: { display: 'flex', alignItems: 'center', gap: 6, padding: '5px 10px', border: `1px solid ${border}`, borderRadius: 6, color: fg, background: layer, boxShadow: 'var(--dsw-alias-shadow-sm, 0 2px 8px rgba(0,0,0,.12))', fontSize: 12, fontWeight: 500, cursor: 'pointer', backdropFilter: 'blur(8px)', transition: 'all 0.15s ease' },
+  triggerActive: { opacity: 0.75, cursor: 'wait' },
+  arrowIcon: { fontSize: 10, opacity: 0.6, marginLeft: 2 },
+  exportMenu: { marginTop: 6, width: 220, padding: 12, border: `1px solid ${border}`, borderRadius: 8, background: layer, boxShadow: 'var(--dsw-alias-shadow-md, 0 6px 20px rgba(0,0,0,.18))', backdropFilter: 'blur(12px)', display: 'flex', flexDirection: 'column', gap: 10 },
+  menuHeader: { display: 'flex', flexDirection: 'column', gap: 2, paddingBottom: 6, borderBottom: `1px solid ${border}` },
+  menuTitle: { fontSize: 12, fontWeight: 600, color: fg },
+  menuSub: { fontSize: 10, color: muted, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' },
+  formatRow: { display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 },
+  formatBtn: { padding: '4px 2px', border: `1px solid ${border}`, borderRadius: 4, background: 'transparent', color: muted, fontSize: 10.5, cursor: 'pointer', textAlign: 'center', transition: 'all 0.1s ease' },
+  formatBtnActive: { color: fg, fontWeight: 600, background: 'var(--dsw-alias-fill-quaternary, rgba(127,127,127,0.12))' },
+  checkRow: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: muted, cursor: 'pointer', userSelect: 'none' },
+  checkbox: { cursor: 'pointer', margin: 0 },
+  actionCol: { display: 'flex', flexDirection: 'column', gap: 6, paddingTop: 4 },
+  actionBtn: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, padding: '6px 10px', border: `1px solid ${border}`, borderRadius: 5, background: 'transparent', color: fg, fontSize: 11.5, cursor: 'pointer', transition: 'all 0.12s ease' },
+  actionBtnPrimary: { color: '#ffffff', border: 'none', fontWeight: 500 },
+  toast: { position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)', zIndex: 12, display: 'flex', alignItems: 'center', gap: 6, padding: '6px 14px', border: `1px solid ${border}`, borderRadius: 20, background: layer, color: fg, boxShadow: 'var(--dsw-alias-shadow-md, 0 4px 14px rgba(0,0,0,.16))', fontSize: 12, backdropFilter: 'blur(10px)', pointerEvents: 'none' },
   status: { position: 'absolute', right: 10, bottom: 9, zIndex: 2, display: 'flex', alignItems: 'center', gap: 6, padding: '4px 8px', border: `1px solid ${border}`, borderRadius: 999, color: muted, background: layer, boxShadow: 'var(--dsw-alias-shadow-sm, 0 2px 8px rgba(0,0,0,.12))', fontSize: 11, pointerEvents: 'none' },
   statusError: { color: 'var(--dsw-alias-danger, #d84f5f)' },
   dot: { width: 6, height: 6, borderRadius: 99, background: accent },

package/src/index.js

@@ -1,12 +1,12 @@
 import { createReadStream } from 'node:fs'
-import { stat } from 'node:fs/promises'
+import { stat, readFile } from 'node:fs/promises'
 import { extname, join, normalize, relative, sep } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { defineTool } from '@deepseek-ai/dsh-tools'
 import { editDrawio, inspectDrawio, normalizeDrawio } from './xml.js'
 
 export const name = 'dsh-drawio'
-export const inject = ['tools', 'fs', 'webServer']
+export const inject = ['tools', 'fs', 'webServer', 'skills']
 
 const runtimeRoot = fileURLToPath(new URL('../vendor/drawio/', import.meta.url))
 const MAX_DIAGRAM_BYTES = 10 * 1024 * 1024
@@ -17,7 +17,20 @@ const output = {
 }
 const pathParameter = { type: 'string', required: true, description: 'Path to a .drawio file, relative to the current DSH workspace or absolute within the allowed workspace.' }
 
-export function apply(ctx) {
+export async function apply(ctx) {
+  try {
+    const skillPath = new URL('../skills/drawio-operation/SKILL.md', import.meta.url)
+    const skillText = await readFile(skillPath, 'utf8')
+    const content = skillText.replace(/^---\r?\n[\s\S]*?\r?\n---\r?\n/, '').trim()
+    ctx.effect(() => ctx.skills?.register({
+      name: 'drawio-operation',
+      description: 'Inspect, edit, and create Draw.io diagrams with the local canvas and model tools.',
+      whenToUse: 'Use for creating, reading, or modifying architecture diagrams, flowcharts, or Draw.io XML files.',
+      source: 'bundled',
+      content,
+    }))
+  } catch {}
+
   ctx.effect(() => ctx.webServer.register({ kind: 'prefix', path: '/dsh-drawio/runtime', handler: serveRuntime }))
   ctx.effect(() => ctx.webServer.register({ kind: 'prefix', path: '/dsh-drawio/api', handler: (req, res) => serveCanvasApi(ctx, req, res) }))
   register(ctx, defineTool({
@@ -87,8 +100,33 @@ async function serveCanvasApi(ctx, req, res) {
   try {
     const pathname = new URL(req.url || '/', 'http://dsh.internal').pathname
     const method = pathname.slice('/dsh-drawio/api/'.length)
-    if (!['read', 'write'].includes(method)) return respondJson(res, 404, { ok: false, error: { message: 'Unknown Draw.io operation.' } })
+    if (!['read', 'write', 'save-image'].includes(method)) return respondJson(res, 404, { ok: false, error: { message: 'Unknown Draw.io operation.' } })
     const payload = await readJsonBody(req)
+
+    if (method === 'save-image') {
+      if (typeof payload.data !== 'string' || !payload.data.trim()) throw new Error('Image data is required.')
+      const target = await resolveCanvasTarget(ctx, payload.cwd, payload.path, true)
+      let buffer
+      if (payload.data.startsWith('data:')) {
+        const comma = payload.data.indexOf(',')
+        const base64 = comma >= 0 ? payload.data.slice(comma + 1) : payload.data
+        buffer = Buffer.from(base64, 'base64')
+      } else if (payload.data.startsWith('<svg') || payload.data.startsWith('<?xml')) {
+        buffer = Buffer.from(payload.data, 'utf8')
+      } else {
+        buffer = Buffer.from(payload.data, 'base64')
+      }
+      if (buffer.length > MAX_REQUEST_BYTES) throw new Error('Image data is too large to save safely.')
+      const sandboxPolicy = { mode: 'workspace-write', workspaceRoot: payload.cwd }
+      const outcome = typeof ctx.fs.writeFile === 'function'
+        ? await ctx.fs.writeFile(target, buffer, { kind: 'replace' }, undefined, sandboxPolicy)
+        : typeof ctx.fs.writeBinary === 'function'
+          ? await ctx.fs.writeBinary(target, buffer, { kind: 'replace' }, undefined, sandboxPolicy)
+          : await ctx.fs.writeText(target, payload.path.endsWith('.svg') ? buffer.toString('utf8') : buffer.toString('base64'), { kind: 'replace' }, undefined, sandboxPolicy)
+      ctx.emit?.('fs/observed', target, { kind: 'present', version: outcome?.version }, undefined)
+      return respondJson(res, 200, { ok: true, value: { path: target.displayPath ?? payload.path, bytes: buffer.length } })
+    }
+
     const target = await resolveCanvasTarget(ctx, payload.cwd, payload.path)
     const info = await ctx.fs.stat(target)
     if (!info || info.type !== 'file') throw new Error('Draw.io file was not found.')
@@ -104,14 +142,22 @@ async function serveCanvasApi(ctx, req, res) {
   }
 }
 
-async function resolveCanvasTarget(ctx, cwd, path) {
+async function resolveCanvasTarget(ctx, cwd, path, allowImage = false) {
   if (typeof cwd !== 'string' || !cwd.trim()) throw new Error('A workspace is required.')
-  assertDrawioPath(path)
+  if (allowImage) {
+    assertExportImagePath(path)
+  } else {
+    assertDrawioPath(path)
+  }
   const [root, target] = await Promise.all([ctx.fs.resolve(cwd), ctx.fs.resolve(path, { cwd })])
-  if (!ctx.fs.contains(root, target)) throw new Error('Draw.io file must stay inside the current workspace.')
+  if (!ctx.fs.contains(root, target)) throw new Error('File must stay inside the current workspace.')
   return target
 }
 
+function assertExportImagePath(value) {
+  if (typeof value !== 'string' || !/\.(png|svg|xml\.png)$/i.test(value)) throw new Error('path must end with .png or .svg')
+}
+
 async function readJsonBody(req) {
   const declared = Number(req.headers?.['content-length'])
   if (Number.isFinite(declared) && declared > MAX_REQUEST_BYTES) throw new Error('Request body is too large.')