@civilization/dsh-drawio 0.2.1 → 0.4.0

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({
@@ -33,7 +46,7 @@ export function apply(ctx) {
   }))
   register(ctx, defineTool({
     name: 'drawio_edit',
-    description: 'Apply a batch of semantic edits to an existing .drawio file. Supported operations are add_node, add_edge, update and delete. Cell ids must be stable and unique. Inspect the file first when modifying an existing diagram.',
+    description: 'Apply a batch of semantic edits to an existing .drawio file. Supported operations: add_node, add_edge, update, delete, add_page, delete_page, rename_page. Cell ids must be stable and unique. Inspect the file first when modifying an existing diagram.',
     parameters: {
       path: pathParameter,
       page: { oneOf: [{ type: 'string' }, { type: 'number' }] },
@@ -42,8 +55,9 @@ export function apply(ctx) {
         items: {
           type: 'object', additionalProperties: false,
           properties: {
-            type: { type: 'string', enum: ['add_node', 'add_edge', 'update', 'delete'], required: true },
-            id: { type: 'string', required: true }, label: { type: 'string' }, style: { type: 'string' }, parent: { type: 'string' },
+            type: { type: 'string', enum: ['add_node', 'add_edge', 'update', 'delete', 'add_page', 'delete_page', 'rename_page'], required: true },
+            id: { type: 'string' }, label: { type: 'string' }, name: { type: 'string' }, page: { oneOf: [{ type: 'string' }, { type: 'number' }] },
+            style: { type: 'string' }, stylePatch: { type: 'object', additionalProperties: true }, parent: { type: 'string' },
             source: { type: 'string' }, target: { type: 'string' },
             x: { type: 'number' }, y: { type: 'number' }, width: { type: 'number' }, height: { type: 'number' },
           },
@@ -87,31 +101,68 @@ 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 (!['stat', '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.')
     if (Number(info.size) > MAX_DIAGRAM_BYTES) throw new Error('Draw.io file is too large to open safely.')
-    if (method === 'read') return respondJson(res, 200, { ok: true, value: { content: await ctx.fs.readText(target) } })
+    if (method === 'stat') return respondJson(res, 200, { ok: true, value: { version: info.version, size: Number(info.size), mtime: info.mtime } })
+    if (method === 'read') return respondJson(res, 200, { ok: true, value: { content: await ctx.fs.readText(target), version: info.version } })
     if (typeof payload.content !== 'string' || Buffer.byteLength(payload.content) > MAX_DIAGRAM_BYTES) throw new Error('Draw.io content is too large to save safely.')
+    if (payload.version !== undefined && info.version !== undefined && String(payload.version) !== String(info.version)) {
+      return respondJson(res, 409, { ok: false, conflict: true, error: { message: 'File has been modified by an external process or agent.' } })
+    }
     const xml = normalizeDrawio(payload.content)
     const sandboxPolicy = { mode: 'workspace-write', workspaceRoot: payload.cwd }
-    await ctx.fs.writeText(target, xml, { kind: 'replaceIfVersion', version: info.version }, undefined, sandboxPolicy)
-    return respondJson(res, 200, { ok: true, value: { ok: true } })
+    const outcome = await ctx.fs.writeText(target, xml, { kind: 'replaceIfVersion', version: payload.version ?? info.version }, undefined, sandboxPolicy)
+    return respondJson(res, 200, { ok: true, value: { ok: true, version: outcome?.version ?? info.version } })
   } catch (error) {
     return respondJson(res, 400, { ok: false, error: { message: String(error?.message || error).slice(0, 500) } })
   }
 }
 
-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.')

package/src/xml.js

@@ -10,18 +10,42 @@ export function inspectDrawio(source, includeXml = false) {
   const pages = pageNodes(document).map((page, index) => {
     const model = modelForPage(page)
     const cells = Array.from(model.getElementsByTagName('mxCell'))
+    const nodeCells = cells.filter(cell => cell.getAttribute('vertex') === '1')
+    const edgeCells = cells.filter(cell => cell.getAttribute('edge') === '1')
+    const childMap = new Map()
+    for (const cell of nodeCells) {
+      childMap.set(cell.getAttribute('id'), [])
+    }
+    for (const cell of nodeCells) {
+      const parentId = cell.getAttribute('parent')
+      if (parentId && childMap.has(parentId)) {
+        childMap.get(parentId).push(cell.getAttribute('id'))
+      }
+    }
     return {
       index,
       id: page.getAttribute('id') || `page-${index + 1}`,
       name: page.getAttribute('name') || `Page-${index + 1}`,
-      nodes: cells.filter(cell => cell.getAttribute('vertex') === '1').map(cell => cellSummary(cell)),
-      edges: cells.filter(cell => cell.getAttribute('edge') === '1').map(cell => ({
-        id: cell.getAttribute('id'),
-        label: cell.getAttribute('value') || '',
-        source: cell.getAttribute('source') || '',
-        target: cell.getAttribute('target') || '',
-        style: cell.getAttribute('style') || '',
-      })),
+      nodes: nodeCells.map(cell => {
+        const id = cell.getAttribute('id')
+        const rawValue = cell.getAttribute('value') || ''
+        return {
+          ...cellSummary(cell),
+          plainText: stripHtml(rawValue),
+          children: childMap.get(id) || [],
+        }
+      }),
+      edges: edgeCells.map(cell => {
+        const rawValue = cell.getAttribute('value') || ''
+        return {
+          id: cell.getAttribute('id'),
+          label: rawValue,
+          plainText: stripHtml(rawValue),
+          source: cell.getAttribute('source') || '',
+          target: cell.getAttribute('target') || '',
+          style: cell.getAttribute('style') || '',
+        }
+      }),
     }
   })
   return { pages, ...(includeXml ? { xml: serializer.serializeToString(document) } : {}) }
@@ -29,14 +53,51 @@ export function inspectDrawio(source, includeXml = false) {
 
 export function editDrawio(source, operations, pageSelector) {
   const document = parseDrawio(source || EMPTY_DRAWIO)
-  const pages = pageNodes(document)
-  const page = selectPage(pages, pageSelector)
-  const model = modelForPage(page)
-  const root = model.getElementsByTagName('root')[0]
+  let pages = pageNodes(document)
+  let currentPage = selectPage(pages, pageSelector)
+  let model = modelForPage(currentPage)
+  let root = model.getElementsByTagName('root')[0]
   if (!root) throw new Error('The selected page has no mxGraphModel/root element.')
 
-  for (const operation of operations) applyOperation(document, root, operation)
-  replacePageModel(document, page, model)
+  for (const operation of operations) {
+    if (!operation || typeof operation !== 'object') throw new Error('Every operation must be an object.')
+    const { type } = operation
+    if (type === 'add_page') {
+      const newPageId = operation.id || `page-${Date.now().toString(36)}`
+      const newPageName = operation.name || `Page-${pages.length + 1}`
+      const newDiagram = document.createElement('diagram')
+      newDiagram.setAttribute('id', newPageId)
+      newDiagram.setAttribute('name', newPageName)
+      const templateDoc = parseDrawio(EMPTY_DRAWIO)
+      const templateModel = modelForPage(pageNodes(templateDoc)[0])
+      newDiagram.appendChild(document.importNode(templateModel, true))
+      document.documentElement.appendChild(newDiagram)
+      pages = pageNodes(document)
+      continue
+    }
+    if (type === 'delete_page') {
+      if (pages.length <= 1) throw new Error('Cannot delete the only remaining diagram page.')
+      const targetPage = selectPage(pages, operation.page)
+      document.documentElement.removeChild(targetPage)
+      pages = pageNodes(document)
+      if (currentPage === targetPage) {
+        currentPage = pages[0]
+        model = modelForPage(currentPage)
+        root = model.getElementsByTagName('root')[0]
+      }
+      continue
+    }
+    if (type === 'rename_page') {
+      const targetPage = operation.page !== undefined ? selectPage(pages, operation.page) : currentPage
+      const newName = required(operation.name, 'rename_page.name')
+      targetPage.setAttribute('name', newName)
+      continue
+    }
+
+    applyOperation(document, root, operation)
+  }
+
+  replacePageModel(document, currentPage, model)
   document.documentElement.setAttribute('compressed', 'false')
   document.documentElement.setAttribute('modified', new Date().toISOString())
   return serializer.serializeToString(document)
@@ -49,6 +110,46 @@ export function normalizeDrawio(source) {
   return serializer.serializeToString(document)
 }
 
+export function stripHtml(input) {
+  if (!input || typeof input !== 'string') return ''
+  return input
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/&nbsp;/g, ' ')
+    .replace(/&amp;/g, '&')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;/g, "'")
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
+export function patchStyle(currentStyle = '', patch = {}) {
+  const parts = currentStyle.split(';').map(s => s.trim()).filter(Boolean)
+  const map = new Map()
+  const bareKeys = []
+  for (const part of parts) {
+    const eqIdx = part.indexOf('=')
+    if (eqIdx >= 0) {
+      map.set(part.slice(0, eqIdx), part.slice(eqIdx + 1))
+    } else {
+      bareKeys.push(part)
+    }
+  }
+  for (const [key, val] of Object.entries(patch)) {
+    if (val === null || val === undefined || val === '') {
+      map.delete(key)
+    } else {
+      map.set(key, String(val))
+    }
+  }
+  const serialized = [
+    ...bareKeys,
+    ...Array.from(map.entries()).map(([k, v]) => `${k}=${v}`),
+  ].join(';')
+  return serialized ? `${serialized};` : ''
+}
+
 function applyOperation(document, root, operation) {
   if (!operation || typeof operation !== 'object') throw new Error('Every operation must be an object.')
   const type = operation.type
@@ -97,6 +198,10 @@ function applyOperation(document, root, operation) {
     const cell = assertCell(root, required(operation.id, 'update.id'))
     if (operation.label !== undefined) cell.setAttribute('value', stringValue(operation.label))
     if (operation.style !== undefined) cell.setAttribute('style', stringValue(operation.style))
+    if (operation.stylePatch && typeof operation.stylePatch === 'object') {
+      const current = cell.getAttribute('style') || ''
+      cell.setAttribute('style', patchStyle(current, operation.stylePatch))
+    }
     if (operation.parent !== undefined) cell.setAttribute('parent', stringValue(operation.parent))
     const geometryKeys = ['x', 'y', 'width', 'height']
     if (geometryKeys.some(key => operation[key] !== undefined)) {