living-documentation 8.8.0 → 8.10.0

package/dist/src/frontend/diagram/drawio-export.js

@@ -0,0 +1,499 @@
+// ── drawio (mxGraph) XML export ───────────────────────────────────────────────
+// Serialises the current diagram into a self-contained .drawio file.
+//
+// Mapping conventions:
+//  - vis-network coordinates are (cx, cy) centred; drawio uses top-left corner.
+//  - vis-network rotation is in radians; drawio uses degrees.
+//  - Port keys (N/NE/E/SE/S/SW/W/NW or custom anchor ids) become drawio
+//    exitX/exitY/entryX/entryY normalised from the node's top-left (0..1).
+//  - Free arrows (edges between two `shapeType: 'anchor'` pseudo-nodes) are
+//    emitted as drawio floating edges with explicit sourcePoint/targetPoint and
+//    no source/target attributes; the anchor pseudo-nodes themselves are dropped.
+//  - imageSrc paths (e.g. /images/foo.png) are inlined as data URIs at export
+//    time so the resulting file is self-contained outside the server.
+
+import { st } from './state.js';
+import { NODE_COLORS } from './constants.js';
+import { SHAPE_DEFAULTS } from './node-rendering.js';
+import {
+  CUSTOM_SHAPE_TYPE,
+  getCustomShapeDefinition,
+  getCustomShapeAnchors,
+  getCustomShapeLabelPlacement,
+} from './custom-shapes.js';
+import { showToast } from './toast.js';
+import { t } from './t.js';
+
+const DRAWIO_ROOT_PARENT = '1';
+const DRAWIO_LAYER = '1';
+const ANCHOR_SHAPE = 'anchor';
+
+// ── Public entry point ────────────────────────────────────────────────────────
+
+export async function exportCurrentDiagramAsDrawio() {
+  if (!st.network || !st.nodes || !st.edges) return;
+  try {
+    const data = snapshotCurrentDiagram();
+    const imageMap = await buildImageMap(data);
+    const { xml, droppedLabelRotations } = diagramToDrawioXml(data, imageMap);
+    triggerDownload(xml, sanitiseFilename(data.title) + '.drawio');
+    showToast(t('diagram.toast.drawio_exported'));
+    if (droppedLabelRotations > 0) {
+      showToast(t('diagram.toast.drawio_label_rotation_dropped').replace('{count}', droppedLabelRotations));
+    }
+  } catch (err) {
+    console.error('[drawio-export]', err);
+    showToast(t('diagram.toast.drawio_export_error') + (err && err.message ? ': ' + err.message : ''));
+  }
+}
+
+// ── Snapshot current diagram (same shape as persistence.saveDiagram) ──────────
+
+function snapshotCurrentDiagram() {
+  const positions = st.network.getPositions();
+  const nodes = (st.canonicalOrder || [])
+    .map((id) => st.nodes.get(id))
+    .filter(Boolean)
+    .map((n) => ({ ...n, x: positions[n.id]?.x ?? n.x, y: positions[n.id]?.y ?? n.y }));
+  const edges = st.edges.get().map((e) => ({ ...e }));
+  const titleEl = document.getElementById('diagramTitle');
+  const title = (titleEl && titleEl.value) || t('diagram.toast.untitled');
+  return { title, nodes, edges, edgesStraight: !!st.edgesStraight };
+}
+
+// ── Inline images as data URIs ────────────────────────────────────────────────
+
+async function buildImageMap({ nodes }) {
+  const urls = new Set();
+  for (const n of nodes) {
+    if (n.imageSrc) urls.add(n.imageSrc);
+    if (n.shapeType === CUSTOM_SHAPE_TYPE) {
+      const def = getCustomShapeDefinition(n.customShapeId);
+      if (def && def.imageSrc) urls.add(def.imageSrc);
+    }
+  }
+  const map = new Map();
+  await Promise.all([...urls].map(async (url) => {
+    if (/^data:/i.test(url)) { map.set(url, url); return; }
+    try {
+      const res = await fetch(url);
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      const blob = await res.blob();
+      const dataUri = await blobToDataUri(blob);
+      map.set(url, dataUri);
+    } catch (_err) {
+      // Fallback: keep the original URL (will work only if server is reachable when drawio opens).
+      map.set(url, url);
+    }
+  }));
+  return map;
+}
+
+function blobToDataUri(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = () => reject(reader.error || new Error('FileReader failed'));
+    reader.readAsDataURL(blob);
+  });
+}
+
+// ── XML generation ────────────────────────────────────────────────────────────
+
+function diagramToDrawioXml(data, imageMap) {
+  const counters = { droppedLabelRotations: 0 };
+  const idMap = new Map();
+  let nextId = 2; // 0 and 1 are reserved for drawio root + layer
+  for (const n of data.nodes) {
+    if (n.shapeType === ANCHOR_SHAPE) continue;
+    idMap.set(n.id, String(nextId++));
+  }
+
+  // Group containers: one drawio cell per unique groupId, hosting its members.
+  const groups = buildGroups(data.nodes);
+  for (const g of groups.values()) {
+    g.cellId = String(nextId++);
+  }
+
+  const cells = [];
+  cells.push(`<mxCell id="0"/>`);
+  cells.push(`<mxCell id="${DRAWIO_LAYER}" parent="0"/>`);
+
+  // Group container cells (placed before their children so they're behind in z-order).
+  for (const g of groups.values()) {
+    cells.push(
+      `<mxCell id="${g.cellId}" value="" style="group;" vertex="1" connectable="0" parent="${DRAWIO_LAYER}">` +
+      `<mxGeometry x="${num(g.minX)}" y="${num(g.minY)}" width="${num(g.maxX - g.minX)}" height="${num(g.maxY - g.minY)}" as="geometry"/>` +
+      `</mxCell>`
+    );
+  }
+
+  // Nodes (in canonical z-order, oldest first).
+  for (const n of data.nodes) {
+    if (n.shapeType === ANCHOR_SHAPE) continue;
+    cells.push(nodeToCell(n, idMap, groups, imageMap, counters));
+  }
+
+  // Edges.
+  for (const e of data.edges) {
+    cells.push(edgeToCell(e, data, idMap, data.edgesStraight));
+  }
+
+  const diagramId = 'd' + Math.random().toString(36).slice(2, 12);
+  const xml =
+    `<?xml version="1.0" encoding="UTF-8"?>` +
+    `<mxfile host="living-documentation" type="device">` +
+    `<diagram id="${diagramId}" name="${xmlAttr(data.title)}">` +
+    `<mxGraphModel dx="1422" dy="757" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="826" math="0" shadow="0">` +
+    `<root>${cells.join('')}</root>` +
+    `</mxGraphModel></diagram></mxfile>`;
+
+  return { xml, droppedLabelRotations: counters.droppedLabelRotations };
+}
+
+// ── Groups ────────────────────────────────────────────────────────────────────
+
+function buildGroups(nodes) {
+  const map = new Map();
+  for (const n of nodes) {
+    if (!n.groupId || n.shapeType === ANCHOR_SHAPE) continue;
+    const { W, H } = nodeSize(n);
+    const left = n.x - W / 2, top = n.y - H / 2;
+    const right = left + W, bottom = top + H;
+    const g = map.get(n.groupId) || { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity, memberIds: [] };
+    g.minX = Math.min(g.minX, left);
+    g.minY = Math.min(g.minY, top);
+    g.maxX = Math.max(g.maxX, right);
+    g.maxY = Math.max(g.maxY, bottom);
+    g.memberIds.push(n.id);
+    map.set(n.groupId, g);
+  }
+  return map;
+}
+
+// ── Node → cell ───────────────────────────────────────────────────────────────
+
+function nodeToCell(n, idMap, groups, imageMap, counters) {
+  const id = idMap.get(n.id);
+  const { W, H } = nodeSize(n);
+  const group = n.groupId && groups.get(n.groupId);
+  const parent = group ? group.cellId : DRAWIO_LAYER;
+  // drawio coords: top-left, relative to parent (group container or root layer).
+  const absX = n.x - W / 2;
+  const absY = n.y - H / 2;
+  const x = group ? absX - group.minX : absX;
+  const y = group ? absY - group.minY : absY;
+
+  const style = nodeStyle(n, imageMap, counters);
+  const label = n.label || '';
+  const hasMeta = hasLdMetadata(n);
+
+  const geom = `<mxGeometry x="${num(x)}" y="${num(y)}" width="${num(W)}" height="${num(H)}" as="geometry"/>`;
+
+  if (hasMeta) {
+    const attrs = ldAttributes(n);
+    return (
+      `<UserObject id="${id}" label="${xmlAttr(label)}"${attrs}>` +
+      `<mxCell style="${xmlAttr(style)}" vertex="1" parent="${parent}">${geom}</mxCell>` +
+      `</UserObject>`
+    );
+  }
+  return (
+    `<mxCell id="${id}" value="${xmlAttr(label)}" style="${xmlAttr(style)}" vertex="1" parent="${parent}">${geom}</mxCell>`
+  );
+}
+
+function nodeSize(n) {
+  const defaults = SHAPE_DEFAULTS[n.shapeType] || [100, 40];
+  const W = n.nodeWidth || defaults[0];
+  const H = n.shapeType === 'circle' ? W : (n.nodeHeight || defaults[1]);
+  return { W, H };
+}
+
+function nodeStyle(n, imageMap, counters) {
+  const parts = [];
+  const colors = NODE_COLORS[n.colorKey] || NODE_COLORS['c-gray'];
+  let suppressFill = false;
+
+  switch (n.shapeType) {
+    case 'box':
+      // default rounded rectangle in drawio looks closer to ours with rounded=0.
+      parts.push('rounded=0', 'whiteSpace=wrap', 'html=1');
+      break;
+    case 'ellipse':
+      parts.push('ellipse', 'whiteSpace=wrap', 'html=1');
+      break;
+    case 'circle':
+      parts.push('ellipse', 'whiteSpace=wrap', 'html=1');
+      break;
+    case 'database':
+      parts.push('shape=cylinder3', 'whiteSpace=wrap', 'html=1', 'boundedLbl=1', 'backgroundOutline=1', 'size=15');
+      break;
+    case 'actor':
+      parts.push('shape=actor', 'whiteSpace=wrap', 'html=1');
+      break;
+    case 'post-it':
+      parts.push('shape=note', 'whiteSpace=wrap', 'html=1', 'size=12');
+      break;
+    case 'text-free':
+      parts.push('text', 'html=1', 'strokeColor=none', 'fillColor=none', 'whiteSpace=wrap');
+      suppressFill = true;
+      break;
+    case 'image': {
+      const src = n.imageSrc && imageMap.get(n.imageSrc);
+      if (src) parts.push('shape=image', 'imageAspect=0', 'image=' + drawioImageValue(src));
+      else      parts.push('rounded=0', 'whiteSpace=wrap', 'html=1');
+      suppressFill = true;
+      break;
+    }
+    case CUSTOM_SHAPE_TYPE: {
+      const def = getCustomShapeDefinition(n.customShapeId);
+      const src = def && def.imageSrc && imageMap.get(def.imageSrc);
+      if (src) parts.push('shape=image', 'imageAspect=0', 'image=' + drawioImageValue(src));
+      else      parts.push('rounded=0', 'whiteSpace=wrap', 'html=1');
+      suppressFill = true;
+      applyCustomShapeLabelPlacement(n, parts);
+      break;
+    }
+    default:
+      parts.push('rounded=0', 'whiteSpace=wrap', 'html=1');
+  }
+
+  if (!suppressFill) {
+    parts.push(`fillColor=${colors.bg}`, `strokeColor=${colors.border}`, `fontColor=${colors.font}`);
+  } else if (n.shapeType === 'text-free') {
+    parts.push(`fontColor=${colors.font}`);
+  }
+
+  if (typeof n.bgOpacity === 'number' && n.bgOpacity !== 1) {
+    parts.push(`opacity=${Math.round(n.bgOpacity * 100)}`);
+  }
+  if (n.fontSize) parts.push(`fontSize=${n.fontSize}`);
+  if (n.textAlign && !parts.some((p) => p.startsWith('align='))) parts.push(`align=${n.textAlign}`);
+  if (n.textValign && !parts.some((p) => p.startsWith('verticalAlign='))) parts.push(`verticalAlign=${n.textValign}`);
+  if (n.rotation) parts.push(`rotation=${num(radToDeg(n.rotation))}`);
+
+  // Arbitrage (b): labelRotation independent of rotation is dropped — count for the user toast.
+  if (n.labelRotation && Math.abs((n.labelRotation || 0) - (n.rotation || 0)) > 1e-3) {
+    counters.droppedLabelRotations++;
+  }
+
+  if (n.locked) parts.push('editable=0', 'movable=0', 'resizable=0', 'rotatable=0', 'deletable=0');
+
+  return parts.join(';') + ';';
+}
+
+function applyCustomShapeLabelPlacement(n, parts) {
+  const placement = n.labelPlacement || getCustomShapeLabelPlacement(n.customShapeId);
+  switch (placement) {
+    case 'above':
+      parts.push('verticalLabelPosition=top', 'verticalAlign=bottom', 'labelPosition=center', 'align=center');
+      break;
+    case 'below':
+      parts.push('verticalLabelPosition=bottom', 'verticalAlign=top', 'labelPosition=center', 'align=center');
+      break;
+    case 'left':
+      parts.push('labelPosition=left', 'align=right', 'verticalLabelPosition=middle', 'verticalAlign=middle');
+      break;
+    case 'right':
+      parts.push('labelPosition=right', 'align=left', 'verticalLabelPosition=middle', 'verticalAlign=middle');
+      break;
+    case 'center':
+    default:
+      parts.push('verticalLabelPosition=middle', 'verticalAlign=middle', 'labelPosition=center', 'align=center');
+  }
+}
+
+// ── Edge → cell ───────────────────────────────────────────────────────────────
+
+function edgeToCell(e, data, idMap, edgesStraight) {
+  const fromNode = data.nodes.find((n) => n.id === e.from);
+  const toNode   = data.nodes.find((n) => n.id === e.to);
+  const fromIsAnchor = fromNode && fromNode.shapeType === ANCHOR_SHAPE;
+  const toIsAnchor   = toNode   && toNode.shapeType   === ANCHOR_SHAPE;
+  const isFreeArrow  = fromIsAnchor && toIsAnchor;
+
+  const id = 'e' + e.id;
+  const parts = ['edgeStyle=none', 'rounded=0', 'html=1', 'jettySize=auto', 'orthogonalLoop=1'];
+
+  // Curved vs straight — drawio's `curved=1` enables Bezier; we accept the
+  // cosmetic drift versus our custom port-normal control points.
+  if (!edgesStraight) parts.push('curved=1');
+
+  // Arrow direction.
+  const dir = e.arrowDir || 'to';
+  if (dir === 'to')        parts.push('endArrow=classic', 'startArrow=none');
+  else if (dir === 'from') parts.push('endArrow=none', 'startArrow=classic');
+  else if (dir === 'both') parts.push('endArrow=classic', 'startArrow=classic');
+  else                     parts.push('endArrow=none', 'startArrow=none');
+
+  if (e.dashes)    parts.push('dashed=1');
+  if (e.edgeColor) parts.push(`strokeColor=${e.edgeColor}`);
+  if (e.edgeWidth) parts.push(`strokeWidth=${e.edgeWidth}`);
+  if (e.fontSize)  parts.push(`fontSize=${e.fontSize}`);
+  if (e.edgeLocked) parts.push('editable=0', 'movable=0', 'deletable=0');
+
+  // Port-anchored attachment (exit/entry normalised 0..1 from node top-left).
+  if (e.fromPort && fromNode && !fromIsAnchor) {
+    const p = portToEntryExit(fromNode, e.fromPort);
+    if (p) parts.push(`exitX=${num(p.x)}`, `exitY=${num(p.y)}`, 'exitDx=0', 'exitDy=0', 'exitPerimeter=0');
+  }
+  if (e.toPort && toNode && !toIsAnchor) {
+    const p = portToEntryExit(toNode, e.toPort);
+    if (p) parts.push(`entryX=${num(p.x)}`, `entryY=${num(p.y)}`, 'entryDx=0', 'entryDy=0', 'entryPerimeter=0');
+  }
+
+  const style = parts.join(';') + ';';
+
+  const sourceAttr = !isFreeArrow && fromNode ? ` source="${idMap.get(e.from)}"` : '';
+  const targetAttr = !isFreeArrow && toNode   ? ` target="${idMap.get(e.to)}"`   : '';
+
+  let geometryInner = '';
+  if (isFreeArrow) {
+    // Floating endpoints — use the anchor pseudo-node positions directly.
+    geometryInner =
+      `<mxPoint x="${num(fromNode.x)}" y="${num(fromNode.y)}" as="sourcePoint"/>` +
+      `<mxPoint x="${num(toNode.x)}"   y="${num(toNode.y)}"   as="targetPoint"/>`;
+  }
+  const geometry = `<mxGeometry relative="1" as="geometry">${geometryInner}</mxGeometry>`;
+
+  const value = e.label ? xmlAttr(e.label) : '';
+  const edgeCell =
+    `<mxCell id="${id}" value="${value}" style="${xmlAttr(style)}" edge="1" parent="${DRAWIO_LAYER}"${sourceAttr}${targetAttr}>` +
+    geometry +
+    `</mxCell>`;
+
+  // Edge label child cell — only needed when we have a fixed wrap width, an
+  // explicit offset, or a non-zero label rotation. Otherwise the label rides
+  // on the parent edge directly (above).
+  const needsChildLabel = !!(
+    e.label &&
+    (e.edgeLabelWidth || e.edgeLabelOffsetX || e.edgeLabelOffsetY ||
+      (e.labelRotation && Math.abs(e.labelRotation) > 1e-3))
+  );
+
+  if (!needsChildLabel) return edgeCell;
+
+  // When using a child label, clear the parent edge's value so it's not drawn twice.
+  const edgeCellNoValue = edgeCell.replace(` value="${value}"`, ` value=""`);
+
+  const labelStyleParts = ['edgeLabel', 'html=1', 'align=center', 'verticalAlign=middle', 'resizable=0', 'points=[]'];
+  if (e.edgeLabelWidth) labelStyleParts.push('whiteSpace=wrap');
+  if (e.labelRotation)   labelStyleParts.push(`rotation=${num(radToDeg(e.labelRotation))}`);
+  const labelStyle = labelStyleParts.join(';') + ';';
+
+  const labelWidth  = e.edgeLabelWidth || 0;
+  const labelGeom =
+    `<mxGeometry x="0" y="0" relative="1" as="geometry">` +
+    `<mxPoint x="${num(e.edgeLabelOffsetX || 0)}" y="${num(e.edgeLabelOffsetY || 0)}" as="offset"/>` +
+    (labelWidth ? `<mxRectangle width="${num(labelWidth)}" height="20" as="alternateBounds"/>` : '') +
+    `</mxGeometry>`;
+
+  const labelCell =
+    `<mxCell id="${id}-lbl" value="${value}" style="${xmlAttr(labelStyle)}" vertex="1" connectable="0" parent="${id}">` +
+    labelGeom +
+    `</mxCell>`;
+
+  return edgeCellNoValue + labelCell;
+}
+
+// ── Port → normalised entry/exit (0..1 from node top-left) ────────────────────
+
+const RECT_PORT_EXIT = {
+  N:  [0.5, 0  ], NE: [1,   0  ], E:  [1,   0.5], SE: [1,   1  ],
+  S:  [0.5, 1  ], SW: [0,   1  ], W:  [0,   0.5], NW: [0,   0  ],
+};
+const SQRT2_INV = 1 / Math.sqrt(2);
+const CIRC_PORT_EXIT = {
+  N:  [0.5,             0                ],
+  NE: [0.5 + SQRT2_INV / 2, 0.5 - SQRT2_INV / 2],
+  E:  [1,               0.5              ],
+  SE: [0.5 + SQRT2_INV / 2, 0.5 + SQRT2_INV / 2],
+  S:  [0.5,             1                ],
+  SW: [0.5 - SQRT2_INV / 2, 0.5 + SQRT2_INV / 2],
+  W:  [0,               0.5              ],
+  NW: [0.5 - SQRT2_INV / 2, 0.5 - SQRT2_INV / 2],
+};
+const DATABASE_PORT_EXIT = {
+  N:  [0.5, 0   ], NE: [1,   0.12],
+  E:  [1,   0.5 ], SE: [1,   0.88],
+  S:  [0.5, 1   ], SW: [0,   0.88],
+  W:  [0,   0.5 ], NW: [0,   0.12],
+};
+
+function portToEntryExit(node, portKey) {
+  if (node.shapeType === CUSTOM_SHAPE_TYPE) {
+    const anchor = getCustomShapeAnchors(node.customShapeId).find((a) => a.id === portKey);
+    if (!anchor) return null;
+    return { x: anchor.x, y: anchor.y };
+  }
+  const table =
+    node.shapeType === 'database'  ? DATABASE_PORT_EXIT :
+    (node.shapeType === 'ellipse' || node.shapeType === 'circle') ? CIRC_PORT_EXIT :
+    RECT_PORT_EXIT;
+  const xy = table[portKey];
+  return xy ? { x: xy[0], y: xy[1] } : null;
+}
+
+// ── UserObject attributes for semantic metadata + link ────────────────────────
+
+function hasLdMetadata(n) {
+  return !!(n.nodeLink || n.description || n.kind || n.renderAs || (Array.isArray(n.evidence) && n.evidence.length));
+}
+
+function ldAttributes(n) {
+  const out = [];
+  if (n.nodeLink)    out.push(` link="${xmlAttr(n.nodeLink)}"`);
+  if (n.description) out.push(` ld_description="${xmlAttr(n.description)}"`);
+  if (n.kind)        out.push(` ld_kind="${xmlAttr(n.kind)}"`);
+  if (n.renderAs)    out.push(` ld_renderAs="${xmlAttr(n.renderAs)}"`);
+  if (Array.isArray(n.evidence) && n.evidence.length) {
+    out.push(` ld_evidence="${xmlAttr(JSON.stringify(n.evidence))}"`);
+  }
+  return out.join('');
+}
+
+// ── Encoding helpers ──────────────────────────────────────────────────────────
+
+function xmlAttr(s) {
+  return String(s == null ? '' : s)
+    .replace(/&/g, '&amp;')
+    .replace(/"/g, '&quot;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/\n/g, '&#10;')
+    .replace(/\r/g, '&#13;');
+}
+
+function num(v) {
+  if (!Number.isFinite(v)) return '0';
+  return Math.abs(v - Math.round(v)) < 1e-6 ? String(Math.round(v)) : v.toFixed(3);
+}
+
+function radToDeg(rad) {
+  return rad * 180 / Math.PI;
+}
+
+// drawio's style parser treats `;` as the property separator, which collides
+// with the standard `data:image/png;base64,...` prefix. drawio accepts a
+// comma-form (`data:image/png,base64,...`) as a workaround so the value can
+// sit unescaped inside the style string.
+function drawioImageValue(src) {
+  return src.replace(/^data:([^;,]+);base64,/i, 'data:$1,base64,');
+}
+
+function sanitiseFilename(s) {
+  return String(s || 'diagram').replace(/[^\w.\- ]+/g, '_').replace(/\s+/g, '_').slice(0, 80) || 'diagram';
+}
+
+function triggerDownload(content, filename) {
+  const blob = new Blob([content], { type: 'application/xml;charset=utf-8' });
+  const url  = URL.createObjectURL(blob);
+  const a    = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}

package/dist/src/frontend/diagram/main.js

@@ -23,6 +23,7 @@ import { showToast }       from './toast.js';
 import { t }               from './t.js';
 import { initEvidenceMode, toggleEvidenceMode } from './evidence.js';
 import { customShapeIdFromTool, isCustomShapeTool } from './custom-shapes.js';
+import { exportCurrentDiagramAsDrawio } from './drawio-export.js';
 
 const DIAGRAM_ID_COPY_FEEDBACK_MS = 1800;
 
@@ -195,6 +196,7 @@ document.getElementById('btnZoomReset').addEventListener('click', resetZoom);
 
 document.getElementById('btnDark').addEventListener('click', toggleDark);
 document.getElementById('btnDebug').addEventListener('click', toggleDebug);
+document.getElementById('btnExportDrawio').addEventListener('click', exportCurrentDiagramAsDrawio);
 document.getElementById('btnSave').addEventListener('click',  saveDiagram);
 document.getElementById('btnNewDiagram').addEventListener('click', newDiagram);
 

package/dist/src/frontend/diagram.html

@@ -685,6 +685,19 @@
         class="hidden w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"
       ></div>
 
+      <button
+        id="btnExportDrawio"
+        class="tool-btn"
+        data-i18n-title="diagram.toolbar.export_drawio"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+          <polyline points="7 10 12 15 17 10"/>
+          <line x1="12" y1="15" x2="12" y2="3"/>
+        </svg>
+      </button>
+      <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
+
       <button
         id="btnSave"
         disabled

package/dist/src/frontend/i18n/en.json

@@ -499,6 +499,7 @@
   "diagram.toolbar.zoom_in": "Zoom +",
   "diagram.toolbar.fit": "Fit view",
   "diagram.toolbar.debug": "Debug overlay",
+  "diagram.toolbar.export_drawio": "Export as drawio (.drawio)",
   "diagram.toolbar.save": "Save",
 
   "diagram.sidebar.title": "Diagrams",
@@ -600,6 +601,9 @@
   "diagram.toast.confirm_delete": "Delete this diagram?",
   "diagram.toast.new_diagram_title": "New diagram",
   "diagram.toast.untitled": "Untitled",
+  "diagram.toast.drawio_exported": "Diagram exported as .drawio",
+  "diagram.toast.drawio_export_error": "drawio export failed",
+  "diagram.toast.drawio_label_rotation_dropped": "{count} label rotation(s) dropped — drawio cannot rotate labels independently from their shape",
   "diagram.toast.diagram_linked": "Diagram \"{title}\" created and linked",
 
   "shape_editor.show_in_diagram_label": "Show in diagram palette",

package/dist/src/frontend/i18n/fr.json

@@ -499,6 +499,7 @@
   "diagram.toolbar.zoom_in": "Zoom +",
   "diagram.toolbar.fit": "Ajuster la vue",
   "diagram.toolbar.debug": "Overlay debug",
+  "diagram.toolbar.export_drawio": "Exporter en drawio (.drawio)",
   "diagram.toolbar.save": "Enregistrer",
 
   "diagram.sidebar.title": "Diagrammes",
@@ -600,6 +601,9 @@
   "diagram.toast.confirm_delete": "Supprimer ce diagramme ?",
   "diagram.toast.new_diagram_title": "Nouveau diagramme",
   "diagram.toast.untitled": "Sans titre",
+  "diagram.toast.drawio_exported": "Diagramme exporté en .drawio",
+  "diagram.toast.drawio_export_error": "Échec de l'export drawio",
+  "diagram.toast.drawio_label_rotation_dropped": "{count} rotation(s) de label ignorée(s) — drawio ne permet pas de tourner un label indépendamment de sa forme",
   "diagram.toast.diagram_linked": "Diagramme \"{title}\" créé et lié",
 
   "shape_editor.show_in_diagram_label": "Afficher dans la palette du diagramme",

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "living-documentation",
-  "version": "8.8.0",
-  "description": "A CLI tool that serves a local Markdown documentation viewer",
+  "version": "8.10.0",
+  "description": "Local Markdown documentation hub with a built-in MCP server — coding agents create ADRs, draw diagrams and detect drift while you code.",
   "main": "dist/src/server.js",
   "bin": {
     "living-documentation": "dist/bin/cli.js"
   },
   "files": [
     "dist/",
-    "README.md"
+    "images/",
+    "README.md",
+    "LICENSE"
   ],
   "scripts": {
     "build": "tsc && ts-node scripts/copy-assets.ts && chmod +x dist/bin/cli.js",
@@ -22,9 +24,21 @@
   },
   "keywords": [
     "documentation",
+    "living-documentation",
     "markdown",
     "viewer",
-    "cli"
+    "cli",
+    "mcp",
+    "model-context-protocol",
+    "adr",
+    "architecture-decision-records",
+    "ai",
+    "claude",
+    "cursor",
+    "coding-agent",
+    "diagram",
+    "c4-model",
+    "drift-detection"
   ],
   "author": "Youssef MEDAGHRI-ALAOUI",
   "license": "AGPL-3.0",