@likec4/generators 1.48.0 → 1.50.0

package/dist/index.mjs

@@ -1,11 +1,10 @@
 import { CompositeGeneratorNode, NL, expandToNode, joinToNode, toString } from "langium/generate";
 import { isEmptyish, isNullish, keys, map, pipe, values } from "remeda";
-import { nonexhaustive } from "@likec4/core";
+import { LikeC4Styles, nonexhaustive } from "@likec4/core";
+import { RichText, flattenMarkdownOrString } from "@likec4/core/types";
+import pako from "pako";
 import JSON5 from "json5";
 import { compareNatural, invariant, sortNaturalByFqn } from "@likec4/core/utils";
-import { RichText } from "@likec4/core/types";
-
-//#region src/d2/generate-d2.ts
 const capitalizeFirstLetter$2 = (value) => value.charAt(0).toLocaleUpperCase() + value.slice(1);
 const fqnName$2 = (nodeId) => nodeId.split(".").map(capitalizeFirstLetter$2).join("");
 const nodeName$2 = (node) => {
@@ -27,6 +26,7 @@ const d2shape = ({ shape }) => {
 		case "document": return shape;
 		case "person": return "c4-person";
 		case "storage": return "stored_data";
+		case "component":
 		case "bucket":
 		case "mobile":
 		case "browser": return "rectangle";
@@ -52,9 +52,2149 @@ function generateD2(viewmodel) {
 	};
 	return toString(new CompositeGeneratorNode().append("direction: ", d2direction(view), NL, NL).append(joinToNode(nodes.filter((n) => isNullish(n.parent)), (n) => printNode(n), { appendNewLineIfNotEmpty: true })).appendIf(edges.length > 0, NL, joinToNode(edges, (e) => printEdge(e), { appendNewLineIfNotEmpty: true })));
 }
+/**
+* DrawIO protocol and layout constants. Single source of truth so export/parse
+* stay in sync and magic numbers are named for readability.
+*/
+/** Draw.io internal page link prefix; cell link becomes "data:page/id,likec4-<viewId>". */
+const DRAWIO_PAGE_LINK_PREFIX = "data:page/id,likec4-";
+/** Diagram (tab) id inside mxfile; we use "likec4-<viewId>" so Draw.io opens the correct tab. */
+const DRAWIO_DIAGRAM_ID_PREFIX = "likec4-";
+/** Fixed canvas size so the diagram opens centered in Draw.io (layout bounds often equal content). */
+const DEFAULT_CANVAS_WIDTH = 800;
+const DEFAULT_CANVAS_HEIGHT = 600;
+/** Default node bbox when layout has no position (used to detect "unlaid" nodes for spread/wrap). */
+const DEFAULT_NODE_WIDTH = 120;
+const DEFAULT_NODE_HEIGHT = 60;
+/** Vertical gap when spreading multiple nodes that share the same default bbox. */
+const NODES_SPREAD_GAP = 24;
+/** First id assigned to container title cells (incremented per container). */
+const CONTAINER_TITLE_CELL_ID_START = 1e4;
+/** Container title text cell: min/max width (px), approximate width per character, height, inset from container edge. */
+const CONTAINER_TITLE_MIN_WIDTH_PX = 60;
+const CONTAINER_TITLE_MAX_WIDTH_PX = 260;
+const CONTAINER_TITLE_CHAR_WIDTH_PX = 8;
+const CONTAINER_TITLE_HEIGHT_PX = 18;
+const CONTAINER_TITLE_INSET_X = 8;
+const CONTAINER_TITLE_INSET_Y = 8;
+/** Max height (px) for container title area when matching title cell to container (parse). */
+const CONTAINER_TITLE_AREA_MAX_HEIGHT_PX = 40;
+/** Ratio of container height used for title area when matching (parse). */
+const CONTAINER_TITLE_AREA_HEIGHT_RATIO = .5;
+/** Tolerance (px) for title cell position inside container bounds (parse). */
+const CONTAINER_TITLE_AREA_TOLERANCE = 2;
+/** Default container fill opacity (0–100) when not set in style. */
+const DEFAULT_CONTAINER_OPACITY = 15;
+/** Default node fill/stroke/font when no theme color (hex). */
+const DEFAULT_NODE_FILL_HEX = "#dae8fc";
+const DEFAULT_NODE_STROKE_HEX = "#2563eb";
+const DEFAULT_NODE_FONT_HEX = "#1e40af";
+/** mxGraphModel page dimensions (draw.io default A4-like). */
+const MXGRAPH_PAGE_WIDTH = 827;
+const MXGRAPH_PAGE_HEIGHT = 1169;
+/** mxGraphModel default grid origin (dx, dy) in mxGraphModel attribute. */
+const MXGRAPH_DEFAULT_DX = 800;
+const MXGRAPH_DEFAULT_DY = 800;
+/** Default filename when exporting all views into one .drawio file (CLI and playground). */
+const DEFAULT_DRAWIO_ALL_FILENAME = "diagrams.drawio";
+/** LikeC4 app font (matches --mantine-font-family / --likec4-app-font-default). Used in generate-drawio for cell text. */
+const LIKEC4_FONT_FAMILY = "'IBM Plex Sans Variable',ui-sans-serif,system-ui,sans-serif";
+/** Container title color in diagram (matches LikeC4 diagram compound title). Used in generate-drawio for container title cell. */
+const CONTAINER_TITLE_COLOR = "#74c0fc";
+/**
+* Shared XML escape/decode for DrawIO generate and parse.
+* Single place so escaping rules stay in sync (Clean Code 8.5.2).
+*/
+/**
+* Escape for use inside XML attributes and text.
+* @param unsafe - Raw string that may contain &, <, >, ", '
+* @returns XML-safe string with entities escaped
+*/
+function escapeXml(unsafe) {
+	return unsafe.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;").replaceAll("'", "&apos;");
+}
+/**
+* Decode XML entities (inverse of escapeXml for the five standard entities).
+* @param s - String with &lt; &gt; &quot; &apos; &amp;
+* @returns Decoded string
+*/
+function decodeXmlEntities(s) {
+	return s.replaceAll("&lt;", "<").replaceAll("&gt;", ">").replaceAll("&quot;", "\"").replaceAll("&apos;", "'").replaceAll("&amp;", "&");
+}
+/**
+* Parse DrawIO (mxGraph) XML and generate LikeC4 source code.
+* Extracts vertices as elements and edges as relations; preserves colors, descriptions,
+* technology and other compatible attributes for full bidirectional compatibility.
+* Supports both uncompressed (raw mxGraphModel inside <diagram>) and compressed
+* (base64 + deflate, draw.io default) diagram content.
+*/
+/**
+* Normalize unknown to a string for error messages (Error → message; else String).
+* @param err - Caught value (Error or other).
+* @returns Human-readable string for logging or rethrow.
+*/
+function toErrorMessage(err) {
+	return err instanceof Error ? err.message : String(err);
+}
+/** Type guard: true when cell is an edge with non-empty source and target. */
+function isEdgeWithEndpoints(c) {
+	return c.edge === true && typeof c.source === "string" && typeof c.target === "string";
+}
+/** True if char is space, tab, or newline (word boundary for attr names). */
+function isAttrBoundaryChar(c) {
+	return c === " " || c === "	" || c === "\n" || c === "\r";
+}
+/** Get attribute value from open-tag string (e.g. "id=\"x\" vertex=\"1\""). No regex to avoid ReDoS. Matches only on word boundary so "id=" does not match "userid=". */
+function getAttr(attrs, name) {
+	const needle = `${name}=`;
+	const lower = attrs.toLowerCase();
+	const needleLower = needle.toLowerCase();
+	let i = 0;
+	while (i < attrs.length) {
+		const start = lower.indexOf(needleLower, i);
+		if (start === -1) return void 0;
+		if (!isAttrBoundaryChar(start === 0 ? " " : attrs[start - 1] ?? " ")) {
+			i = start + 1;
+			continue;
+		}
+		const quoteStart = start + needle.length;
+		if (quoteStart < attrs.length && attrs[quoteStart] === "\"") {
+			const valueEnd = attrs.indexOf("\"", quoteStart + 1);
+			if (valueEnd !== -1) return attrs.slice(quoteStart + 1, valueEnd);
+		}
+		i = start + 1;
+	}
+}
+/** Find end of XML open tag (first unquoted '>'). Handles both single- and double-quoted attributes. Avoids regex for S5852. */
+function findOpenTagEnd(xml, start) {
+	let quoteChar = "";
+	let i = start;
+	while (i < xml.length) {
+		const c = xml[i];
+		if (c === "\"" || c === "'") {
+			if (quoteChar === "") quoteChar = c;
+			else if (quoteChar === c) quoteChar = "";
+		} else if (c === ">" && quoteChar === "") return i;
+		i += 1;
+	}
+	return -1;
+}
+/** Find start of tag '<tagName' (case-insensitive). */
+function indexOfTagStart(xml, tagName, fromIndex) {
+	const lower = xml.toLowerCase();
+	const needle = `<${tagName.toLowerCase()}`;
+	return lower.indexOf(needle, fromIndex);
+}
+/** Find start of closing tag '</tagName>' (case-insensitive). */
+function indexOfClosingTag(xml, tagName, fromIndex) {
+	const lower = xml.toLowerCase();
+	const needle = `</${tagName.toLowerCase()}>`;
+	return lower.indexOf(needle, fromIndex);
+}
+/** Parse numeric attribute; returns undefined if missing or not a number. */
+function parseNum(str) {
+	if (str === void 0 || str === "") return void 0;
+	const num = Number.parseFloat(str);
+	return Number.isNaN(num) ? void 0 : num;
+}
+/** Get style value decoded for URI component; undefined if missing or empty. Safe against malformed percent-encoding. */
+function getDecodedStyle(styleMap, key) {
+	const v = styleMap.get(key);
+	if (v == null || v === "") return void 0;
+	try {
+		return decodeURIComponent(v);
+	} catch {
+		return v;
+	}
+}
+/**
+* Parse DrawIO style string (semicolon-separated key=value) into a map.
+* Entries with empty values are intentionally dropped (meaningful style values are non-empty).
+*/
+function parseStyle(style) {
+	const map = /* @__PURE__ */ new Map();
+	if (!style) return map;
+	for (const part of style.split(";")) {
+		const eq = part.indexOf("=");
+		if (eq > 0) {
+			const k = part.slice(0, eq).trim();
+			const v = part.slice(eq + 1).trim();
+			if (k && v) map.set(k.toLowerCase(), v);
+		}
+	}
+	return map;
+}
+/** Keys we map to dedicated DrawioCell fields; other data keys go to customData. */
+const MAPPED_DATA_KEYS = new Set(["likec4description", "likec4technology"]);
+/** Extract all <data key="...">...</data> from mxUserObject inner XML. Index-based to avoid ReDoS. */
+function parseAllUserData(fullTag) {
+	const out = {};
+	let from = 0;
+	for (;;) {
+		const tagStart = indexOfTagStart(fullTag, "data", from);
+		if (tagStart === -1) break;
+		const endOpen = findOpenTagEnd(fullTag, tagStart);
+		if (endOpen === -1) break;
+		const key = getAttr(fullTag.slice(tagStart, endOpen + 1), "key")?.trim();
+		const closeStart = indexOfClosingTag(fullTag, "data", endOpen + 1);
+		if (closeStart === -1) break;
+		const raw = fullTag.slice(endOpen + 1, closeStart).trim();
+		if (key) out[key] = decodeXmlEntities(raw);
+		from = closeStart + 7;
+	}
+	return out;
+}
+/** Extract open tag <mxGeometry ...> from cell XML. No regex to avoid ReDoS. */
+function extractMxGeometryOpenTag(fullTag) {
+	const tagStart = indexOfTagStart(fullTag, "mxGeometry", 0);
+	if (tagStart === -1) return "";
+	const endOpen = findOpenTagEnd(fullTag, tagStart);
+	if (endOpen === -1) return "";
+	return fullTag.slice(tagStart, endOpen + 1);
+}
+/** Extract inner content of first <mxGeometry>...</mxGeometry> in cell XML. No regex to avoid ReDoS. */
+function extractMxGeometryInner(fullTag) {
+	const tagStart = indexOfTagStart(fullTag, "mxGeometry", 0);
+	if (tagStart === -1) return void 0;
+	const endOpen = findOpenTagEnd(fullTag, tagStart);
+	if (endOpen === -1) return void 0;
+	const closeStart = indexOfClosingTag(fullTag, "mxGeometry", endOpen + 1);
+	if (closeStart === -1) return void 0;
+	return fullTag.slice(endOpen + 1, closeStart);
+}
+/** Extract edge waypoints from mxGeometry Array/mxPoint inside cell XML. Returns JSON array of [x,y][] or undefined. */
+function parseEdgePoints(fullTag) {
+	const inner = extractMxGeometryInner(fullTag);
+	if (inner === void 0) return void 0;
+	const points = [];
+	let from = 0;
+	for (;;) {
+		const tagStart = indexOfTagStart(inner, "mxPoint", from);
+		if (tagStart === -1) break;
+		const endOpen = findOpenTagEnd(inner, tagStart);
+		if (endOpen === -1) break;
+		const tag = inner.slice(tagStart, endOpen + 1);
+		const px = parseNum(getAttr(tag, "x"));
+		const py = parseNum(getAttr(tag, "y"));
+		if (px !== void 0 && py !== void 0) points.push([px, py]);
+		from = endOpen + 1;
+	}
+	if (points.length === 0) return void 0;
+	return JSON.stringify(points);
+}
+/** Extract LikeC4 custom data from mxUserObject/data inside cell XML. */
+function parseUserData(fullTag) {
+	const all = parseAllUserData(fullTag);
+	const out = {};
+	if (all["likec4Description"] != null) out.description = all["likec4Description"];
+	if (all["likec4Technology"] != null) out.technology = all["likec4Technology"];
+	const rest = {};
+	for (const [k, v] of Object.entries(all)) if (!MAPPED_DATA_KEYS.has(k.toLowerCase()) && v != null && v !== "") rest[k] = v;
+	if (Object.keys(rest).length > 0) out.customData = JSON.stringify(rest);
+	return out;
+}
+/** Extract viewId from Draw.io internal page link for navigateTo round-trip. No regex to avoid ReDoS. */
+function navigateToFromLink(link) {
+	if (!link || link === "") return void 0;
+	const prefix = DRAWIO_PAGE_LINK_PREFIX.toLowerCase();
+	if (!link.toLowerCase().startsWith(prefix)) return void 0;
+	return link.slice(20).trim();
+}
+/** Optional fields for DrawioCell (SOLID: single place for conditional spreads). */
+function buildCellOptionalFields(params) {
+	const { styleMap, userData, geomStr, fullTag, vertex, edge, navigateTo } = params;
+	const x = parseNum(getAttr(geomStr, "x"));
+	const y = parseNum(getAttr(geomStr, "y"));
+	const width = parseNum(getAttr(geomStr, "width"));
+	const height = parseNum(getAttr(geomStr, "height"));
+	const fillColor = styleMap.get("fillcolor");
+	const strokeColor = styleMap.get("strokecolor");
+	const description = userData.description ?? getDecodedStyle(styleMap, "likec4description");
+	const technology = userData.technology ?? getDecodedStyle(styleMap, "likec4technology");
+	const notes = getDecodedStyle(styleMap, "likec4notes");
+	const tags = getDecodedStyle(styleMap, "likec4tags");
+	const icon = getDecodedStyle(styleMap, "likec4icon");
+	const endArrow = styleMap.get("endarrow");
+	const startArrow = styleMap.get("startarrow");
+	const dashed = styleMap.get("dashed");
+	const dashPattern = styleMap.get("dashpattern");
+	const summary = getDecodedStyle(styleMap, "likec4summary");
+	const links = getDecodedStyle(styleMap, "likec4links");
+	const border = getDecodedStyle(styleMap, "likec4border");
+	const colorName = getDecodedStyle(styleMap, "likec4colorname");
+	const opacityFromStyle = styleMap.get("opacity");
+	const opacityFromLikec4 = styleMap.get("likec4opacity");
+	const opacityFromFill = styleMap.get("fillopacity");
+	const opacity = (opacityFromLikec4 != null && opacityFromLikec4 !== "" ? opacityFromLikec4 : void 0) ?? (opacityFromStyle != null && opacityFromStyle !== "" ? opacityFromStyle : void 0) ?? (opacityFromFill != null && opacityFromFill !== "" ? opacityFromFill : void 0);
+	const strokeWidthRaw = styleMap.get("strokewidth");
+	const strokeWidth = strokeWidthRaw != null && strokeWidthRaw !== "" ? strokeWidthRaw : void 0;
+	const size = getDecodedStyle(styleMap, "likec4size");
+	const padding = getDecodedStyle(styleMap, "likec4padding");
+	const textSize = getDecodedStyle(styleMap, "likec4textsize");
+	const iconPosition = getDecodedStyle(styleMap, "likec4iconposition");
+	const link = getDecodedStyle(styleMap, "link");
+	const relationshipKind = getDecodedStyle(styleMap, "likec4relationshipkind");
+	const notation = getDecodedStyle(styleMap, "likec4notation");
+	const metadata = getDecodedStyle(styleMap, "likec4metadata");
+	const optional = {};
+	if (params.valueRaw != null && params.valueRaw !== "") optional.value = decodeXmlEntities(params.valueRaw);
+	if (params.parent != null && params.parent !== "") optional.parent = params.parent;
+	if (params.source != null && params.source !== "") optional.source = params.source;
+	if (params.target != null && params.target !== "") optional.target = params.target;
+	if (params.style != null && params.style !== "") optional.style = params.style;
+	if (x !== void 0) optional.x = x;
+	if (y !== void 0) optional.y = y;
+	if (width !== void 0) optional.width = width;
+	if (height !== void 0) optional.height = height;
+	if (fillColor !== void 0) optional.fillColor = fillColor;
+	if (strokeColor !== void 0) optional.strokeColor = strokeColor;
+	if (description != null) optional.description = description;
+	if (technology != null) optional.technology = technology;
+	if (notes != null) optional.notes = notes;
+	if (tags != null) optional.tags = tags;
+	if (navigateTo != null) optional.navigateTo = navigateTo;
+	if (icon != null) optional.icon = icon;
+	if (endArrow != null && endArrow !== "") optional.endArrow = endArrow;
+	if (startArrow != null && startArrow !== "") optional.startArrow = startArrow;
+	if (dashed != null && dashed !== "") optional.dashed = dashed;
+	if (dashPattern != null && dashPattern !== "") optional.dashPattern = dashPattern;
+	if (summary != null) optional.summary = summary;
+	if (links != null) optional.links = links;
+	if (link != null && vertex) optional.link = link;
+	if (border != null) optional.border = border;
+	if (strokeWidth != null && vertex) optional.strokeWidth = strokeWidth;
+	if (size != null && vertex) optional.size = size;
+	if (padding != null && vertex) optional.padding = padding;
+	if (textSize != null && vertex) optional.textSize = textSize;
+	if (iconPosition != null && vertex) optional.iconPosition = iconPosition;
+	if (colorName != null) optional.colorName = colorName;
+	if (opacity != null) optional.opacity = opacity;
+	if (relationshipKind != null) optional.relationshipKind = relationshipKind;
+	if (notation != null) optional.notation = notation;
+	if (metadata != null && edge) optional.metadata = metadata;
+	if (userData.customData != null) optional.customData = userData.customData;
+	if (edge) {
+		const pts = parseEdgePoints(fullTag);
+		if (pts != null) optional.edgePoints = pts;
+	}
+	return optional;
+}
+/**
+* Build one DrawioCell from parsed mxCell tag parts.
+* attrs: open-tag attribute string; inner: content between open/close; fullTag: full tag for geometry regex.
+* overrides: optional id/navigateTo to override parsed values. Returns null if id missing.
+*/
+function buildCellFromMxCell(attrs, inner, fullTag, overrides) {
+	const id = overrides?.id ?? getAttr(attrs, "id");
+	if (!id) return null;
+	const vertex = getAttr(attrs, "vertex") === "1";
+	const edge = getAttr(attrs, "edge") === "1";
+	const style = getAttr(attrs, "style");
+	const geomStr = extractMxGeometryOpenTag(fullTag);
+	const styleMap = parseStyle(style ?? void 0);
+	const userData = parseUserData(inner);
+	const navigateTo = overrides?.navigateTo ?? getDecodedStyle(styleMap, "likec4navigateto");
+	return {
+		id,
+		vertex,
+		edge,
+		...buildCellOptionalFields({
+			valueRaw: getAttr(attrs, "value"),
+			parent: getAttr(attrs, "parent"),
+			source: getAttr(attrs, "source"),
+			target: getAttr(attrs, "target"),
+			style: getAttr(attrs, "style"),
+			styleMap,
+			userData,
+			geomStr,
+			fullTag,
+			vertex,
+			edge,
+			navigateTo
+		})
+	};
+}
+/** Extract one mxCell from xml starting at tagStart. Returns attrs, inner, fullTag and next search index, or null. */
+function extractOneMxCell(xml, tagStart) {
+	const endOpen = findOpenTagEnd(xml, tagStart);
+	if (endOpen === -1) return null;
+	const attrs = xml.slice(tagStart + 7, endOpen).trim();
+	const isSelfClosing = xml.slice(tagStart, endOpen).trimEnd().endsWith("/");
+	const afterBracket = endOpen + 1;
+	let inner;
+	let endTagPos;
+	if (isSelfClosing) {
+		inner = "";
+		endTagPos = endOpen;
+	} else {
+		const closeStart = indexOfClosingTag(xml, "mxCell", afterBracket);
+		if (closeStart === -1) return null;
+		inner = xml.slice(afterBracket, closeStart);
+		endTagPos = closeStart + 9 - 1;
+	}
+	const fullTag = xml.slice(tagStart, endTagPos + 1);
+	return {
+		attrs,
+		inner,
+		fullTag,
+		next: endTagPos + 1
+	};
+}
+/**
+* Simple XML parser for DrawIO mxCell elements. Extracts cells with id, value, parent,
+* source, target, vertex, edge, geometry, style colors and LikeC4 user data.
+* Also parses <UserObject id="..." link="..."> wrapping mxCell (export format for navigateTo) so the inner mxCell gets id and navigateTo from the link.
+* Uses indexOf-based extraction instead of regex to avoid S5852 (super-linear backtracking DoS).
+*/
+function parseDrawioXml(xml) {
+	const cells = [];
+	const parsedIds = /* @__PURE__ */ new Set();
+	const closeUserObjectLen = 13;
+	let uoStart = indexOfTagStart(xml, "UserObject", 0);
+	while (uoStart !== -1) {
+		const endOpen = findOpenTagEnd(xml, uoStart);
+		if (endOpen === -1) break;
+		const openTag = xml.slice(uoStart, endOpen + 1);
+		const userObjId = getAttr(openTag, "id")?.trim();
+		const navigateTo = navigateToFromLink(getAttr(openTag, "link") ?? void 0);
+		const closeStart = indexOfClosingTag(xml, "UserObject", endOpen + 1);
+		if (closeStart === -1) break;
+		const innerXml = xml.slice(endOpen + 1, closeStart);
+		if (userObjId) {
+			const innerMxStart = indexOfTagStart(innerXml, "mxCell", 0);
+			if (innerMxStart !== -1) {
+				const mx = extractOneMxCell(innerXml, innerMxStart);
+				if (mx) {
+					const fullTag = `<mxCell id="${escapeXml(userObjId)}" ${mx.attrs}>${innerXml}</mxCell>`;
+					const cell = buildCellFromMxCell(mx.attrs, innerXml, fullTag, navigateTo != null && navigateTo !== "" ? {
+						id: userObjId,
+						navigateTo
+					} : { id: userObjId });
+					if (cell) {
+						cells.push(cell);
+						parsedIds.add(cell.id);
+					}
+				}
+			}
+		}
+		uoStart = indexOfTagStart(xml, "UserObject", closeStart + closeUserObjectLen);
+	}
+	let mxStart = indexOfTagStart(xml, "mxCell", 0);
+	while (mxStart !== -1) {
+		const mx = extractOneMxCell(xml, mxStart);
+		if (mx) {
+			const id = getAttr(mx.attrs, "id");
+			if (id && !parsedIds.has(id)) {
+				const cell = buildCellFromMxCell(mx.attrs, mx.inner, mx.fullTag);
+				if (cell) {
+					cells.push(cell);
+					parsedIds.add(cell.id);
+				}
+			}
+			mxStart = indexOfTagStart(xml, "mxCell", mx.next);
+		} else mxStart = indexOfTagStart(xml, "mxCell", mxStart + 7);
+	}
+	return cells;
+}
+/** Map draw.io endArrow/startArrow style value to LikeC4 RelationshipArrowType. */
+function likec4Arrow(drawioArrow) {
+	if (!drawioArrow || drawioArrow === "") return void 0;
+	switch (drawioArrow.toLowerCase()) {
+		case "none": return "none";
+		case "block": return "normal";
+		case "open": return "open";
+		case "diamond": return "diamond";
+		case "oval": return "dot";
+		default: return "normal";
+	}
+}
+/** Map draw.io dashed/dashPattern to LikeC4 line type. */
+function likec4LineType(dashed, dashPattern) {
+	if (dashed === "1" || dashed === "true") {
+		const pattern = (dashPattern ?? "").trim();
+		if (pattern === "1 1" || pattern === "2 2") return "dotted";
+		return "dashed";
+	}
+}
+/**
+* Infer LikeC4 element kind from DrawIO shape style. When parent is a container (container=1), child is component.
+* Explicit container=1 in style → system (context box); others default to container unless actor/swimlane.
+*/
+function inferKind(style, parentCell) {
+	const s = style?.toLowerCase() ?? "";
+	switch (true) {
+		case !style: return parentCell?.style?.toLowerCase().includes("container=1") ? "component" : "container";
+		case s.includes("umlactor") || s.includes("shape=person"): return "actor";
+		case s.includes("swimlane"):
+		case s.includes("container=1"): return "system";
+		case !!parentCell?.style?.toLowerCase().includes("container=1"): return "component";
+		default: return "container";
+	}
+}
+/** Infer LikeC4 shape from DrawIO style when possible (cylinder, document, etc.). */
+function inferShape(style) {
+	if (!style) return void 0;
+	const s = style.toLowerCase();
+	if (s.includes("shape=cylinder") || s.includes("cylinder3")) return "cylinder";
+	if (s.includes("shape=document")) return "document";
+	if (s.includes("shape=rectangle") && s.includes("rounded")) return "rectangle";
+}
+/**
+* Sanitize a string for use as LikeC4 identifier (element name).
+*/
+function toId(name) {
+	return name.trim().replaceAll(/\s+/g, "_").replaceAll(/[^\w-]/g, "").replace(/^[0-9]/, "_$&") || "element";
+}
+/** Returns a unique name generator that avoids collisions by appending _1, _2, ... (DRY: used in parseDrawioToLikeC4 and buildDiagramState). */
+function makeUniqueName(usedNames) {
+	return (base) => {
+		let name = toId(base || "element");
+		let n = name;
+		let i = 0;
+		while (usedNames.has(n)) n = `${name}_${++i}`;
+		usedNames.add(n);
+		return n;
+	};
+}
+/** Assign FQNs to element vertices: root first, then hierarchy by parent, then orphans (DRY). */
+function assignFqnsToElementVertices(idToFqn, elementVertices, containerIdToTitle, isRootParent, uniqueName) {
+	const baseName = (v) => v.value ?? containerIdToTitle.get(v.id) ?? v.id;
+	for (const v of elementVertices) if (isRootParent(v.parent)) idToFqn.set(v.id, uniqueName(baseName(v)));
+	let changed = true;
+	while (changed) {
+		changed = false;
+		for (const v of elementVertices) {
+			if (idToFqn.has(v.id)) continue;
+			const parent = v.parent ? idToFqn.get(v.parent) : null;
+			if (parent != null) {
+				idToFqn.set(v.id, `${parent}.${uniqueName(baseName(v))}`);
+				changed = true;
+			}
+		}
+	}
+	for (const v of elementVertices) if (!idToFqn.has(v.id)) idToFqn.set(v.id, uniqueName(baseName(v)));
+}
+/** Build map of hex color -> custom name from vertices and edges for specification customColors (DRY). */
+function buildHexToCustomName(elementVertices, edges) {
+	const hexToCustomName = /* @__PURE__ */ new Map();
+	let customColorIndex = 0;
+	for (const v of elementVertices) {
+		const fill = v.fillColor?.trim();
+		if (fill && /^#[0-9A-Fa-f]{3,8}$/.test(fill)) {
+			if (v.colorName?.trim()) {
+				const name = v.colorName.trim().replaceAll(/\s+/g, "_");
+				if (!hexToCustomName.has(fill)) hexToCustomName.set(fill, name);
+			} else if (!hexToCustomName.has(fill)) hexToCustomName.set(fill, `drawio_color_${++customColorIndex}`);
+		}
+	}
+	let edgeColorIndex = 0;
+	for (const e of edges) {
+		const stroke = e.strokeColor?.trim();
+		if (stroke && /^#[0-9A-Fa-f]{3,8}$/.test(stroke) && !hexToCustomName.has(stroke)) hexToCustomName.set(stroke, `drawio_edge_color_${++edgeColorIndex}`);
+	}
+	return hexToCustomName;
+}
+/** Detect container cells and their title cells (text shape inside/near container); returns maps for FQN resolution (DRY). */
+function computeContainerTitles(vertices) {
+	const containerIdToTitle = /* @__PURE__ */ new Map();
+	const titleCellIds = /* @__PURE__ */ new Set();
+	const containerCells = vertices.filter((v) => v.style?.toLowerCase().includes("container=1") && v.x != null && v.y != null && v.width != null && v.height != null);
+	for (const cont of containerCells) {
+		const cw = cont.width, ch = cont.height;
+		const titleAreaHeight = Math.min(CONTAINER_TITLE_AREA_MAX_HEIGHT_PX, ch * CONTAINER_TITLE_AREA_HEIGHT_RATIO) + CONTAINER_TITLE_AREA_TOLERANCE;
+		const best = vertices.find((v) => v.id !== cont.id && v.parent === cont.id && (v.style?.toLowerCase().includes("shape=text") || v.style?.toLowerCase().includes("text;")) && v.x != null && v.y != null && v.x >= -CONTAINER_TITLE_AREA_TOLERANCE && v.x <= cw + CONTAINER_TITLE_AREA_TOLERANCE && v.y >= -CONTAINER_TITLE_AREA_TOLERANCE && v.y <= titleAreaHeight);
+		if (best) {
+			const raw = (best.value ?? "").trim();
+			if (raw) {
+				containerIdToTitle.set(cont.id, stripHtml(raw));
+				titleCellIds.add(best.id);
+			}
+		}
+	}
+	return {
+		containerIdToTitle,
+		titleCellIds
+	};
+}
+/** Strip XML/HTML tags without regex to avoid S5852 (super-linear backtracking). */
+function stripTags(s) {
+	let out = "";
+	let i = 0;
+	while (i < s.length) {
+		const open = s.indexOf("<", i);
+		if (open === -1) {
+			out += s.slice(i);
+			break;
+		}
+		out += s.slice(i, open);
+		const close = s.indexOf(">", open);
+		if (close === -1) {
+			out += "<";
+			i = open + 1;
+		} else i = close + 1;
+	}
+	return out;
+}
+/** Decode XML entities, take first line up to <br, strip tags. Single implementation for cell value and title (DRY). */
+function stripHtml(raw) {
+	if (!raw || raw.trim() === "") return "";
+	const firstLine = decodeXmlEntities(raw).split("\n")[0] ?? "";
+	const brIdx = firstLine.toLowerCase().indexOf("<br");
+	return stripTags(brIdx === -1 ? firstLine : firstLine.slice(0, brIdx)).trim() || "";
+}
+/** Escape single quotes for LikeC4 string literals (DRY). */
+function escapeLikec4Quotes(s) {
+	return s.replaceAll("'", "''");
+}
+/** Decode optional root cell style field (likec4ViewTitle, likec4ViewDescription, etc.). Safe against malformed percent-encoding. */
+function decodeRootStyleField(raw) {
+	if (raw == null || raw === "") return "";
+	try {
+		return decodeURIComponent(raw);
+	} catch {
+		return raw;
+	}
+}
+/** Build view block lines for model (single responsibility; DRY with parseDrawioToLikeC4). */
+function buildViewBlockLines(viewId, viewTitle, viewDesc) {
+	return [
+		"views {",
+		`  view ${viewId} {`,
+		...viewTitle ? [`    title '${escapeLikec4Quotes(viewTitle)}'`] : [],
+		...viewDesc ? [`    description '${escapeLikec4Quotes(viewDesc)}'`] : [],
+		"    include *",
+		"  }",
+		"}",
+		""
+	];
+}
+/** Push element declaration line: name = actor|system|container 'title'. */
+function pushElementHeader(ctx, pad, name, kind, title) {
+	const escaped = escapeLikec4Quotes(title);
+	switch (kind) {
+		case "actor":
+			ctx.lines.push(`${pad}${name} = actor '${escaped}'`);
+			break;
+		case "system":
+			ctx.lines.push(`${pad}${name} = system '${escaped}'`);
+			break;
+		default: ctx.lines.push(`${pad}${name} = container '${escaped}'`);
+	}
+}
+/** Push style { ... } block for element when any style part is present. */
+function pushElementStyleBlock(ctx, pad, cell, colorName) {
+	const border = cell.border?.trim();
+	const opacityVal = cell.opacity;
+	const shapeOverride = inferShape(cell.style);
+	const sizeVal = cell.size?.trim();
+	const paddingVal = cell.padding?.trim();
+	const textSizeVal = cell.textSize?.trim();
+	const iconPositionVal = cell.iconPosition?.trim();
+	if (!colorName && !(border && [
+		"solid",
+		"dashed",
+		"dotted",
+		"none"
+	].includes(border)) && !(opacityVal && /^\d+$/.test(opacityVal)) && !shapeOverride && !sizeVal && !paddingVal && !textSizeVal && !iconPositionVal) return;
+	const styleParts = [];
+	if (colorName) styleParts.push(`color ${colorName}`);
+	if (border && [
+		"solid",
+		"dashed",
+		"dotted",
+		"none"
+	].includes(border)) styleParts.push(`border ${border}`);
+	if (opacityVal && /^\d+$/.test(opacityVal)) styleParts.push(`opacity ${opacityVal}`);
+	if (shapeOverride) styleParts.push(`shape ${shapeOverride}`);
+	if (sizeVal) styleParts.push(`size ${sizeVal}`);
+	if (paddingVal) styleParts.push(`padding ${paddingVal}`);
+	if (textSizeVal) styleParts.push(`textSize ${textSizeVal}`);
+	if (iconPositionVal) styleParts.push(`iconPosition ${iconPositionVal}`);
+	if (styleParts.length > 0) ctx.lines.push(`${pad}  style { ${styleParts.join(", ")} }`);
+}
+/** Format link lines for .c4 (DRY: elements and edges). Returns lines with given prefix. */
+function formatLinkLines(linksJson, nativeLink, linePrefix) {
+	const out = [];
+	try {
+		const linksArr = linksJson ? JSON.parse(linksJson) : null;
+		if (Array.isArray(linksArr)) {
+			for (const link of linksArr) if (link?.url) out.push(`${linePrefix}link '${escapeLikec4Quotes(String(link.url))}'${link.title ? ` '${escapeLikec4Quotes(String(link.title))}'` : ""}`);
+		}
+		if (out.length === 0 && nativeLink) out.push(`${linePrefix}link '${escapeLikec4Quotes(nativeLink)}'`);
+	} catch {
+		if (nativeLink) out.push(`${linePrefix}link '${escapeLikec4Quotes(nativeLink)}'`);
+	}
+	return out;
+}
+/** Push link line(s) from linksJson or nativeLink (DRY with emitEdgesToLines). */
+function pushElementLinks(ctx, pad, linksJson, nativeLink) {
+	const prefix = `${pad}  `;
+	for (const line of formatLinkLines(linksJson, nativeLink, prefix)) ctx.lines.push(line);
+}
+/** Whether element has any body content (Clean Code: single place for hasBody condition). */
+function elementHasBody(cell, childList, colorName, opts) {
+	return (childList?.length ?? 0) > 0 || !!opts.desc || !!opts.tech || !!opts.notes || !!opts.summary || !!opts.linksJson || !!opts.nativeLink || !!opts.notation || opts.tagList.length > 0 || !!colorName || !!cell.border?.trim() || !!cell.opacity || !!inferShape(cell.style) || !!cell.size || !!cell.padding || !!cell.textSize || !!cell.iconPosition || !!opts.navigateTo || !!opts.icon;
+}
+/** Push element body lines (style, tags, description, links, children). */
+function pushElementBody(ctx, pad, cell, childList, fqn, indent, colorName, opts) {
+	ctx.lines.push(`${pad}{`);
+	pushElementStyleBlock(ctx, pad, cell, colorName);
+	for (const t of opts.tagList) ctx.lines.push(`${pad}  #${t.replaceAll(/\s+/g, "_")}`);
+	if (opts.desc) ctx.lines.push(`${pad}  description '${escapeLikec4Quotes(opts.desc)}'`);
+	if (opts.tech) ctx.lines.push(`${pad}  technology '${escapeLikec4Quotes(opts.tech)}'`);
+	if (opts.summary) ctx.lines.push(`${pad}  summary '${escapeLikec4Quotes(opts.summary)}'`);
+	if (opts.notes) ctx.lines.push(`${pad}  notes '${escapeLikec4Quotes(opts.notes)}'`);
+	if (opts.notation) ctx.lines.push(`${pad}  notation '${escapeLikec4Quotes(opts.notation)}'`);
+	pushElementLinks(ctx, pad, opts.linksJson, opts.nativeLink);
+	if (opts.navigateTo) ctx.lines.push(`${pad}  navigateTo ${opts.navigateTo}`);
+	if (opts.icon) ctx.lines.push(`${pad}  icon '${escapeLikec4Quotes(opts.icon)}'`);
+	if (childList && childList.length > 0) for (const ch of childList) emitElement.toLines(ctx, ch.cellId, ch.fqn, indent + 1);
+	ctx.lines.push(`${pad}}`);
+}
+/** Emit one element (and its children) to LikeC4 source lines (actor/system/container + body). */
+function emitElementToLines(ctx, cellId, fqn, indent) {
+	const cell = ctx.idToCell.get(cellId);
+	if (!cell) return;
+	const parentCell = cell.parent ? ctx.byId.get(cell.parent) : void 0;
+	const kind = inferKind(cell.style, parentCell);
+	const title = stripHtml(cell.value && cell.value.trim() || "") || (ctx.containerIdToTitle.get(cell.id) ?? ctx.containerIdToTitle.get(cellId) ?? "") || fqn.split(".").pop() || "Element";
+	const name = fqn.split(".").pop();
+	const pad = "  ".repeat(indent);
+	const desc = cell.description?.trim();
+	const tech = cell.technology?.trim();
+	const notes = cell.notes?.trim();
+	const tagsStr = cell.tags?.trim();
+	const tagList = tagsStr ? tagsStr.split(",").map((t) => t.trim()).filter(Boolean) : [];
+	const navigateTo = cell.navigateTo?.trim();
+	const icon = cell.icon?.trim();
+	const summary = cell.summary?.trim();
+	const linksJson = cell.links?.trim();
+	const nativeLink = cell.link?.trim();
+	const notation = cell.notation?.trim();
+	const colorName = cell.fillColor && /^#[0-9A-Fa-f]{3,8}$/.test(cell.fillColor.trim()) ? ctx.hexToCustomName.get(cell.fillColor.trim()) : void 0;
+	const childList = ctx.children.get(fqn);
+	const opts = {
+		desc,
+		tech,
+		notes,
+		summary,
+		linksJson,
+		nativeLink,
+		notation,
+		tagList,
+		navigateTo,
+		icon
+	};
+	const hasBody = elementHasBody(cell, childList, colorName, opts);
+	pushElementHeader(ctx, pad, name, kind, title);
+	if (hasBody) pushElementBody(ctx, pad, cell, childList, fqn, indent, colorName, opts);
+	else {
+		ctx.lines.push(`${pad}{`);
+		ctx.lines.push(`${pad}}`);
+	}
+	ctx.lines.push("");
+}
+/** Group element-emit helpers for navigation (header, styleBlock, links, body, toLines). */
+const emitElement = { toLines: emitElementToLines };
+/** Emit relation lines (src -> tgt with optional style/body) to LikeC4 source lines. */
+function emitEdgesToLines(lines, edgeEntries, hexToCustomName) {
+	for (const { cell: e, src, tgt } of edgeEntries) {
+		const title = e.value && e.value.trim() ? escapeLikec4Quotes(e.value.trim()) : "";
+		const desc = e.description?.trim();
+		const tech = e.technology?.trim();
+		const notes = e.notes?.trim();
+		const navTo = e.navigateTo?.trim();
+		const head = likec4Arrow(e.endArrow);
+		const tail = likec4Arrow(e.startArrow);
+		const line = likec4LineType(e.dashed, e.dashPattern);
+		const relKind = e.relationshipKind?.trim();
+		const notation = e.notation?.trim();
+		const linksJson = e.links?.trim();
+		const metadataJson = e.metadata?.trim();
+		const edgeStrokeHex = e.strokeColor?.trim();
+		const hasBody = !!notes || !!navTo || !!head || !!tail || !!line || !!notation || !!linksJson || !!metadataJson || !!edgeStrokeHex;
+		const relationHead = `  ${src}${relKind && /^[a-zA-Z0-9_-]+$/.test(relKind) ? ` -[${relKind}]-> ` : " -> "}${tgt}${title ? ` '${title}'` : desc || tech ? ` ''` : ""}${desc ? ` '${escapeLikec4Quotes(desc)}'` : ""}${tech ? ` '${escapeLikec4Quotes(tech)}'` : ""}`;
+		if (hasBody) {
+			const bodyLines = [];
+			if (notes) bodyLines.push(`    notes '${escapeLikec4Quotes(notes)}'`);
+			if (navTo) bodyLines.push(`    navigateTo ${navTo}`);
+			if (notation) bodyLines.push(`    notation '${escapeLikec4Quotes(notation)}'`);
+			for (const linkLine of formatLinkLines(linksJson, void 0, "    ")) bodyLines.push(linkLine);
+			try {
+				const metaObj = metadataJson ? JSON.parse(metadataJson) : null;
+				if (metaObj != null && typeof metaObj === "object" && !Array.isArray(metaObj)) {
+					const metaAttrs = [];
+					for (const [k, v] of Object.entries(metaObj)) {
+						if (k.trim() === "") continue;
+						const safeKey = /^[a-zA-Z_]\w*$/.test(k) ? k : `'${escapeLikec4Quotes(k)}'`;
+						if (Array.isArray(v)) {
+							const arrVals = v.map((s) => `'${escapeLikec4Quotes(String(s))}'`);
+							metaAttrs.push(` ${safeKey} [ ${arrVals.join(", ")} ];`);
+						} else if (v != null && typeof v === "string") metaAttrs.push(` ${safeKey} '${escapeLikec4Quotes(v)}';`);
+					}
+					if (metaAttrs.length > 0) bodyLines.push("    metadata {" + metaAttrs.join("") + " }");
+				}
+			} catch {}
+			if (head || tail || line || edgeStrokeHex) {
+				const parts = [];
+				if (line) parts.push(`line ${line}`);
+				if (head) parts.push(`head ${head}`);
+				if (tail) parts.push(`tail ${tail}`);
+				if (edgeStrokeHex && /^#[0-9A-Fa-f]{3,8}$/.test(edgeStrokeHex)) {
+					const edgeColorName = hexToCustomName.get(edgeStrokeHex);
+					if (edgeColorName) parts.push(`color ${edgeColorName}`);
+				}
+				if (parts.length > 0) bodyLines.push(`    style { ${parts.join(", ")} }`);
+			}
+			lines.push(relationHead + " {", ...bodyLines, "  }");
+		} else lines.push(relationHead);
+	}
+}
+/** Collect layout, stroke, customData and waypoint lines for one diagram state (shared by single and multi emit). Single pass over idToFqn. */
+function collectRoundtripForState(viewId, idToFqn, byId, edges) {
+	const layoutNodes = {};
+	const strokeColorLines = [];
+	const strokeWidthLines = [];
+	const customDataLines = [];
+	const waypointLines = [];
+	for (const [cellId, fqn] of idToFqn) {
+		const cell = byId.get(cellId);
+		if (cell?.vertex && cell.x != null && cell.y != null && cell.width != null && cell.height != null) layoutNodes[fqn] = {
+			x: cell.x,
+			y: cell.y,
+			width: cell.width,
+			height: cell.height
+		};
+		if (cell?.vertex) {
+			if (cell.strokeColor?.trim() && /^#[0-9A-Fa-f]{3,8}$/.test(cell.strokeColor.trim())) strokeColorLines.push(`// ${fqn}=${cell.strokeColor.trim()}`);
+			if (cell.strokeWidth != null && cell.strokeWidth.trim() !== "") strokeWidthLines.push(`// ${fqn}=${cell.strokeWidth.trim()}`);
+		}
+		if (cell?.customData?.trim()) customDataLines.push(`// ${fqn} ${cell.customData.trim()}`);
+	}
+	const edgesWithEndpoints = edges.filter(isEdgeWithEndpoints);
+	for (const e of edgesWithEndpoints) {
+		const src = idToFqn.get(e.source);
+		const tgt = idToFqn.get(e.target);
+		if (src && tgt) {
+			if (e.customData?.trim()) customDataLines.push(`// ${src}|${tgt} ${e.customData.trim()}`);
+			if (e.edgePoints?.trim()) waypointLines.push(`// ${src}|${tgt}|${e.id} ${e.edgePoints.trim()}`);
+		}
+	}
+	return {
+		layoutNodes,
+		strokeColorLines,
+		strokeWidthLines,
+		customDataLines,
+		waypointLines
+	};
+}
+/** Append round-trip comment blocks for one diagram (layout, stroke, customData, waypoints) to lines. */
+function emitRoundtripCommentsSingle(lines, viewId, idToFqn, byId, edges) {
+	const r = collectRoundtripForState(viewId, idToFqn, byId, edges);
+	if (Object.keys(r.layoutNodes).length > 0) lines.push("// <likec4.layout.drawio>", "// " + JSON.stringify({ [viewId]: { nodes: r.layoutNodes } }), "// </likec4.layout.drawio>");
+	if (r.strokeColorLines.length > 0) lines.push("// <likec4.strokeColor.vertices>", ...r.strokeColorLines, "// </likec4.strokeColor.vertices>");
+	if (r.strokeWidthLines.length > 0) lines.push("// <likec4.strokeWidth.vertices>", ...r.strokeWidthLines, "// </likec4.strokeWidth.vertices>");
+	if (r.customDataLines.length > 0) lines.push("// <likec4.customData>", ...r.customDataLines, "// </likec4.customData>");
+	if (r.waypointLines.length > 0) lines.push("// <likec4.edge.waypoints>", ...r.waypointLines, "// </likec4.edge.waypoints>");
+}
+/** Append merged round-trip comment blocks for multiple diagrams to lines. */
+function emitRoundtripCommentsMulti(lines, states) {
+	const layoutByView = {};
+	const strokeColorLines = [];
+	const strokeWidthLines = [];
+	const customDataLines = [];
+	const waypointLines = [];
+	for (const st of states) {
+		const r = collectRoundtripForState(st.viewId, st.idToFqn, st.idToCell, st.edges);
+		layoutByView[st.viewId] = { nodes: r.layoutNodes };
+		strokeColorLines.push(...r.strokeColorLines);
+		strokeWidthLines.push(...r.strokeWidthLines);
+		customDataLines.push(...r.customDataLines);
+		waypointLines.push(...r.waypointLines);
+	}
+	if (Object.values(layoutByView).some((v) => v != null && Object.keys(v.nodes).length > 0)) lines.push("// <likec4.layout.drawio>", "// " + JSON.stringify(layoutByView), "// </likec4.layout.drawio>");
+	if (strokeColorLines.length > 0) lines.push("// <likec4.strokeColor.vertices>", ...strokeColorLines, "// </likec4.strokeColor.vertices>");
+	if (strokeWidthLines.length > 0) lines.push("// <likec4.strokeWidth.vertices>", ...strokeWidthLines, "// </likec4.strokeWidth.vertices>");
+	if (customDataLines.length > 0) lines.push("// <likec4.customData>", ...customDataLines, "// </likec4.customData>");
+	if (waypointLines.length > 0) lines.push("// <likec4.edge.waypoints>", ...waypointLines, "// </likec4.edge.waypoints>");
+}
+/**
+* Decompress draw.io diagram content: base64 → inflateRaw → decodeURIComponent.
+* Exported for tests (error message contract). Handles both Node (Buffer) and browser (atob).
+* @param base64Content - Compressed diagram string from <diagram> inner content.
+* @returns Decoded mxGraphModel XML string.
+* @throws Error when base64 decode, inflate, or URI decode fails.
+*/
+function decompressDrawioDiagram(base64Content) {
+	const trimmed = base64Content.trim();
+	let bytes;
+	try {
+		if (typeof Buffer !== "undefined") bytes = new Uint8Array(Buffer.from(trimmed, "base64"));
+		else {
+			const binary = atob(trimmed);
+			bytes = new Uint8Array(binary.length);
+			for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i) & 255;
+		}
+	} catch (err) {
+		throw new Error(`DrawIO diagram decompression failed (base64 decode): ${toErrorMessage(err)}`);
+	}
+	let inflated;
+	try {
+		inflated = pako.inflateRaw(bytes, { to: "string" });
+	} catch (err) {
+		throw new Error(`DrawIO diagram decompression failed (inflate): ${toErrorMessage(err)}`);
+	}
+	try {
+		return decodeURIComponent(inflated);
+	} catch (err) {
+		throw new Error(`DrawIO diagram decompression failed (URI decode): ${toErrorMessage(err)}`);
+	}
+}
+/**
+* Extract first diagram name, id and content from mxfile. Handles compressed (base64+deflate) and uncompressed content.
+*/
+function getFirstDiagram(fullXml) {
+	return getAllDiagrams(fullXml)[0] ?? {
+		name: "index",
+		id: `${DRAWIO_DIAGRAM_ID_PREFIX}index`,
+		content: ""
+	};
+}
+/** Length of '<diagram' open tag for slice offset in getAllDiagrams (indexOf-based to avoid regex DoS S5852). */
+const DIAGRAM_TAG_OPEN_LEN = 8;
+/**
+* Extract all diagram name, id and content from mxfile (for multi-tab .drawio).
+* Uses indexOf-based extraction instead of regex to avoid S5852 (super-linear backtracking DoS).
+* @param fullXml - Full .drawio mxfile XML string.
+* @returns Array of DiagramInfo (one per <diagram>); content decompressed when needed.
+*/
+function getAllDiagrams(fullXml) {
+	const results = [];
+	const closeDiagramLen = 10;
+	let start = indexOfTagStart(fullXml, "diagram", 0);
+	while (start !== -1) {
+		const endOpen = findOpenTagEnd(fullXml, start);
+		if (endOpen === -1) break;
+		const attrs = fullXml.slice(start + DIAGRAM_TAG_OPEN_LEN, endOpen).trim();
+		const closeStart = indexOfClosingTag(fullXml, "diagram", endOpen + 1);
+		if (closeStart === -1) break;
+		const inner = fullXml.slice(endOpen + 1, closeStart);
+		const name = getAttr(attrs, "name") ?? (results.length === 0 ? "index" : `diagram_${results.length + 1}`);
+		const id = getAttr(attrs, "id") ?? `${DRAWIO_DIAGRAM_ID_PREFIX}${name}`;
+		let content;
+		if (inner.includes("<mxGraphModel")) content = inner;
+		else if (inner.trim() === "") content = inner;
+		else try {
+			content = decompressDrawioDiagram(inner);
+		} catch {
+			content = inner;
+		}
+		results.push({
+			name,
+			id,
+			content
+		});
+		start = indexOfTagStart(fullXml, "diagram", closeStart + closeDiagramLen);
+	}
+	return results;
+}
+/** Split parsed cells into vertices and edges (single responsibility). */
+function verticesAndEdgesFromCells(cells) {
+	return {
+		vertices: cells.filter((c) => c.vertex && c.id !== "0" && c.id !== "1"),
+		edges: cells.filter((c) => c.edge && c.source && c.target)
+	};
+}
+/** Build common diagram state from cells and diagram name (byId, FQN/hierarchy, view fields from root). */
+function buildCommonDiagramStateFromCells(cells, diagramName) {
+	const byId = /* @__PURE__ */ new Map();
+	for (const c of cells) byId.set(c.id, c);
+	const { vertices, edges } = verticesAndEdgesFromCells(cells);
+	const rootIds = new Set(["0", "1"]);
+	const isRootParent = (p) => !p || rootIds.has(p);
+	const idToFqn = /* @__PURE__ */ new Map();
+	const idToCell = /* @__PURE__ */ new Map();
+	for (const v of vertices) idToCell.set(v.id, v);
+	const { containerIdToTitle, titleCellIds } = computeContainerTitles(vertices);
+	const elementVertices = vertices.filter((v) => !titleCellIds.has(v.id));
+	assignFqnsToElementVertices(idToFqn, elementVertices, containerIdToTitle, isRootParent, makeUniqueName(/* @__PURE__ */ new Set()));
+	const hexToCustomName = buildHexToCustomName(elementVertices, edges);
+	const children = /* @__PURE__ */ new Map();
+	const roots = [];
+	for (const [cellId, fqn] of idToFqn) {
+		const cell = idToCell.get(cellId);
+		if (cell) if (isRootParent(cell.parent)) roots.push({
+			cellId,
+			fqn
+		});
+		else {
+			const parentFqn = cell.parent != null ? idToFqn.get(cell.parent) : void 0;
+			if (parentFqn != null) {
+				const list = children.get(parentFqn) ?? [];
+				list.push({
+					cellId,
+					fqn
+				});
+				children.set(parentFqn, list);
+			} else roots.push({
+				cellId,
+				fqn
+			});
+		}
+	}
+	const viewId = toId(diagramName?.trim() ? diagramName : "index") || "index";
+	const rootCell = byId.get("1");
+	const rootStyle = rootCell?.style ? parseStyle(rootCell.style) : /* @__PURE__ */ new Map();
+	return {
+		idToFqn,
+		idToCell,
+		containerIdToTitle,
+		roots,
+		children,
+		hexToCustomName,
+		edges,
+		viewId,
+		viewTitle: decodeRootStyleField(rootStyle.get("likec4viewtitle")),
+		viewDesc: decodeRootStyleField(rootStyle.get("likec4viewdescription")),
+		viewNotation: decodeRootStyleField(rootStyle.get("likec4viewnotation")),
+		byId
+	};
+}
+/** Build single-diagram state from cells and diagram name (orchestrator: common state + lines buffer). */
+function buildSingleDiagramState(cells, diagramName) {
+	const common = buildCommonDiagramStateFromCells(cells, diagramName);
+	const { hexToCustomName } = common;
+	const lines = [];
+	if (hexToCustomName.size > 0) {
+		lines.push("specification {");
+		for (const [hex, name] of hexToCustomName) lines.push(`  color ${name} ${hex}`);
+		lines.push("}", "");
+	}
+	lines.push("model {", "");
+	return {
+		...common,
+		lines
+	};
+}
+/** Emit LikeC4 source from single-diagram state (orchestrator: elements + edges + view + roundtrip). */
+function emitLikeC4SourceFromSingleState(state) {
+	const { lines, idToCell, containerIdToTitle, children, hexToCustomName, byId } = state;
+	const emitCtx = {
+		lines,
+		idToCell,
+		containerIdToTitle,
+		children,
+		hexToCustomName,
+		byId
+	};
+	for (const { cellId, fqn } of state.roots) emitElement.toLines(emitCtx, cellId, fqn, 1);
+	const edgeEntries = [];
+	for (const e of state.edges.filter(isEdgeWithEndpoints)) {
+		const src = state.idToFqn.get(e.source);
+		const tgt = state.idToFqn.get(e.target);
+		if (src && tgt) edgeEntries.push({
+			cell: e,
+			src,
+			tgt
+		});
+	}
+	emitEdgesToLines(lines, edgeEntries, hexToCustomName);
+	lines.push("}", "");
+	lines.push(...buildViewBlockLines(state.viewId, state.viewTitle, state.viewDesc));
+	if (state.viewNotation) lines.push(`// likec4.view.notation ${state.viewId} '${escapeLikec4Quotes(state.viewNotation)}'`);
+	emitRoundtripCommentsSingle(lines, state.viewId, state.idToFqn, byId, state.edges);
+	return lines.join("\n");
+}
+/**
+* Convert DrawIO XML to LikeC4 source (.c4) string.
+* Vertices → model elements (actor/container); edges → relations (->). Uses first diagram only.
+* @param xml - Full .drawio mxfile XML (single or multi-tab).
+* @returns LikeC4 .c4 source string (model + views + round-trip comments).
+*/
+function parseDrawioToLikeC4(xml) {
+	const { name: diagramName, content: xmlToParse } = getFirstDiagram(xml);
+	return emitLikeC4SourceFromSingleState(buildSingleDiagramState(parseDrawioXml(xmlToParse), diagramName));
+}
+/** Build diagram state from XML content and name (for multi-tab); returns null if parse fails. */
+function buildDiagramState(content, diagramName) {
+	const { byId: _byId, ...diagramState } = buildCommonDiagramStateFromCells(parseDrawioXml(content), diagramName);
+	return diagramState;
+}
+/** Merge multiple diagram states into shared maps and view infos (single responsibility). */
+function mergeDiagramStatesIntoMaps(states) {
+	const fqnToCell = /* @__PURE__ */ new Map();
+	const byId = /* @__PURE__ */ new Map();
+	const containerIdToTitle = /* @__PURE__ */ new Map();
+	const relationKeyToEdge = /* @__PURE__ */ new Map();
+	const hexToCustomName = /* @__PURE__ */ new Map();
+	const viewInfos = [];
+	for (const st of states) {
+		for (const [cellId, fqn] of st.idToFqn) {
+			const cell = st.idToCell.get(cellId);
+			if (cell && !fqnToCell.has(fqn)) fqnToCell.set(fqn, cell);
+		}
+		for (const [id, cell] of st.idToCell) {
+			if (byId.has(id)) continue;
+			byId.set(id, cell);
+		}
+		for (const [id, title] of st.containerIdToTitle) {
+			if (containerIdToTitle.has(id)) continue;
+			containerIdToTitle.set(id, title);
+		}
+		for (const e of st.edges.filter(isEdgeWithEndpoints)) {
+			const src = st.idToFqn.get(e.source);
+			const tgt = st.idToFqn.get(e.target);
+			if (src && tgt) {
+				const key = `${src}|${tgt}`;
+				if (relationKeyToEdge.has(key)) continue;
+				relationKeyToEdge.set(key, {
+					src,
+					tgt,
+					cell: e
+				});
+			}
+		}
+		for (const [hex, name] of st.hexToCustomName) {
+			if (hexToCustomName.has(hex)) continue;
+			hexToCustomName.set(hex, name);
+		}
+		viewInfos.push({
+			viewId: st.viewId,
+			viewTitle: st.viewTitle,
+			viewDesc: st.viewDesc,
+			viewNotation: st.viewNotation,
+			fqnSet: new Set(st.idToFqn.values())
+		});
+	}
+	return {
+		fqnToCell,
+		byId,
+		containerIdToTitle,
+		relationKeyToEdge,
+		hexToCustomName,
+		viewInfos
+	};
+}
+/** Build parent → children FQN map and root FQNs (single responsibility). */
+function buildRootsFromFqnToCell(fqnToCell) {
+	const rootsFromMap = /* @__PURE__ */ new Map();
+	for (const fqn of fqnToCell.keys()) {
+		const parent = fqn.includes(".") ? fqn.split(".").slice(0, -1).join(".") : "";
+		if (parent && fqnToCell.has(parent)) {
+			const list = rootsFromMap.get(parent) ?? [];
+			list.push(fqn);
+			rootsFromMap.set(parent, list);
+		} else {
+			const list = rootsFromMap.get("") ?? [];
+			list.push(fqn);
+			rootsFromMap.set("", list);
+		}
+	}
+	return {
+		rootsFromMap,
+		rootFqns: rootsFromMap.get("") ?? []
+	};
+}
+/** Emit specification + model { elements + edges } for multi-diagram (single responsibility). */
+function emitMultiDiagramModel(lines, merged, rootsFromMap, rootFqns) {
+	if (merged.hexToCustomName.size > 0) {
+		lines.push("specification {");
+		for (const [hex, name] of merged.hexToCustomName) lines.push(`  color ${name} ${hex}`);
+		lines.push("}", "");
+	}
+	lines.push("model {", "");
+	const idToCellMulti = /* @__PURE__ */ new Map();
+	for (const [fqn, cell] of merged.fqnToCell) idToCellMulti.set(fqn, cell);
+	const childrenMulti = /* @__PURE__ */ new Map();
+	for (const [parentFqn, childFqns] of rootsFromMap) {
+		if (parentFqn === "") continue;
+		const list = childFqns.map((cf) => ({
+			cellId: cf,
+			fqn: cf
+		}));
+		if (list.length > 0) childrenMulti.set(parentFqn, list);
+	}
+	const emitCtxMulti = {
+		lines,
+		idToCell: idToCellMulti,
+		containerIdToTitle: merged.containerIdToTitle,
+		children: childrenMulti,
+		hexToCustomName: merged.hexToCustomName,
+		byId: merged.byId
+	};
+	for (const fqn of rootFqns) emitElement.toLines(emitCtxMulti, fqn, fqn, 1);
+	const edgeEntriesMulti = [];
+	for (const { src, tgt, cell } of merged.relationKeyToEdge.values()) edgeEntriesMulti.push({
+		cell,
+		src,
+		tgt
+	});
+	emitEdgesToLines(lines, edgeEntriesMulti, merged.hexToCustomName);
+	lines.push("}", "");
+}
+/**
+* Convert DrawIO XML to LikeC4 source when file has multiple diagrams (tabs).
+* Merges elements by FQN and relations by (source, target); one view per diagram.
+* @param xml - Full .drawio mxfile XML with multiple <diagram> elements.
+* @returns LikeC4 .c4 source string (model + views + round-trip comments).
+*/
+function parseDrawioToLikeC4Multi(xml) {
+	const diagrams = getAllDiagrams(xml);
+	if (diagrams.length === 0) return `model {
 
-//#endregion
-//#region src/mmd/generate-mmd.ts
+}
+views {
+  view index {
+    include *
+  }
+}
+`;
+	if (diagrams.length === 1) {
+		const d = diagrams[0];
+		return emitLikeC4SourceFromSingleState(buildSingleDiagramState(parseDrawioXml(d.content), d.name));
+	}
+	const states = [];
+	for (const d of diagrams) {
+		const s = buildDiagramState(d.content, d.name);
+		if (s) states.push(s);
+	}
+	if (states.length === 0) return parseDrawioToLikeC4(xml);
+	const merged = mergeDiagramStatesIntoMaps(states);
+	const { rootsFromMap, rootFqns } = buildRootsFromFqnToCell(merged.fqnToCell);
+	const lines = [];
+	emitMultiDiagramModel(lines, merged, rootsFromMap, rootFqns);
+	lines.push("views {");
+	for (const v of merged.viewInfos) {
+		const includeList = [...v.fqnSet].sort((a, b) => a.localeCompare(b));
+		lines.push(`  view ${v.viewId} {`, ...v.viewTitle ? [`    title '${escapeLikec4Quotes(v.viewTitle)}'`] : [], ...v.viewDesc ? [`    description '${escapeLikec4Quotes(v.viewDesc)}'`] : [], `    include ${includeList.length > 0 ? includeList.join(", ") : "*"}`, "  }");
+	}
+	lines.push("}", "");
+	for (const v of merged.viewInfos) if (v.viewNotation) lines.push(`// likec4.view.notation ${v.viewId} '${escapeLikec4Quotes(v.viewNotation)}'`);
+	emitRoundtripCommentsMulti(lines, states);
+	return lines.join("\n");
+}
+const LAYOUT_START = "// <likec4.layout.drawio>";
+const LAYOUT_END = "// </likec4.layout.drawio>";
+const STROKE_COLOR_START = "// <likec4.strokeColor.vertices>";
+const STROKE_COLOR_END = "// </likec4.strokeColor.vertices>";
+const STROKE_WIDTH_START = "// <likec4.strokeWidth.vertices>";
+const STROKE_WIDTH_END = "// </likec4.strokeWidth.vertices>";
+const WAYPOINTS_START = "// <likec4.edge.waypoints>";
+const WAYPOINTS_END = "// </likec4.edge.waypoints>";
+/**
+* Parse DrawIO round-trip comment blocks from .c4 source (layout, strokeColor, strokeWidth, waypoints).
+* Used to build GenerateDrawioOptions for re-export after editing in draw.io.
+* TODO: the four section parsers (layout, strokeColor, strokeWidth, waypoints) repeat the same
+* "parse block between markers" pattern; consider a small helper to reduce duplication.
+* @param c4Source - Full .c4 source string (e.g. concatenated workspace files).
+* @returns DrawioRoundtripData or null if no likec4.* comment blocks found.
+*/
+function parseDrawioRoundtripComments(c4Source) {
+	const lines = c4Source.split(/\r?\n/);
+	let layoutByView = {};
+	let strokeColorByFqn = {};
+	let strokeWidthByFqn = {};
+	let edgeWaypoints = {};
+	let found = false;
+	let i = 0;
+	while (i < lines.length) {
+		const line = lines[i];
+		if (line == null) {
+			i += 1;
+			continue;
+		}
+		if (line.trim() === LAYOUT_START) {
+			found = true;
+			i += 1;
+			const layoutLines = [];
+			while (i < lines.length && lines[i]?.trim() !== LAYOUT_END) {
+				const ln = lines[i]?.trim();
+				if (ln?.startsWith("// ")) layoutLines.push(ln.slice(3));
+				i += 1;
+			}
+			if (layoutLines.length > 0) try {
+				const json = layoutLines.join("\n");
+				layoutByView = JSON.parse(json);
+			} catch {}
+			i += 1;
+			continue;
+		}
+		if (line.trim() === STROKE_COLOR_START) {
+			found = true;
+			i += 1;
+			while (i < lines.length && lines[i]?.trim() !== STROKE_COLOR_END) {
+				const ln = lines[i]?.trim();
+				if (ln?.startsWith("// ") && ln.includes("=")) {
+					const rest = ln.slice(3).trim();
+					const eq = rest.indexOf("=");
+					if (eq > 0) {
+						const fqn = rest.slice(0, eq).trim();
+						const hex = rest.slice(eq + 1).trim();
+						if (fqn && hex) strokeColorByFqn[fqn] = hex;
+					}
+				}
+				i += 1;
+			}
+			i += 1;
+			continue;
+		}
+		if (line.trim() === STROKE_WIDTH_START) {
+			found = true;
+			i += 1;
+			while (i < lines.length && lines[i]?.trim() !== STROKE_WIDTH_END) {
+				const ln = lines[i]?.trim();
+				if (ln?.startsWith("// ") && ln.includes("=")) {
+					const rest = ln.slice(3).trim();
+					const eq = rest.indexOf("=");
+					if (eq > 0) {
+						const fqn = rest.slice(0, eq).trim();
+						const val = rest.slice(eq + 1).trim();
+						if (fqn && val !== "") strokeWidthByFqn[fqn] = val;
+					}
+				}
+				i += 1;
+			}
+			i += 1;
+			continue;
+		}
+		if (line.trim() === WAYPOINTS_START) {
+			found = true;
+			i += 1;
+			while (i < lines.length && lines[i]?.trim() !== WAYPOINTS_END) {
+				const ln = lines[i]?.trim();
+				if (ln?.startsWith("// ")) {
+					const rest = ln.slice(3).trim();
+					const space = rest.indexOf(" ");
+					if (space > 0) {
+						const key = rest.slice(0, space).trim();
+						const json = rest.slice(space + 1).trim();
+						if (key && json) try {
+							const pts = JSON.parse(json);
+							if (Array.isArray(pts)) edgeWaypoints[key] = pts;
+						} catch {}
+					}
+				}
+				i += 1;
+			}
+			i += 1;
+			continue;
+		}
+		i += 1;
+	}
+	if (found) return {
+		layoutByView,
+		strokeColorByFqn,
+		strokeWidthByFqn,
+		edgeWaypoints
+	};
+	return null;
+}
+/**
+* DrawIO diagram generator.
+*
+* Design system alignment: colors, spacing, and font sizes are taken from the
+* viewmodel's styles (LikeC4Styles / theme). Container padding uses
+* theme.spacing (xl, xl+md for vertical). Container title uses groupColors.stroke
+* and theme.textSizes.xs. Element and edge colors use getElementColors /
+* getEdgeLabelColors from the theme. The only value not from core theme is the
+* Font family matches LikeC4 app (--likec4-app-font / --likec4-app-font-default:
+* 'IBM Plex Sans Variable', ui-sans-serif, system-ui, sans-serif).
+*/
+/**
+* DrawIO expects diagram content as base64(deflateRaw(encodeURIComponent(xml))).
+* @internal
+*/
+function compressDrawioDiagramXml(xml) {
+	const encoded = encodeURIComponent(xml);
+	const bytes = new TextEncoder().encode(encoded);
+	return uint8ArrayToBase64(pako.deflateRaw(bytes));
+}
+/** Encode bytes to base64 (Node Buffer or btoa for browser). */
+function uint8ArrayToBase64(bytes) {
+	if (typeof Buffer !== "undefined") return Buffer.from(bytes).toString("base64");
+	let binary = "";
+	for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
+	return btoa(binary);
+}
+/** Optional node fields (DSL allows more than base type). Single place for type/cast — Clean Code. */
+const nodeOptionalFields = {
+	getNotes(node) {
+		return node.notes;
+	},
+	getSummary(node) {
+		return node.summary;
+	},
+	getTags(node) {
+		return node.tags;
+	},
+	getNavigateTo(node) {
+		return node.navigateTo;
+	},
+	getIcon(node) {
+		return node.icon;
+	},
+	getLinks(node) {
+		return node.links;
+	},
+	getNotation(node) {
+		return node.notation;
+	},
+	getCustomData(node) {
+		return node.customData;
+	},
+	getChildren(node) {
+		return node.children;
+	}
+};
+/** Optional edge fields. Single place for type/cast — Clean Code. */
+const edgeOptionalFields = {
+	getKind(edge) {
+		return edge.kind;
+	},
+	getNotation(edge) {
+		return edge.notation;
+	},
+	getLinks(edge) {
+		return edge.links;
+	},
+	getMetadata(edge) {
+		return edge.metadata;
+	},
+	getCustomData(edge) {
+		return edge.customData;
+	}
+};
+/** Project styles or central default (LikeC4Styles.DEFAULT) when view has no $styles. */
+function getEffectiveStyles(viewmodel) {
+	return viewmodel.$styles ?? LikeC4Styles.DEFAULT;
+}
+/** Escape for use inside HTML (e.g. cell value with html=1). */
+function escapeHtml(text) {
+	return text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll("\"", "&quot;");
+}
+/** Coerce to non-empty string for style/attribute use; empty string when null/undefined/empty or non-primitive. DRY for navTo, iconName, etc. */
+function toNonEmptyString(value) {
+	if (value == null) return "";
+	const t = typeof value;
+	if (t === "string") {
+		const s = value;
+		return s.trim() === "" ? "" : s;
+	}
+	if (t === "number") return String(value);
+	if (t === "boolean") return String(value);
+	return "";
+}
+/** Container dashed style from border (KISS: single place for 3-way branch). */
+function getContainerDashedStyle(isContainer, borderVal) {
+	if (isContainer && borderVal !== "none") return "dashed=1;";
+	if (borderVal === "dashed") return "dashed=1;";
+	return "";
+}
+/** Default stroke width for node from border and container. No stroke set ('') for leaf without border → Draw.io uses its default. */
+function getDefaultStrokeWidth(borderVal, isContainer) {
+	if (borderVal === "none") return "0";
+	return isContainer ? "1" : borderVal ? "1" : "";
+}
+/** Apply stroke color override to base element colors (KISS: named function instead of IIFE). */
+function applyStrokeColorOverride(base, override) {
+	return {
+		fill: base?.fill ?? DEFAULT_NODE_FILL_HEX,
+		stroke: override,
+		font: base?.font ?? override
+	};
+}
+/** Theme color key valid for styles.theme.colors; falls back to primary/gray for elements/edges. */
+function resolveThemeColor(styles, color, fallback) {
+	if (color && color in styles.theme.colors) return color;
+	return fallback;
+}
+/** Get theme color values with fallback to DEFAULT on error (DRY + SRP for try/catch). */
+function getThemeColorValues(viewmodel, color, fallback) {
+	const styles = getEffectiveStyles(viewmodel);
+	const themeColor = resolveThemeColor(styles, color ?? fallback, fallback);
+	try {
+		return styles.colors(themeColor);
+	} catch {
+		return LikeC4Styles.DEFAULT.colors(fallback);
+	}
+}
+/**
+* Map LikeC4 element shape to draw.io cell style string.
+* Rounded corners: arcSize as percentage integer (e.g. 12) for subtly rounded corners in Draw.io.
+*/
+function drawioShape(shape) {
+	const rectStyle = "shape=rectangle;rounded=1;arcSize=12;";
+	switch (shape) {
+		case "person": return "shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;";
+		case "rectangle":
+		case "browser":
+		case "mobile":
+		case "bucket": return rectStyle;
+		case "cylinder":
+		case "queue":
+		case "storage": return "shape=cylinder3;whiteSpace=wrap;boundedLbl=1;backgroundOutline=1;size=15;";
+		case "document": return "shape=document;whiteSpace=wrap;html=1;boundedLbl=1;";
+		case "component": return "shape=component;";
+		default: return rectStyle;
+	}
+}
+/**
+* Resolve element fill, stroke and font colors from project styles or default theme.
+* Uses ElementColorValues (hiContrast for font when present).
+*/
+function getElementColors(viewmodel, color) {
+	const elementColors = getThemeColorValues(viewmodel, color, "primary").elements;
+	return {
+		fill: String(elementColors.fill ?? DEFAULT_NODE_FILL_HEX),
+		stroke: String(elementColors.stroke ?? DEFAULT_NODE_STROKE_HEX),
+		font: String(elementColors.hiContrast ?? elementColors.stroke ?? DEFAULT_NODE_FONT_HEX)
+	};
+}
+/** Edge stroke (line) color from theme RelationshipColorValues.line. */
+function getEdgeStrokeColor(viewmodel, color) {
+	const values = getThemeColorValues(viewmodel, color ?? "gray", "gray");
+	return String(values.relationships?.line ?? DEFAULT_NODE_FONT_HEX);
+}
+/** Edge label font and background from theme (RelationshipColorValues.label, labelBg) for readable connector text. */
+function getEdgeLabelColors(viewmodel, color) {
+	const rel = getThemeColorValues(viewmodel, color ?? "gray", "gray").relationships;
+	return {
+		font: String(rel?.label ?? rel?.line ?? DEFAULT_NODE_FONT_HEX),
+		background: String(rel?.labelBg ?? "#ffffff")
+	};
+}
+/**
+* Compute draw.io exit/entry anchors (0–1) from source to target bbox centers
+* so edges connect on the correct sides (LikeC4-style layout).
+*/
+function edgeAnchors(sourceBbox, targetBbox) {
+	const sCx = sourceBbox.x + sourceBbox.width / 2;
+	const sCy = sourceBbox.y + sourceBbox.height / 2;
+	const tCx = targetBbox.x + targetBbox.width / 2;
+	const tCy = targetBbox.y + targetBbox.height / 2;
+	const dx = tCx - sCx;
+	const dy = tCy - sCy;
+	const hor = Math.abs(dx) >= Math.abs(dy);
+	return {
+		exitX: hor ? dx >= 0 ? 1 : 0 : .5,
+		exitY: hor ? .5 : dy >= 0 ? 1 : 0,
+		entryX: hor ? dx >= 0 ? 0 : 1 : .5,
+		entryY: hor ? .5 : dy >= 0 ? 0 : 1
+	};
+}
+/** Normalize one waypoint to [x, y]; returns one element or empty. Called per element via flatMap. */
+function normalizeEdgePoint(pt) {
+	if (Array.isArray(pt) && pt.length >= 2 && typeof pt[0] === "number" && typeof pt[1] === "number") return [[pt[0], pt[1]]];
+	const o = pt;
+	if (typeof o.x === "number" && typeof o.y === "number") return [[o.x, o.y]];
+	return [];
+}
+/** Build HTML value for a vertex cell (title only or title + description). */
+function buildNodeValueHtml(title, desc, isContainer, fontHex, fontFamily, fontSizePx) {
+	if (isContainer) return "";
+	if (desc !== "") return `<div style="box-sizing:border-box;width:100%;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:${fontHex};font-family:${fontFamily};"><b style="font-size:${fontSizePx}px;">${escapeHtml(title)}</b><br/><span style="font-weight:normal;font-size:${fontSizePx}px;">${escapeHtml(desc)}</span></div>`;
+	return `<div style="box-sizing:border-box;width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;text-align:center;color:${fontHex};font-family:${fontFamily};"><b style="font-size:${fontSizePx}px;">${escapeHtml(title)}</b></div>`;
+}
+/** Push "key=value" to parts when value is set; encodes value for style string (avoids repeated conditionals). */
+function pushStylePart(parts, key, value) {
+	if (value != null && value !== "") parts.push(`${key}=${encodeURIComponent(value)}`);
+}
+/** Push "key=value" for numeric value (no encoding). */
+function pushStylePartNum(parts, key, value) {
+	if (value != null) parts.push(`${key}=${value}`);
+}
+/** Build Draw.io link= style for navigateTo (empty string when no nav). DRY for node and container title. */
+function buildNavLinkStyle(navTo) {
+	return navTo === "" ? "" : `link=${encodeURIComponent(`${DRAWIO_PAGE_LINK_PREFIX}${navTo}`)};`;
+}
+/** Flatten markdown/string and trim to single export string; empty when missing or empty-ish. DRY for node/edge fields. */
+function toExportString(raw) {
+	const flat = raw != null ? flattenMarkdownOrString(raw) : null;
+	return flat != null && !isEmptyish(flat) ? flat.trim() : "";
+}
+/** Serialize links array to style-safe JSON string (empty when none). DRY for node and edge links. */
+function linksToStyleJson(links) {
+	if (!Array.isArray(links) || links.length === 0) return "";
+	return encodeURIComponent(JSON.stringify(links.map((l) => ({
+		url: l.url,
+		title: l.title
+	}))));
+}
+/** Serialize metadata object to style-safe JSON string (empty when none). DRY for edge metadata. */
+function metadataToStyleJson(metadata) {
+	if (metadata == null || typeof metadata !== "object" || Array.isArray(metadata) || Object.keys(metadata).length === 0) return "";
+	return encodeURIComponent(JSON.stringify(metadata));
+}
+const HEX_COLOR_RE = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{4}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
+/** Build LikeC4 style string (likec4Description=...; etc.) for round-trip. */
+function buildLikec4StyleForNode(params) {
+	const parts = [];
+	pushStylePart(parts, "likec4Description", params.desc);
+	pushStylePart(parts, "likec4Technology", params.tech);
+	pushStylePart(parts, "likec4Notes", params.notes);
+	pushStylePart(parts, "likec4Tags", params.tagList);
+	pushStylePart(parts, "likec4NavigateTo", params.navTo);
+	pushStylePart(parts, "likec4Icon", params.iconName);
+	pushStylePart(parts, "likec4Summary", params.summaryStr);
+	if (params.linksJson !== "") parts.push(`likec4Links=${params.linksJson}`);
+	pushStylePart(parts, "likec4Border", params.borderVal);
+	pushStylePartNum(parts, "likec4Opacity", params.containerOpacityNum);
+	pushStylePart(parts, "likec4StrokeWidth", params.strokeWidth);
+	if (params.colorNameForRoundtrip !== "") parts.push(`likec4ColorName=${params.colorNameForRoundtrip}`);
+	pushStylePart(parts, "likec4Size", params.nodeStyle?.size);
+	pushStylePart(parts, "likec4Padding", params.nodeStyle?.padding);
+	pushStylePart(parts, "likec4TextSize", params.nodeStyle?.textSize);
+	pushStylePart(parts, "likec4IconPosition", params.nodeStyle?.iconPosition);
+	if (params.strokeHex && HEX_COLOR_RE.test(params.strokeHex)) pushStylePart(parts, "likec4StrokeColor", params.strokeHex);
+	pushStylePart(parts, "likec4Notation", params.nodeNotation ?? void 0);
+	return parts.length > 0 ? parts.join(";") + ";" : "";
+}
+/** Build mxUserObject XML from customData for round-trip; returns empty string when customData is missing or empty. */
+function buildMxUserObjectXml(customData) {
+	if (!customData || typeof customData !== "object" || Array.isArray(customData) || Object.keys(customData).length === 0) return "";
+	return "\n  <mxUserObject>" + Object.entries(customData).map(([k, v]) => {
+		const safeV = typeof v === "string" ? v : v != null ? String(v) : "";
+		return `<data key="${escapeXml(k)}">${escapeXml(safeV)}</data>`;
+	}).join("") + "</mxUserObject>";
+}
+/** Build LikeC4 style string for an edge (likec4Description=...; etc.) for round-trip. */
+function buildLikec4StyleForEdge(params) {
+	const parts = [];
+	pushStylePart(parts, "likec4Description", params.edgeDesc);
+	pushStylePart(parts, "likec4Technology", params.edgeTech);
+	pushStylePart(parts, "likec4Notes", params.edgeNotes);
+	pushStylePart(parts, "likec4NavigateTo", params.edgeNavTo);
+	pushStylePart(parts, "likec4RelationshipKind", params.edgeKind ?? void 0);
+	pushStylePart(parts, "likec4Notation", params.edgeNotation ?? void 0);
+	if (params.edgeLinksJson !== "") parts.push(`likec4Links=${params.edgeLinksJson}`);
+	if (params.edgeMetadataJson !== "") parts.push(`likec4Metadata=${params.edgeMetadataJson}`);
+	return parts.length > 0 ? parts.join(";") + ";" : "";
+}
+/** Escaped edge label for mxCell value (single responsibility). */
+function buildEdgeLabelValue(edge) {
+	return edge.label ? escapeXml(edge.label) : "";
+}
+/** Edge waypoints → mxGeometry XML (single responsibility). */
+function buildEdgeGeometryXml(edge, edgeWaypoints) {
+	const rawEdgePoints = edgeWaypoints?.[`${edge.source}|${edge.target}|${edge.id}`] ?? edgeWaypoints?.[`${edge.source}|${edge.target}`];
+	const edgePoints = Array.isArray(rawEdgePoints) ? rawEdgePoints.flatMap(normalizeEdgePoint) : [];
+	if (!(edgePoints.length > 0)) return "<mxGeometry relative=\"1\" as=\"geometry\" />";
+	return `<mxGeometry relative="1" as="geometry">${"<Array as=\"points\">" + edgePoints.map(([px, py]) => `<mxPoint x="${Math.round(px)}" y="${Math.round(py)}"/>`).join("") + "</Array>"}</mxGeometry>`;
+}
+/** Full edge style string for mxCell (arrows, anchors, stroke, dash, label, likec4 roundtrip). */
+function buildEdgeStyleString(edge, layout, viewmodel, label) {
+	const { bboxes, fontFamily } = layout;
+	const sourceBbox = bboxes.get(edge.source);
+	const targetBbox = bboxes.get(edge.target);
+	const anchors = sourceBbox && targetBbox ? edgeAnchors(sourceBbox, targetBbox) : {
+		exitX: 1,
+		exitY: .5,
+		entryX: 0,
+		entryY: .5
+	};
+	const anchorStyle = `exitX=${anchors.exitX};exitY=${anchors.exitY};entryX=${anchors.entryX};entryY=${anchors.entryY};`;
+	const strokeColor = getEdgeStrokeColor(viewmodel, edge.color);
+	const dashStyle = edge.line === "dashed" ? "dashed=1;" : edge.line === "dotted" ? "dashed=1;dashPattern=1 1;" : "";
+	const endArrow = drawioArrow(edge.head);
+	const startArrow = edge.tail == null || edge.tail === "none" ? "none" : drawioArrow(edge.tail);
+	const edgeLikec4Style = buildLikec4StyleForEdge({
+		edgeDesc: toExportString(edge.description),
+		edgeTech: toExportString(edge.technology),
+		edgeNotes: toExportString(edge.notes),
+		edgeNavTo: toNonEmptyString(edge.navigateTo),
+		edgeKind: edgeOptionalFields.getKind(edge),
+		edgeNotation: edgeOptionalFields.getNotation(edge),
+		edgeLinksJson: linksToStyleJson(edgeOptionalFields.getLinks(edge)),
+		edgeMetadataJson: metadataToStyleJson(edgeOptionalFields.getMetadata(edge))
+	});
+	const edgeLabelColors = getEdgeLabelColors(viewmodel, edge.color);
+	return `endArrow=${endArrow};startArrow=${startArrow};html=1;rounded=0;${anchorStyle}strokeColor=${strokeColor};strokeWidth=2;${dashStyle}${label === "" ? "" : `fontColor=${edgeLabelColors.font};fontSize=12;align=center;verticalAlign=middle;labelBackgroundColor=none;fontFamily=${encodeURIComponent(fontFamily)};`}${edgeLikec4Style}`;
+}
+/** Build a single edge mxCell XML (orchestrator: label + geometry + style + assembly). */
+function buildEdgeCellXml(edge, layout, options, viewmodel, getCellId, edgeCellId) {
+	const { defaultParentId } = layout;
+	const sourceId = getCellId(edge.source);
+	const targetId = getCellId(edge.target);
+	const label = buildEdgeLabelValue(edge);
+	const edgeGeometryXml = buildEdgeGeometryXml(edge, options?.edgeWaypoints);
+	return `<mxCell id="${edgeCellId}" value="${label}" style="${buildEdgeStyleString(edge, layout, viewmodel, label)}" edge="1" parent="${defaultParentId}" source="${sourceId}" target="${targetId}">
+  ${edgeGeometryXml}${buildMxUserObjectXml(edgeOptionalFields.getCustomData(edge))}
+</mxCell>`;
+}
+/** Geometry for one node cell: id, parent, position, size (single responsibility). */
+function computeNodeGeometry(node, layout, getCellId) {
+	const { bboxes, defaultParentId, nodeIdsInView } = layout;
+	const id = getCellId(node.id);
+	const bbox = bboxes.get(node.id);
+	const { width, height } = bbox;
+	const parentId = node.parent != null && nodeIdsInView.has(node.parent) ? getCellId(node.parent) : defaultParentId;
+	const parentBbox = node.parent != null ? bboxes.get(node.parent) : void 0;
+	return {
+		id,
+		parentId,
+		x: parentBbox == null ? bbox.x + layout.offsetX : bbox.x - parentBbox.x,
+		y: parentBbox == null ? bbox.y + layout.offsetY : bbox.y - parentBbox.y,
+		width,
+		height
+	};
+}
+/** Style parts and value for one node (colors, stroke, likec4 roundtrip style, value HTML). */
+function computeNodeStylePartsAndValue(node, layout, options, viewmodel) {
+	const { containerNodeIds, effectiveStyles, fontFamily, containerTitleFontSizePx, containerTitleColor } = layout;
+	const strokeColorByNodeId = options?.strokeColorByNodeId;
+	const strokeWidthByNodeId = options?.strokeWidthByNodeId;
+	const isContainer = containerNodeIds.has(node.id);
+	const title = node.title;
+	const desc = toExportString(node.description);
+	const tech = toExportString(node.technology);
+	const notes = toExportString(nodeOptionalFields.getNotes(node));
+	const tags = nodeOptionalFields.getTags(node);
+	const tagList = Array.isArray(tags) && tags.length > 0 ? tags.join(",") : "";
+	const navTo = toNonEmptyString(nodeOptionalFields.getNavigateTo(node));
+	const iconName = toNonEmptyString(nodeOptionalFields.getIcon(node));
+	const shapeStyle = isContainer ? "shape=rectangle;rounded=0;container=1;collapsible=0;startSize=0;" : drawioShape(node.shape);
+	const strokeColorOverride = strokeColorByNodeId?.[node.id];
+	const strokeWidthOverride = strokeWidthByNodeId?.[node.id];
+	const elemColors = strokeColorOverride ? applyStrokeColorOverride(getElementColors(viewmodel, node.color), strokeColorOverride) : getElementColors(viewmodel, node.color);
+	const fillHex = elemColors?.fill ?? DEFAULT_NODE_FILL_HEX;
+	const strokeHex = elemColors?.stroke ?? DEFAULT_NODE_STROKE_HEX;
+	const fontHex = elemColors?.font ?? elemColors?.stroke ?? DEFAULT_NODE_FONT_HEX;
+	const colorStyle = `fillColor=${fillHex};strokeColor=${strokeHex};fontColor=${fontHex};`;
+	const nodeStyle = node.style;
+	const fontSizePx = effectiveStyles.fontSize(nodeStyle?.textSize);
+	const value = escapeXml(buildNodeValueHtml(title, desc, isContainer, fontHex, fontFamily, fontSizePx));
+	const borderVal = nodeStyle?.border;
+	const strokeWidth = strokeWidthOverride ?? getDefaultStrokeWidth(borderVal, isContainer);
+	const strokeWidthStyle = strokeWidth !== "" ? `strokeWidth=${strokeWidth};` : "";
+	const containerDashed = getContainerDashedStyle(isContainer, borderVal);
+	const containerOpacityNum = isContainer === true ? nodeStyle?.opacity ?? DEFAULT_CONTAINER_OPACITY : void 0;
+	const fillOpacityStyle = containerOpacityNum != null && isContainer === true ? `fillOpacity=${Math.min(100, Math.max(0, containerOpacityNum))};` : "";
+	const likec4Style = buildLikec4StyleForNode({
+		desc,
+		tech,
+		notes,
+		tagList,
+		navTo,
+		iconName,
+		summaryStr: toExportString(nodeOptionalFields.getSummary(node)),
+		linksJson: linksToStyleJson(nodeOptionalFields.getLinks(node)),
+		borderVal,
+		containerOpacityNum,
+		strokeWidth,
+		colorNameForRoundtrip: node.color ? encodeURIComponent(String(node.color)) : "",
+		nodeStyle,
+		strokeHex,
+		nodeNotation: nodeOptionalFields.getNotation(node)
+	});
+	const userObjectXml = buildMxUserObjectXml(nodeOptionalFields.getCustomData(node));
+	const navLinkStyle = buildNavLinkStyle(navTo);
+	return {
+		value,
+		styleStr: `${isContainer ? "align=left;verticalAlign=top;overflow=fill;whiteSpace=wrap;html=1;" : `align=center;verticalAlign=middle;verticalLabelPosition=middle;labelPosition=center;fontSize=${fontSizePx};fontStyle=1;spacingTop=4;spacingLeft=2;spacingRight=2;spacingBottom=2;overflow=fill;whiteSpace=wrap;html=1;fontFamily=${encodeURIComponent(fontFamily)};`}${shapeStyle}${colorStyle}${strokeWidthStyle}${containerDashed}${fillOpacityStyle}${navLinkStyle}${likec4Style}`,
+		userObjectXml,
+		navTo,
+		isContainer,
+		title,
+		fontFamily,
+		containerTitleFontSizePx,
+		containerTitleColor
+	};
+}
+/** Orchestrator: compute node geometry + style/value, then merge into NodeCellExportData. */
+function computeNodeCellExportData(node, layout, options, viewmodel, getCellId, containerTitleCellId) {
+	const geometry = computeNodeGeometry(node, layout, getCellId);
+	const styleAndValue = computeNodeStylePartsAndValue(node, layout, options, viewmodel);
+	return {
+		...geometry,
+		value: styleAndValue.value,
+		styleStr: styleAndValue.styleStr,
+		userObjectXml: styleAndValue.userObjectXml,
+		navTo: styleAndValue.navTo,
+		isContainer: styleAndValue.isContainer,
+		fontFamily: styleAndValue.fontFamily,
+		...styleAndValue.isContainer && {
+			title: styleAndValue.title ?? "",
+			titleCellId: String(containerTitleCellId),
+			containerTitleFontSizePx: styleAndValue.containerTitleFontSizePx,
+			containerTitleColor: styleAndValue.containerTitleColor
+		}
+	};
+}
+/** Build node vertex mxCell XML from precomputed data (single responsibility — XML assembly only). mxUserObject before mxGeometry for parser/roundtrip (align with draw.io expectations). */
+function buildNodeCellXml(data) {
+	const geometryLine = `<mxGeometry height="${Math.round(data.height)}" width="${Math.round(data.width)}" x="${Math.round(data.x)}" y="${Math.round(data.y)}" as="geometry" />`;
+	const innerContent = data.userObjectXml !== "" ? `${data.userObjectXml}\n  ${geometryLine}` : `\n  ${geometryLine}`;
+	const userObjectLabel = data.isContainer && data.title != null ? escapeXml(data.title) : data.value;
+	const cellXml = data.navTo === "" ? `<mxCell id="${data.id}" value="${data.value}" style="${data.styleStr}" vertex="1" parent="${data.parentId}">\n  ${innerContent}\n</mxCell>` : `<UserObject label="${userObjectLabel}" link="${DRAWIO_PAGE_LINK_PREFIX}${escapeXml(data.navTo)}" id="${data.id}">\n  <mxCell parent="${data.parentId}" style="${data.styleStr}" value="${data.value}" vertex="1">\n  ${innerContent}\n</mxCell>\n</UserObject>`;
+	if (!data.isContainer) return {
+		vertexXml: cellXml,
+		isContainer: false
+	};
+	return {
+		vertexXml: cellXml,
+		titleCellXml: buildContainerTitleCellXml(data.title ?? "", data.titleCellId ?? data.id, data.navTo, data.id, data.fontFamily, data.containerTitleFontSizePx ?? 12, data.containerTitleColor ?? CONTAINER_TITLE_COLOR),
+		isContainer: true
+	};
+}
+/** Build container title cell XML (child of container, relative position CONTAINER_TITLE_INSET_*). */
+function buildContainerTitleCellXml(title, titleId, navTo, containerId, fontFamily, fontSizePx, colorHex) {
+	const titleValue = escapeXml(title);
+	const titleWidth = Math.max(CONTAINER_TITLE_MIN_WIDTH_PX, Math.min(CONTAINER_TITLE_MAX_WIDTH_PX, title.length * CONTAINER_TITLE_CHAR_WIDTH_PX));
+	const titleHeight = CONTAINER_TITLE_HEIGHT_PX;
+	const titleX = CONTAINER_TITLE_INSET_X;
+	const titleY = CONTAINER_TITLE_INSET_Y;
+	const navLinkStyle = buildNavLinkStyle(navTo);
+	const titleStyle = `shape=text;html=1;fillColor=none;strokeColor=none;align=left;verticalAlign=top;fontSize=${fontSizePx};fontStyle=1;fontColor=${colorHex};fontFamily=${encodeURIComponent(fontFamily)};${navLinkStyle}`;
+	if (navTo === "") return `<mxCell id="${titleId}" value="${titleValue}" style="${titleStyle}" vertex="1" parent="${containerId}">\n  <mxGeometry x="${Math.round(titleX)}" y="${Math.round(titleY)}" width="${titleWidth}" height="${titleHeight}" as="geometry" />\n</mxCell>`;
+	const titleInner = `<mxCell parent="${containerId}" style="${titleStyle}" value="${titleValue}" vertex="1">\n  <mxGeometry x="${Math.round(titleX)}" y="${Math.round(titleY)}" width="${titleWidth}" height="${titleHeight}" as="geometry" />\n</mxCell>`;
+	return `<UserObject label="${escapeXml(title)}" link="${DRAWIO_PAGE_LINK_PREFIX}${escapeXml(navTo)}" id="${titleId}">\n  ${titleInner}\n</UserObject>`;
+}
+/** View title for diagram name and root cell (single source of truth). */
+function getViewTitle(view) {
+	return typeof view.title === "string" ? view.title : null;
+}
+/** Normalize view description from txt/md/string to plain string (single responsibility). */
+function getViewDescriptionString(view) {
+	const raw = view.description;
+	if (raw != null && typeof raw === "object" && "txt" in raw) return String(raw.txt);
+	if (raw != null && typeof raw === "object" && "md" in raw) return String(raw.md);
+	if (typeof raw === "string") return raw;
+	return "";
+}
+/** Build root cell style string from view metadata (title, description, notation) for round-trip. */
+function buildRootCellStyle(view) {
+	const viewTitle = getViewTitle(view);
+	const viewDesc = getViewDescriptionString(view);
+	const viewDescEnc = viewDesc.trim() !== "" ? encodeURIComponent(viewDesc.trim()) : "";
+	const viewNotationRaw = view.notation;
+	const viewNotation = typeof viewNotationRaw === "string" && viewNotationRaw !== "" ? viewNotationRaw : void 0;
+	const viewNotationEnc = viewNotation != null ? encodeURIComponent(viewNotation) : "";
+	return [
+		"rounded=1;whiteSpace=wrap;html=1;fillColor=none;strokeColor=none;",
+		`likec4ViewTitle=${encodeURIComponent(viewTitle ?? view.id)};`,
+		viewDescEnc !== "" ? `likec4ViewDescription=${viewDescEnc};` : "",
+		viewNotationEnc !== "" ? `likec4ViewNotation=${viewNotationEnc};` : ""
+	].join("");
+}
+/**
+* Map LikeC4 RelationshipArrowType to draw.io endArrow/startArrow style value.
+*/
+function drawioArrow(arrow) {
+	switch (arrow) {
+		case "none": return "none";
+		case "open":
+		case "onormal":
+		case "vee": return "open";
+		case "diamond":
+		case "odiamond": return "diamond";
+		case "dot":
+		case "odot": return "oval";
+		case "crow": return "block";
+		default: return "block";
+	}
+}
+const DEFAULT_BBOX = {
+	x: 0,
+	y: 0,
+	width: DEFAULT_NODE_WIDTH,
+	height: DEFAULT_NODE_HEIGHT
+};
+/** True when bbox equals default (unlaid) dimensions. */
+function isDefaultBbox(b) {
+	return b.x === DEFAULT_BBOX.x && b.y === DEFAULT_BBOX.y && b.width === DEFAULT_BBOX.width && b.height === DEFAULT_BBOX.height;
+}
+/** Spread nodes that share the same default bbox vertically so they don't overlap (single responsibility). */
+function spreadUnlaidNodesOverVertical(bboxes, sortedNodes, containerNodeIds) {
+	const bboxKey = (b) => `${b.x},${b.y},${b.width},${b.height}`;
+	const nonContainerNodes = sortedNodes.filter((n) => !containerNodeIds.has(n.id));
+	const byBbox = /* @__PURE__ */ new Map();
+	for (const n of nonContainerNodes) {
+		const b = bboxes.get(n.id);
+		if (!b) continue;
+		const key = bboxKey(b);
+		const list = byBbox.get(key) ?? [];
+		list.push(n);
+		byBbox.set(key, list);
+	}
+	for (const bboxNodes of byBbox.values()) {
+		if (bboxNodes.length <= 1) continue;
+		const firstNode = bboxNodes[0];
+		const firstBbox = firstNode ? bboxes.get(firstNode.id) : void 0;
+		if (firstBbox && isDefaultBbox(firstBbox)) bboxNodes.forEach((node, i) => {
+			bboxes.set(node.id, {
+				...firstBbox,
+				x: firstBbox.x,
+				y: firstBbox.y + i * (firstBbox.height + NODES_SPREAD_GAP)
+			});
+		});
+	}
+}
+/** Wrap container bboxes around children when container has default bbox (single responsibility). */
+function computeContainerBboxesFromChildren(bboxes, containerNodeIds, sortedNodes, nodeIdsInView, containerPadding, containerPaddingVertical) {
+	const containerNodesSorted = [...sortedNodes].filter((n) => containerNodeIds.has(n.id)).sort((a, b) => (b.level ?? 0) - (a.level ?? 0));
+	for (const node of containerNodesSorted) {
+		const inView = (nodeOptionalFields.getChildren(node) ?? []).filter((id) => nodeIdsInView.has(id));
+		if (inView.length === 0) continue;
+		if (!isDefaultBbox(bboxes.get(node.id))) continue;
+		let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+		for (const cid of inView) {
+			const b = bboxes.get(cid);
+			if (!b) continue;
+			minX = Math.min(minX, b.x);
+			minY = Math.min(minY, b.y);
+			maxX = Math.max(maxX, b.x + b.width);
+			maxY = Math.max(maxY, b.y + b.height);
+		}
+		if (minX !== Infinity) bboxes.set(node.id, {
+			x: minX - containerPadding,
+			y: minY - containerPaddingVertical,
+			width: maxX - minX + 2 * containerPadding,
+			height: maxY - minY + 2 * containerPaddingVertical
+		});
+	}
+}
+/** Compute canvas offsets to center content (single responsibility). */
+function computeContentBoundsAndOffsets(bboxes) {
+	let contentMinX = Infinity, contentMinY = Infinity, contentMaxX = -Infinity, contentMaxY = -Infinity;
+	for (const b of bboxes.values()) {
+		contentMinX = Math.min(contentMinX, b.x);
+		contentMinY = Math.min(contentMinY, b.y);
+		contentMaxX = Math.max(contentMaxX, b.x + b.width);
+		contentMaxY = Math.max(contentMaxY, b.y + b.height);
+	}
+	if (contentMinX === Infinity) contentMinX = 0;
+	if (contentMinY === Infinity) contentMinY = 0;
+	if (contentMaxX === -Infinity) contentMaxX = contentMinX + DEFAULT_CANVAS_WIDTH;
+	if (contentMaxY === -Infinity) contentMaxY = contentMinY + DEFAULT_CANVAS_HEIGHT;
+	const contentCx = contentMinX + (contentMaxX - contentMinX) / 2;
+	const contentCy = contentMinY + (contentMaxY - contentMinY) / 2;
+	return {
+		offsetX: DEFAULT_CANVAS_WIDTH / 2 - contentCx,
+		offsetY: DEFAULT_CANVAS_HEIGHT / 2 - contentCy,
+		canvasWidth: DEFAULT_CANVAS_WIDTH,
+		canvasHeight: DEFAULT_CANVAS_HEIGHT
+	};
+}
+/**
+* Layout phase: compute bboxes, container wrap, content bounds, and offsets.
+* Delegates to spreadUnlaidNodesOverVertical, computeContainerBboxesFromChildren, computeContentBoundsAndOffsets.
+*/
+function computeDiagramLayout(viewmodel, options) {
+	const view = viewmodel.$view;
+	const { nodes } = view;
+	const layoutOverride = options?.layoutOverride;
+	const sortedNodes = [...nodes].sort((a, b) => {
+		if (isNullish(a.parent) && isNullish(b.parent)) return 0;
+		if (isNullish(a.parent)) return -1;
+		if (isNullish(b.parent)) return 1;
+		if (a.parent === b.parent) return 0;
+		if (a.id.startsWith(b.id + ".")) return 1;
+		if (b.id.startsWith(a.id + ".")) return -1;
+		return 0;
+	});
+	const getBBox = (n) => {
+		const over = layoutOverride?.[n.id];
+		if (over) return over;
+		const d = n;
+		return {
+			x: typeof d.x === "number" ? d.x : Array.isArray(d.position) ? d.position[0] : 0,
+			y: typeof d.y === "number" ? d.y : Array.isArray(d.position) ? d.position[1] : 0,
+			width: typeof d.width === "number" ? d.width : d.size?.width ?? DEFAULT_NODE_WIDTH,
+			height: typeof d.height === "number" ? d.height : d.size?.height ?? DEFAULT_NODE_HEIGHT
+		};
+	};
+	const bboxes = /* @__PURE__ */ new Map();
+	for (const node of sortedNodes) bboxes.set(node.id, getBBox(node));
+	const nodeIdsInView = new Set(nodes.map((n) => n.id));
+	const containerNodeIds = new Set(nodes.filter((n) => {
+		const ch = nodeOptionalFields.getChildren(n);
+		return Array.isArray(ch) && ch.some((childId) => nodeIdsInView.has(childId));
+	}).map((n) => n.id));
+	spreadUnlaidNodesOverVertical(bboxes, sortedNodes, containerNodeIds);
+	const effectiveStyles = getEffectiveStyles(viewmodel);
+	const containerPadding = effectiveStyles.theme.spacing.xl;
+	computeContainerBboxesFromChildren(bboxes, containerNodeIds, sortedNodes, nodeIdsInView, containerPadding, effectiveStyles.theme.spacing.xl + effectiveStyles.theme.spacing.md);
+	const { offsetX, offsetY, canvasWidth, canvasHeight } = computeContentBoundsAndOffsets(bboxes);
+	return {
+		view,
+		bboxes,
+		containerNodeIds,
+		sortedNodes,
+		offsetX,
+		offsetY,
+		canvasWidth,
+		canvasHeight,
+		defaultParentId: "1",
+		rootId: "0",
+		effectiveStyles,
+		fontFamily: LIKEC4_FONT_FAMILY,
+		containerTitleFontSizePx: Math.round(effectiveStyles.theme.textSizes.xs),
+		containerTitleColor: CONTAINER_TITLE_COLOR,
+		nodeIdsInView
+	};
+}
+/**
+* Generate DrawIO (mxGraph) XML from a layouted LikeC4 view.
+* Preserves positions, hierarchy, colors, descriptions and technology so the diagram
+* can be opened and edited in draw.io with full compatibility.
+*
+* @param viewmodel - Layouted LikeC4 view model (from model.view(id))
+* @param options - Optional overrides for layout/colors (round-trip from comment blocks)
+* @returns Diagram name, id and content (for single or multi composition)
+*/
+function generateDiagramContent(viewmodel, options) {
+	const view = viewmodel.$view;
+	const { edges } = view;
+	const useCompressed = options?.compressed !== false;
+	const layout = computeDiagramLayout(viewmodel, options);
+	const { sortedNodes, defaultParentId, rootId, canvasWidth, canvasHeight } = layout;
+	const nodeIds = /* @__PURE__ */ new Map();
+	let cellId = 2;
+	const getCellId = (nodeId) => {
+		let id = nodeIds.get(nodeId);
+		if (!id) {
+			if (cellId >= CONTAINER_TITLE_CELL_ID_START) throw new Error("DrawIO cell ID range exhausted");
+			id = String(cellId++);
+			nodeIds.set(nodeId, id);
+		}
+		return id;
+	};
+	const containerCells = [];
+	const vertexCells = [];
+	const edgeCells = [];
+	let containerTitleCellId = CONTAINER_TITLE_CELL_ID_START;
+	for (const node of sortedNodes) {
+		const result = buildNodeCellXml(computeNodeCellExportData(node, layout, options, viewmodel, getCellId, containerTitleCellId));
+		if (result.isContainer) {
+			containerCells.push(result.vertexXml);
+			if (result.titleCellXml) containerCells.push(result.titleCellXml);
+			containerTitleCellId++;
+		} else vertexCells.push(result.vertexXml);
+	}
+	for (const edge of edges) {
+		if (cellId >= CONTAINER_TITLE_CELL_ID_START) throw new Error("DrawIO cell ID range exhausted");
+		const edgeId = String(cellId++);
+		edgeCells.push(buildEdgeCellXml(edge, layout, options, viewmodel, getCellId, edgeId));
+	}
+	const allCells = [
+		`<mxCell id="${defaultParentId}" value="" style="${buildRootCellStyle(view)}" vertex="1" parent="${rootId}">
+  <mxGeometry x="0" y="0" width="${canvasWidth}" height="${canvasHeight}" as="geometry" />
+</mxCell>`,
+		...containerCells,
+		...vertexCells,
+		...edgeCells
+	].join("\n");
+	const diagramName = (getViewTitle(view) ?? view.id).trim() || view.id;
+	const mxGraphModelXml = `<mxGraphModel dx="${MXGRAPH_DEFAULT_DX}" dy="${MXGRAPH_DEFAULT_DY}" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="${MXGRAPH_PAGE_WIDTH}" pageHeight="${MXGRAPH_PAGE_HEIGHT}" math="0" shadow="0">
+      <root>
+        <mxCell id="${rootId}" />
+        ${allCells}
+      </root>
+    </mxGraphModel>`;
+	const content = useCompressed ? compressDrawioDiagramXml(mxGraphModelXml) : mxGraphModelXml;
+	return {
+		name: diagramName,
+		id: view.id,
+		content
+	};
+}
+/** Wrap one or more diagram contents in mxfile XML. */
+function wrapInMxFile(diagrams, modified) {
+	const modifiedAttr = escapeXml(modified ?? (/* @__PURE__ */ new Date()).toISOString());
+	if (diagrams.length === 0) return `<?xml version="1.0" encoding="UTF-8"?>
+<mxfile host="LikeC4" modified="${modifiedAttr}" agent="LikeC4" version="1.0" etag="" type="device">
+</mxfile>
+`;
+	return `<?xml version="1.0" encoding="UTF-8"?>
+<mxfile host="LikeC4" modified="${modifiedAttr}" agent="LikeC4" version="1.0" etag="" type="device"${diagrams.length > 1 ? ` pages="${diagrams.length}"` : ""}>
+${diagrams.map((d) => `  <diagram name="${escapeXml(d.name)}" id="${DRAWIO_DIAGRAM_ID_PREFIX}${escapeXml(d.id)}">${d.content}</diagram>`).join("\n")}
+</mxfile>
+`;
+}
+/**
+* Generate a single DrawIO file from one view.
+*
+* @param viewmodel - Layouted LikeC4 view model (from model.view(id))
+* @param options - Optional overrides for layout/colors (round-trip from comment blocks)
+* @returns DrawIO .drawio XML string
+*/
+function generateDrawio(viewmodel, options) {
+	return wrapInMxFile([generateDiagramContent(viewmodel, options)], options?.modified);
+}
+/**
+* Generate a single DrawIO file with multiple diagrams (tabs).
+* Each view becomes one tab in draw.io. Use this when exporting a project
+* so all views open in one file with one tab per view.
+*
+* @param viewmodels - Layouted view models (e.g. from model.views())
+* @param optionsByViewId - Optional per-view options (e.g. compressed: false for each tab)
+* @param modified - Optional ISO timestamp for mxfile modified attribute (for deterministic output)
+* @returns DrawIO .drawio XML string with multiple <diagram> elements
+*/
+function generateDrawioMulti(viewmodels, optionsByViewId, modified) {
+	return wrapInMxFile(viewmodels.map((vm) => generateDiagramContent(vm, optionsByViewId?.[vm.$view.id])), modified);
+}
+/**
+* Build export options from .c4 source round-trip comment blocks (layout, strokes, waypoints).
+* Shared by CLI and playground so options are built in one place (DRY).
+*
+* @param viewId - View id for layoutOverride lookup.
+* @param roundtrip - Parsed round-trip data or null (caller may parse once for many views).
+* @param overrides - Optional overrides (e.g. compressed: false).
+* @returns GenerateDrawioOptions for this view.
+*/
+function buildOptionsFromRoundtrip(viewId, roundtrip, overrides) {
+	const options = {
+		compressed: false,
+		...overrides
+	};
+	if (!roundtrip) return options;
+	const layoutForView = roundtrip.layoutByView[viewId]?.nodes;
+	if (layoutForView != null) options.layoutOverride = layoutForView;
+	if (Object.keys(roundtrip.strokeColorByFqn).length > 0) options.strokeColorByNodeId = roundtrip.strokeColorByFqn;
+	if (Object.keys(roundtrip.strokeWidthByFqn).length > 0) options.strokeWidthByNodeId = roundtrip.strokeWidthByFqn;
+	if (Object.keys(roundtrip.edgeWaypoints).length > 0) options.edgeWaypoints = roundtrip.edgeWaypoints;
+	return options;
+}
+/**
+* Build export options for one view from .c4 source (parses source once).
+*
+* @param viewId - View id for layoutOverride lookup.
+* @param sourceContent - Full .c4 source (e.g. joined workspace files).
+* @param overrides - Optional overrides (e.g. compressed: false).
+* @returns GenerateDrawioOptions for this view.
+*/
+function buildDrawioExportOptionsFromSource(viewId, sourceContent, overrides) {
+	return buildOptionsFromRoundtrip(viewId, sourceContent ? parseDrawioRoundtripComments(sourceContent) : null, overrides);
+}
+/**
+* Build export options per view id from .c4 source (parses source once for all views).
+*
+* @param viewIds - View ids to build options for.
+* @param sourceContent - Full .c4 source (e.g. joined workspace files).
+* @param overrides - Optional overrides (e.g. compressed: false).
+* @returns Record of viewId → GenerateDrawioOptions.
+*/
+function buildDrawioExportOptionsForViews(viewIds, sourceContent, overrides) {
+	const roundtrip = sourceContent ? parseDrawioRoundtripComments(sourceContent) : null;
+	return Object.fromEntries(viewIds.map((viewId) => [viewId, buildOptionsFromRoundtrip(viewId, roundtrip, overrides)]));
+}
+/**
+* Generate a draw.io editor URL that opens the given drawio XML pre-loaded.
+* Uses the `#create=` fragment with compressed XML data.
+*
+* @param xml - A .drawio XML string (output of generateDrawio / generateDrawioMulti).
+* @returns URL string like "https://app.diagrams.net/#create=..."
+*/
+function generateDrawioEditUrl(xml) {
+	const base64 = compressDrawioDiagramXml(xml);
+	const createObj = JSON.stringify({
+		type: "xml",
+		compressed: true,
+		data: base64
+	});
+	return "https://app.diagrams.net/#create=" + encodeURIComponent(createObj);
+}
 const capitalizeFirstLetter$1 = (value) => value.charAt(0).toLocaleUpperCase() + value.slice(1);
 const fqnName$1 = (nodeId) => nodeId.split(".").map(capitalizeFirstLetter$1).join("");
 const nodeName$1 = (node) => {
@@ -73,6 +2213,7 @@ const mmdshape = ({ shape, title }) => {
 		case "bucket": return `@{ shape: trap-t, ${label} }`;
 		case "rectangle": return `@{ shape: rectangle, ${label} }`;
 		case "document": return `@{ shape: doc, ${label} }`;
+		case "component": return `@{ shape: rectangle, ${label} }`;
 		default: nonexhaustive(shape);
 	}
 };
@@ -104,9 +2245,6 @@ function generateMermaid(viewmodel) {
 		indentation: 2
 	}));
 }
-
-//#endregion
-//#region src/model/generate-aux.ts
 function toUnion(elements) {
 	if (elements.length === 0) return "never";
 	return elements.sort(compareNatural).map((v) => `  | ${JSON.stringify(v)}`).join("\n").trimStart();
@@ -159,9 +2297,6 @@ export type $Tags = readonly $Aux['Tag'][]
 export type $MetadataKey = $Aux['MetadataKey']
 `.trimStart();
 }
-
-//#endregion
-//#region src/model/generate-likec4-model.ts
 function generateLikeC4Model(model, options = {}) {
 	const aux = generateAux(model, options);
 	const { useCorePackage = false } = options;
@@ -185,9 +2320,6 @@ export const likec4model: LikeC4Model<$Aux> = new LikeC4Model(${JSON5.stringify(
 /* prettier-ignore-end */
 `.trimStart();
 }
-
-//#endregion
-//#region src/puml/generate-puml.ts
 const capitalizeFirstLetter = (value) => value.charAt(0).toLocaleUpperCase() + value.slice(1);
 const fqnName = (nodeId) => {
 	return nodeId.split(/[.-]/).map(capitalizeFirstLetter).join("");
@@ -218,6 +2350,7 @@ const pumlShape = ({ shape }) => {
 		case "person": return shape;
 		case "storage":
 		case "cylinder": return "database";
+		case "component": return "component";
 		case "document":
 		case "mobile":
 		case "bucket":
@@ -230,7 +2363,7 @@ function generatePuml(viewmodel) {
 	const view = viewmodel.$view;
 	const colors = viewmodel.$model.$styles.theme.colors;
 	const { nodes, edges } = view;
-	const elemntColorProvider = (key) => (colorKey) => colorKey in colors ? colors[colorKey].elements[key] : void 0;
+	const elementColorProvider = (key) => (colorKey) => colorKey in colors ? colors[colorKey].elements[key] : void 0;
 	const relationshipsColorProvider = (key) => (colorKey) => colorKey in colors ? colors[colorKey].relationships[key] : void 0;
 	const names = /* @__PURE__ */ new Map();
 	const printHeader = () => {
@@ -246,7 +2379,7 @@ function generatePuml(viewmodel) {
 		const shape = pumlShape(node);
 		const fqn = fqnName(node.id);
 		return new CompositeGeneratorNode().append("skinparam ", shape, "<<", fqn, ">>", "{", NL).indent({
-			indentedChildren: (indent) => indent.append("BackgroundColor ", pumlColor(node.color, elemntColorProvider("fill")), NL).append("FontColor ", pumlColor(node.color, elemntColorProvider("hiContrast"), "#FFFFFF"), NL).append("BorderColor ", pumlColor(node.color, elemntColorProvider("stroke")), NL),
+			indentedChildren: (indent) => indent.append("BackgroundColor ", pumlColor(node.color, elementColorProvider("fill")), NL).append("FontColor ", pumlColor(node.color, elementColorProvider("hiContrast"), "#FFFFFF"), NL).append("BorderColor ", pumlColor(node.color, elementColorProvider("stroke")), NL),
 			indentation: 2
 		}).append("}", NL);
 	};
@@ -264,7 +2397,7 @@ function generatePuml(viewmodel) {
 		const fqn = fqnName(node.id);
 		names.set(node.id, fqn);
 		return new CompositeGeneratorNode().append("rectangle \"", label, "\" <<", fqn, ">> as ", fqn, " {", NL).indent({
-			indentedChildren: (indent) => indent.append("skinparam ", "RectangleBorderColor<<", fqn, ">> ", pumlColor(node.color, elemntColorProvider("fill")), NL).append("skinparam ", "RectangleFontColor<<", fqn, ">> ", pumlColor(node.color, elemntColorProvider("fill")), NL).append("skinparam ", "RectangleBorderStyle<<", fqn, ">> ", "dashed", NL, NL).append(joinToNode(nodes.filter((n) => n.parent === node.id), (c) => c.children.length > 0 ? printBoundary(c) : printNode(c))),
+			indentedChildren: (indent) => indent.append("skinparam ", "RectangleBorderColor<<", fqn, ">> ", pumlColor(node.color, elementColorProvider("fill")), NL).append("skinparam ", "RectangleFontColor<<", fqn, ">> ", pumlColor(node.color, elementColorProvider("fill")), NL).append("skinparam ", "RectangleBorderStyle<<", fqn, ">> ", "dashed", NL, NL).append(joinToNode(nodes.filter((n) => n.parent === node.id), (c) => c.children.length > 0 ? printBoundary(c) : printNode(c))),
 			indentation: 2
 		}).append("}", NL);
 	};
@@ -282,15 +2415,9 @@ function generatePuml(viewmodel) {
 	};
 	return toString(new CompositeGeneratorNode().append("@startuml", NL).append(printHeader(), NL).append(printTheme(), NL).append(joinToNode(nodes.filter((n) => n.children.length == 0), (n) => printStereotypes(n), { appendNewLineIfNotEmpty: true })).append(joinToNode(nodes.filter((n) => isNullish(n.parent)), (n) => n.children.length > 0 ? printBoundary(n) : printNode(n), { appendNewLineIfNotEmpty: true })).appendIf(edges.length > 0, NL, joinToNode(edges, (e) => printEdge(e), { appendNewLineIfNotEmpty: true })).append(`@enduml`, NL));
 }
-
-//#endregion
-//#region src/views-data-ts/generateViewId.ts
 function generateViewId(views) {
 	return joinToNode(views, (view) => expandToNode`${JSON5.stringify(view.id)}`, { separator: " | " });
 }
-
-//#endregion
-//#region src/views-data-ts/generate-views-data.ts
 /**
 * Generate *.js file with views data
 */
@@ -413,9 +2540,6 @@ function generateViewsDataDTs(diagrams) {
   `.append(NL);
 	return toString(out);
 }
-
-//#endregion
-//#region src/react-next/generate-react-next.ts
 /**
 * @deprecated in favor packages/likec4/src/cli/codegen/react/index.ts
 */
@@ -519,9 +2643,6 @@ function generateIndex() {
 		dts: toString(dts)
 	};
 }
-
-//#endregion
-//#region src/react/generate-react-types.ts
 function generateReactTypes(model, options = {}) {
 	const { useCorePackage = false } = options;
 	invariant(!model.isParsed(), "can not generate react types for parsed model");
@@ -584,6 +2705,4 @@ export {
 /* prettier-ignore-end */
 `.trimStart();
 }
-
-//#endregion
-export { generateD2, generateLikeC4Model, generateMermaid, generatePuml, generateReactNext, generateReactTypes, generateViewsDataDTs, generateViewsDataJs, generateViewsDataTs };
+export { DEFAULT_DRAWIO_ALL_FILENAME, buildDrawioExportOptionsForViews, buildDrawioExportOptionsFromSource, generateD2, generateDrawio, generateDrawioEditUrl, generateDrawioMulti, generateLikeC4Model, generateMermaid, generatePuml, generateReactNext, generateReactTypes, generateViewsDataDTs, generateViewsDataJs, generateViewsDataTs, getAllDiagrams, parseDrawioRoundtripComments, parseDrawioToLikeC4, parseDrawioToLikeC4Multi };