@likec4/generators 1.48.0 → 1.49.0

package/dist/index.d.mts

@@ -1,13 +1,33 @@
-import { DiagramView } from "@likec4/core";
 import { aux } from "@likec4/core/types";
+import { DiagramView } from "@likec4/core";
 import { AnyLikeC4Model, LikeC4Model, LikeC4ViewModel } from "@likec4/core/model";
 
+//#region src/drawio/generate-drawio.d.ts
+/**
+ * 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))
+ * @returns DrawIO .drawio XML string
+ */
+declare function generateDrawio(viewmodel: LikeC4ViewModel<aux.Unknown>): string;
+//#endregion
 //#region src/d2/generate-d2.d.ts
 declare function generateD2(viewmodel: LikeC4ViewModel<aux.Unknown>): string;
 //#endregion
 //#region src/mmd/generate-mmd.d.ts
 declare function generateMermaid(viewmodel: LikeC4ViewModel<aux.Unknown>): string;
 //#endregion
+//#region src/drawio/parse-drawio.d.ts
+/**
+ * Convert DrawIO XML to LikeC4 source (.c4) string.
+ * - Vertices become model elements (actor/container); hierarchy from parent refs.
+ * - Edges become relations (->).
+ * - Root diagram cells (parent "1") are top-level; others are nested by parent.
+ */
+declare function parseDrawioToLikeC4(xml: string): string;
+//#endregion
 //#region src/model/generate-likec4-model.d.ts
 declare function generateLikeC4Model(model: LikeC4Model<any>, options?: {
   useCorePackage?: boolean;
@@ -56,4 +76,4 @@ declare function generateViewsDataTs(diagrams: Iterable<DiagramView>): string;
  */
 declare function generateViewsDataDTs(diagrams: Iterable<DiagramView>): string;
 //#endregion
-export { generateD2, generateLikeC4Model, generateMermaid, generatePuml, generateReactNext, generateReactTypes, generateViewsDataDTs, generateViewsDataJs, generateViewsDataTs };
+export { generateD2, generateDrawio, generateLikeC4Model, generateMermaid, generatePuml, generateReactNext, generateReactTypes, generateViewsDataDTs, generateViewsDataJs, generateViewsDataTs, parseDrawioToLikeC4 };

package/dist/index.mjs

@@ -1,11 +1,169 @@
-import { CompositeGeneratorNode, NL, expandToNode, joinToNode, toString } from "langium/generate";
+import { RichText, flattenMarkdownOrString } from "@likec4/core/types";
 import { isEmptyish, isNullish, keys, map, pipe, values } from "remeda";
+import { CompositeGeneratorNode, NL, expandToNode, joinToNode, toString } from "langium/generate";
 import { nonexhaustive } from "@likec4/core";
 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 DEFAULT_ELEMENT_COLORS = {
+	primary: {
+		fill: "#3b82f6",
+		stroke: "#2563eb"
+	},
+	gray: {
+		fill: "#6b7280",
+		stroke: "#4b5563"
+	},
+	green: {
+		fill: "#22c55e",
+		stroke: "#16a34a"
+	},
+	red: {
+		fill: "#ef4444",
+		stroke: "#dc2626"
+	},
+	blue: {
+		fill: "#3b82f6",
+		stroke: "#2563eb"
+	},
+	indigo: {
+		fill: "#6366f1",
+		stroke: "#4f46e5"
+	},
+	muted: {
+		fill: "#9ca3af",
+		stroke: "#6b7280"
+	}
+};
+const DEFAULT_EDGE_COLOR = "#6b7280";
+function escapeXml(unsafe) {
+	return unsafe.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
+}
+function drawioShape(shape) {
+	switch (shape) {
+		case "person": return "shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;";
+		case "rectangle": return "shape=rectangle;";
+		case "browser": return "shape=rectangle;rounded=1;";
+		case "mobile": return "shape=rectangle;rounded=1;";
+		case "cylinder": return "shape=cylinder3;whiteSpace=wrap;boundedLbl=1;backgroundOutline=1;size=15;";
+		case "queue": return "shape=cylinder3;whiteSpace=wrap;boundedLbl=1;backgroundOutline=1;size=15;";
+		case "storage": return "shape=cylinder3;whiteSpace=wrap;boundedLbl=1;backgroundOutline=1;size=15;";
+		case "bucket": return "shape=rectangle;rounded=1;";
+		case "document": return "shape=document;whiteSpace=wrap;html=1;boundedLbl=1;";
+		case "component": return "shape=component;";
+		default: return "shape=rectangle;";
+	}
+}
+function getElementColors(viewmodel, color) {
+	const styles = "$styles" in viewmodel && viewmodel.$styles ? viewmodel.$styles : null;
+	if (styles) try {
+		const values = styles.colors(color);
+		return {
+			fill: values.elements.fill,
+			stroke: values.elements.stroke
+		};
+	} catch {}
+	return DEFAULT_ELEMENT_COLORS[color] ?? DEFAULT_ELEMENT_COLORS["primary"];
+}
+function getEdgeStrokeColor(viewmodel, color) {
+	const styles = "$styles" in viewmodel && viewmodel.$styles ? viewmodel.$styles : null;
+	if (styles) try {
+		return styles.colors(color).relationships.line;
+	} catch {}
+	return DEFAULT_EDGE_COLOR;
+}
+function generateDrawio(viewmodel) {
+	const view = viewmodel.$view;
+	const { nodes, edges } = view;
+	const rootId = "0";
+	const defaultParentId = "1";
+	const nodeIds = /* @__PURE__ */ new Map();
+	let cellId = 2;
+	const getCellId = (nodeId) => {
+		let id = nodeIds.get(nodeId);
+		if (!id) {
+			id = String(cellId++);
+			nodeIds.set(nodeId, id);
+		}
+		return id;
+	};
+	const vertexCells = [];
+	const edgeCells = [];
+	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 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 ?? 120,
+			height: typeof d.height === "number" ? d.height : d.size?.height ?? 60
+		};
+	};
+	for (const node of sortedNodes) {
+		const id = getCellId(node.id);
+		const parentId = node.parent ? getCellId(node.parent) : defaultParentId;
+		const label = escapeXml(node.title);
+		const shapeStyle = drawioShape(node.shape);
+		const { x, y, width, height } = getBBox(node);
+		const elemColors = getElementColors(viewmodel, node.color);
+		const colorStyle = elemColors != null ? `fillColor=${elemColors.fill};strokeColor=${elemColors.stroke};fontColor=${elemColors.stroke};` : "";
+		const description = node.description && flattenMarkdownOrString(node.description);
+		const desc = isEmptyish(description) ? "" : escapeXml(description);
+		const technology = node.technology && flattenMarkdownOrString(node.technology);
+		const tech = isEmptyish(technology) ? "" : escapeXml(technology);
+		const userData = desc !== "" || tech !== "" ? `<mxUserObject><data key="likec4Description">${desc}</data><data key="likec4Technology">${tech}</data></mxUserObject>\n  ` : "";
+		vertexCells.push(`<mxCell id="${id}" value="${label}" style="${shapeStyle}${colorStyle}verticalAlign=middle;align=center;overflow=fill;spacingLeft=2;spacingRight=2;spacingTop=2;spacingBottom=2;" vertex="1" parent="${parentId}">
+  ${userData}<mxGeometry x="${Math.round(x)}" y="${Math.round(y)}" width="${Math.round(width)}" height="${Math.round(height)}" as="geometry" />
+</mxCell>`);
+	}
+	for (const edge of edges) {
+		const id = String(cellId++);
+		const sourceId = getCellId(edge.source);
+		const targetId = getCellId(edge.target);
+		const label = edge.label ? escapeXml(edge.label) : "";
+		const strokeColor = getEdgeStrokeColor(viewmodel, edge.color);
+		const dashStyle = edge.line === "dashed" ? "dashed=1;" : edge.line === "dotted" ? "dashed=1;dashPattern=1 1;" : "";
+		edgeCells.push(`<mxCell id="${id}" value="${label}" style="endArrow=block;html=1;rounded=0;exitX=1;exitY=0.5;entryX=0;entryY=0.5;strokeColor=${strokeColor};${dashStyle}" edge="1" parent="${defaultParentId}" source="${sourceId}" target="${targetId}">
+  <mxGeometry relative="1" as="geometry" />
+</mxCell>`);
+	}
+	let bounds = {
+		x: 0,
+		y: 0,
+		width: 800,
+		height: 600
+	};
+	try {
+		const b = viewmodel.bounds;
+		if (b != null && typeof b.x === "number") bounds = b;
+	} catch {}
+	const allCells = [
+		`<mxCell id="${defaultParentId}" vertex="1" parent="${rootId}">
+  <mxGeometry x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}" as="geometry" />
+</mxCell>`,
+		...vertexCells,
+		...edgeCells
+	].join("\n");
+	return `<?xml version="1.0" encoding="UTF-8"?>
+<mxfile host="LikeC4" modified="${(/* @__PURE__ */ new Date()).toISOString()}" agent="LikeC4" version="1.0" etag="" type="device">
+  <diagram name="${escapeXml(view.id)}" id="likec4-${escapeXml(view.id)}">
+    <mxGraphModel dx="800" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale=1 pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="${rootId}" />
+        ${allCells}
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
+`;
+}
 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 +185,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 +211,6 @@ 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 })));
 }
-
-//#endregion
-//#region src/mmd/generate-mmd.ts
 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 +229,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 +261,222 @@ function generateMermaid(viewmodel) {
 		indentation: 2
 	}));
 }
-
-//#endregion
-//#region src/model/generate-aux.ts
+function getAttr(attrs, name) {
+	const re = new RegExp(`${name}="([^"]*)"`, "i");
+	const m = attrs.match(re);
+	return m ? m[1] : void 0;
+}
+function parseNum(s) {
+	if (s === void 0 || s === "") return void 0;
+	const n = Number.parseFloat(s);
+	return Number.isNaN(n) ? void 0 : n;
+}
+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;
+}
+function parseUserData(fullTag) {
+	const out = {};
+	const descMatch = fullTag.match(/<data\s+key="likec4Description"[^>]*>([\s\S]*?)<\/data>/i);
+	if (descMatch?.[1]) out.description = decodeXmlEntities(descMatch[1].trim());
+	const techMatch = fullTag.match(/<data\s+key="likec4Technology"[^>]*>([\s\S]*?)<\/data>/i);
+	if (techMatch?.[1]) out.technology = decodeXmlEntities(techMatch[1].trim());
+	return out;
+}
+function parseDrawioXml(xml) {
+	const cells = [];
+	const mxCellRe = /<mxCell\s+([^>]+?)(?:\s*\/>|>([\s\S]*?)<\/mxCell>)/gi;
+	const geomAttr = (tag, name) => getAttr(tag, name);
+	let m;
+	while ((m = mxCellRe.exec(xml)) !== null) {
+		const attrs = m[1] ?? "";
+		const inner = m[2] ?? "";
+		const id = getAttr(attrs, "id");
+		if (!id) continue;
+		const valueRaw = getAttr(attrs, "value");
+		const parent = getAttr(attrs, "parent");
+		const source = getAttr(attrs, "source");
+		const target = getAttr(attrs, "target");
+		const vertex = getAttr(attrs, "vertex") === "1";
+		const edge = getAttr(attrs, "edge") === "1";
+		const style = getAttr(attrs, "style");
+		const geomMatch = m[0].match(/<mxGeometry[^>]*>/i);
+		const geomStr = geomMatch ? geomMatch[0] : "";
+		const styleMap = parseStyle(style ?? void 0);
+		const userData = parseUserData(inner);
+		const x = parseNum(geomAttr(geomStr, "x"));
+		const y = parseNum(geomAttr(geomStr, "y"));
+		const width = parseNum(geomAttr(geomStr, "width"));
+		const height = parseNum(geomAttr(geomStr, "height"));
+		const fillColor = styleMap.get("fillcolor") ?? styleMap.get("fillColor");
+		const strokeColor = styleMap.get("strokecolor") ?? styleMap.get("strokeColor");
+		const cell = {
+			id,
+			...valueRaw != null && valueRaw !== "" ? { value: decodeXmlEntities(valueRaw) } : {},
+			...parent != null && parent !== "" ? { parent } : {},
+			...source != null && source !== "" ? { source } : {},
+			...target != null && target !== "" ? { target } : {},
+			vertex,
+			edge,
+			...style != null && style !== "" ? { style } : {},
+			...x !== void 0 ? { x } : {},
+			...y !== void 0 ? { y } : {},
+			...width !== void 0 ? { width } : {},
+			...height !== void 0 ? { height } : {},
+			...fillColor !== void 0 ? { fillColor } : {},
+			...strokeColor !== void 0 ? { strokeColor } : {},
+			...userData.description != null ? { description: userData.description } : {},
+			...userData.technology != null ? { technology: userData.technology } : {}
+		};
+		cells.push(cell);
+	}
+	return cells;
+}
+function decodeXmlEntities(s) {
+	return s.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&quot;/g, "\"").replace(/&apos;/g, "'").replace(/&amp;/g, "&");
+}
+function inferKind(style) {
+	if (!style) return "container";
+	const s = style.toLowerCase();
+	if (s.includes("umlactor") || s.includes("shape=person")) return "actor";
+	if (s.includes("swimlane") || s.includes("shape=rectangle") && s.includes("rounded")) return "system";
+	return "container";
+}
+function toId(name) {
+	return name.trim().replace(/\s+/g, "_").replace(/[^a-zA-Z0-9_.-]/g, "").replace(/^[0-9]/, "_$&") || "element";
+}
+function parseDrawioToLikeC4(xml) {
+	const cells = parseDrawioXml(xml);
+	const byId = /* @__PURE__ */ new Map();
+	for (const c of cells) byId.set(c.id, c);
+	const vertices = cells.filter((c) => c.vertex && c.id !== "1");
+	const edges = cells.filter((c) => c.edge && c.source && c.target);
+	const rootId = "1";
+	const idToFqn = /* @__PURE__ */ new Map();
+	const idToCell = /* @__PURE__ */ new Map();
+	for (const v of vertices) idToCell.set(v.id, v);
+	const usedNames = /* @__PURE__ */ new Set();
+	function uniqueName(base) {
+		let name = toId(base || "element");
+		let n = name;
+		let i = 0;
+		while (usedNames.has(n)) n = `${name}_${++i}`;
+		usedNames.add(n);
+		return n;
+	}
+	for (const v of vertices) if (v.parent === rootId || !v.parent) {
+		const name = uniqueName(v.value ?? v.id);
+		idToFqn.set(v.id, name);
+	}
+	let changed = true;
+	while (changed) {
+		changed = false;
+		for (const v of vertices) {
+			if (idToFqn.has(v.id)) continue;
+			const parent = v.parent ? idToFqn.get(v.parent) : null;
+			if (parent != null) {
+				const local = uniqueName(v.value ?? v.id);
+				idToFqn.set(v.id, `${parent}.${local}`);
+				changed = true;
+			}
+		}
+	}
+	for (const v of vertices) if (!idToFqn.has(v.id)) idToFqn.set(v.id, uniqueName(v.value ?? v.id));
+	const hexToCustomName = /* @__PURE__ */ new Map();
+	let customColorIndex = 0;
+	for (const v of vertices) {
+		const fill = v.fillColor?.trim();
+		if (fill && /^#[0-9A-Fa-f]{3,8}$/.test(fill)) {
+			if (!hexToCustomName.has(fill)) hexToCustomName.set(fill, `drawio_color_${++customColorIndex}`);
+		}
+	}
+	const lines = [];
+	if (hexToCustomName.size > 0) {
+		lines.push("specification {");
+		for (const [hex, name] of hexToCustomName) lines.push(`  color ${name} ${hex}`);
+		lines.push("}");
+		lines.push("");
+	}
+	lines.push("model {");
+	lines.push("");
+	const children = /* @__PURE__ */ new Map();
+	const roots = [];
+	for (const [cellId, fqn] of idToFqn) {
+		const cell = idToCell.get(cellId);
+		if (!cell) continue;
+		if (cell.parent === rootId || !cell.parent) roots.push({
+			cellId,
+			fqn
+		});
+		else {
+			const parentFqn = idToFqn.get(cell.parent);
+			if (parentFqn != null) {
+				const list = children.get(parentFqn) ?? [];
+				list.push({
+					cellId,
+					fqn
+				});
+				children.set(parentFqn, list);
+			} else roots.push({
+				cellId,
+				fqn
+			});
+		}
+	}
+	function emitElement(cellId, fqn, indent) {
+		const cell = idToCell.get(cellId);
+		if (!cell) return;
+		const kind = inferKind(cell.style);
+		const title = cell.value && cell.value.trim() || fqn.split(".").pop() || "Element";
+		const name = fqn.split(".").pop();
+		const pad = "  ".repeat(indent);
+		const desc = cell.description?.trim();
+		const tech = cell.technology?.trim();
+		const colorName = cell.fillColor && /^#[0-9A-Fa-f]{3,8}$/.test(cell.fillColor.trim()) ? hexToCustomName.get(cell.fillColor.trim()) : void 0;
+		if (kind === "actor") lines.push(`${pad}${name} = actor '${title.replace(/'/g, "''")}'`);
+		else if (kind === "system") lines.push(`${pad}${name} = system '${title.replace(/'/g, "''")}'`);
+		else lines.push(`${pad}${name} = container '${title.replace(/'/g, "''")}'`);
+		const childList = children.get(fqn);
+		if (childList && childList.length > 0 || desc || tech || colorName) {
+			lines.push(`${pad}{`);
+			if (colorName) lines.push(`${pad}  style { color ${colorName} }`);
+			if (desc) lines.push(`${pad}  description '${desc.replace(/'/g, "''")}'`);
+			if (tech) lines.push(`${pad}  technology '${tech.replace(/'/g, "''")}'`);
+			if (childList && childList.length > 0) for (const ch of childList) emitElement(ch.cellId, ch.fqn, indent + 1);
+			lines.push(`${pad}}`);
+		} else {
+			lines.push(`${pad}{`);
+			lines.push(`${pad}}`);
+		}
+		lines.push("");
+	}
+	for (const { cellId, fqn } of roots) emitElement(cellId, fqn, 1);
+	for (const e of edges) {
+		const src = idToFqn.get(e.source);
+		const tgt = idToFqn.get(e.target);
+		if (!src || !tgt) continue;
+		const label = e.value && e.value.trim() ? ` '${e.value.replace(/'/g, "''")}'` : "";
+		lines.push(`  ${src} -> ${tgt}${label}`);
+	}
+	lines.push("}");
+	lines.push("");
+	lines.push("views {");
+	lines.push("  view index {");
+	lines.push("    include *");
+	lines.push("  }");
+	lines.push("}");
+	lines.push("");
+	return lines.join("\n");
+}
 function toUnion(elements) {
 	if (elements.length === 0) return "never";
 	return elements.sort(compareNatural).map((v) => `  | ${JSON.stringify(v)}`).join("\n").trimStart();
@@ -159,9 +529,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 +552,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 +582,7 @@ const pumlShape = ({ shape }) => {
 		case "person": return shape;
 		case "storage":
 		case "cylinder": return "database";
+		case "component": return "component";
 		case "document":
 		case "mobile":
 		case "bucket":
@@ -282,18 +647,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
-*/
 function generateViewsDataJs(diagrams) {
 	const views = Array.from(diagrams);
 	const out = new CompositeGeneratorNode();
@@ -334,9 +690,6 @@ function generateViewsDataJs(diagrams) {
   `.append(NL);
 	return toString(out);
 }
-/**
-* Generate *.ts file with views data
-*/
 function generateViewsDataTs(diagrams) {
 	const views = Array.from(diagrams);
 	const out = new CompositeGeneratorNode();
@@ -382,9 +735,6 @@ function generateViewsDataTs(diagrams) {
   `.append(NL);
 	return toString(out);
 }
-/**
-* Generate *.d.ts
-*/
 function generateViewsDataDTs(diagrams) {
 	const views = Array.from(diagrams);
 	const out = new CompositeGeneratorNode();
@@ -413,12 +763,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
-*/
 function generateReactNext(views) {
 	return {
 		viewsData: {
@@ -519,9 +863,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 +925,4 @@ export {
 /* prettier-ignore-end */
 `.trimStart();
 }
-
-//#endregion
-export { generateD2, generateLikeC4Model, generateMermaid, generatePuml, generateReactNext, generateReactTypes, generateViewsDataDTs, generateViewsDataJs, generateViewsDataTs };
+export { generateD2, generateDrawio, generateLikeC4Model, generateMermaid, generatePuml, generateReactNext, generateReactTypes, generateViewsDataDTs, generateViewsDataJs, generateViewsDataTs, parseDrawioToLikeC4 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@likec4/generators",
-  "version": "1.48.0",
+  "version": "1.49.0",
   "license": "MIT",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
@@ -37,18 +37,18 @@
     "access": "public"
   },
   "dependencies": {
-    "remeda": "^2.32.0",
+    "remeda": "^2.33.5",
     "json5": "^2.2.3",
     "langium": "3.5.0",
-    "@likec4/core": "1.48.0",
-    "@likec4/log": "1.48.0"
+    "@likec4/core": "1.49.0",
+    "@likec4/log": "1.49.0"
   },
   "devDependencies": {
-    "@types/node": "~22.19.7",
+    "@types/node": "~22.19.10",
     "typescript": "5.9.3",
-    "obuild": "^0.4.20",
+    "obuild": "^0.4.27",
     "vitest": "4.0.18",
-    "@likec4/tsconfig": "1.48.0",
+    "@likec4/tsconfig": "1.49.0",
     "@likec4/devops": "1.42.0"
   },
   "scripts": {

package/src/d2/generate-d2.ts

@@ -45,6 +45,7 @@ const d2shape = ({ shape }: Node) => {
     case 'storage': {
       return 'stored_data' as const
     }
+    case 'component':
     case 'bucket':
     case 'mobile':
     case 'browser': {

package/src/drawio/generate-drawio.ts

@@ -0,0 +1,219 @@
+import type { LikeC4ViewModel } from '@likec4/core/model'
+import type { aux, DiagramNode, NodeId, ProcessedView } from '@likec4/core/types'
+import { flattenMarkdownOrString } from '@likec4/core/types'
+import { isEmptyish, isNullish as isNil } from 'remeda'
+
+type View = ProcessedView<aux.Unknown>
+type Node = View['nodes'][number]
+type Edge = View['edges'][number]
+
+/** Default hex colors when view model has no $styles (e.g. in tests). Aligns with common theme colors. */
+const DEFAULT_ELEMENT_COLORS: Record<string, { fill: string; stroke: string }> = {
+  primary: { fill: '#3b82f6', stroke: '#2563eb' },
+  gray: { fill: '#6b7280', stroke: '#4b5563' },
+  green: { fill: '#22c55e', stroke: '#16a34a' },
+  red: { fill: '#ef4444', stroke: '#dc2626' },
+  blue: { fill: '#3b82f6', stroke: '#2563eb' },
+  indigo: { fill: '#6366f1', stroke: '#4f46e5' },
+  muted: { fill: '#9ca3af', stroke: '#6b7280' },
+}
+
+const DEFAULT_EDGE_COLOR = '#6b7280'
+
+function escapeXml(unsafe: string): string {
+  return unsafe
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;')
+}
+
+/**
+ * Map LikeC4 shape to DrawIO style. DrawIO uses shape=rectangle, ellipse, cylinder, etc.
+ */
+function drawioShape(shape: Node['shape']): string {
+  switch (shape) {
+    case 'person':
+      return 'shape=umlActor;verticalLabelPosition=bottom;verticalAlign=top;'
+    case 'rectangle':
+      return 'shape=rectangle;'
+    case 'browser':
+      return 'shape=rectangle;rounded=1;'
+    case 'mobile':
+      return 'shape=rectangle;rounded=1;'
+    case 'cylinder':
+      return 'shape=cylinder3;whiteSpace=wrap;boundedLbl=1;backgroundOutline=1;size=15;'
+    case 'queue':
+      return 'shape=cylinder3;whiteSpace=wrap;boundedLbl=1;backgroundOutline=1;size=15;'
+    case 'storage':
+      return 'shape=cylinder3;whiteSpace=wrap;boundedLbl=1;backgroundOutline=1;size=15;'
+    case 'bucket':
+      return 'shape=rectangle;rounded=1;'
+    case 'document':
+      return 'shape=document;whiteSpace=wrap;html=1;boundedLbl=1;'
+    case 'component':
+      return 'shape=component;'
+    default:
+      return 'shape=rectangle;'
+  }
+}
+
+function getElementColors(
+  viewmodel: LikeC4ViewModel<aux.Unknown>,
+  color: string,
+): { fill: string; stroke: string } | undefined {
+  const styles = '$styles' in viewmodel && viewmodel.$styles ? viewmodel.$styles : null
+  if (styles) {
+    try {
+      const values = styles.colors(color)
+      return {
+        fill: values.elements.fill as string,
+        stroke: values.elements.stroke as string,
+      }
+    } catch {
+      // custom color or missing
+    }
+  }
+  return DEFAULT_ELEMENT_COLORS[color] ?? DEFAULT_ELEMENT_COLORS['primary']
+}
+
+function getEdgeStrokeColor(viewmodel: LikeC4ViewModel<aux.Unknown>, color: string): string {
+  const styles = '$styles' in viewmodel && viewmodel.$styles ? viewmodel.$styles : null
+  if (styles) {
+    try {
+      const values = styles.colors(color)
+      return values.relationships.line as string
+    } catch {
+      // custom color or missing
+    }
+  }
+  return DEFAULT_EDGE_COLOR
+}
+
+/**
+ * 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))
+ * @returns DrawIO .drawio XML string
+ */
+export function generateDrawio(viewmodel: LikeC4ViewModel<aux.Unknown>): string {
+  const view = viewmodel.$view
+  const { nodes, edges } = view
+
+  const rootId = '0'
+  const defaultParentId = '1'
+
+  const nodeIds = new Map<NodeId, string>()
+  let cellId = 2
+
+  const getCellId = (nodeId: NodeId): string => {
+    let id = nodeIds.get(nodeId)
+    if (!id) {
+      id = String(cellId++)
+      nodeIds.set(nodeId, id)
+    }
+    return id
+  }
+
+  const vertexCells: string[] = []
+  const edgeCells: string[] = []
+
+  const sortedNodes = [...nodes].sort((a, b) => {
+    if (isNil(a.parent) && isNil(b.parent)) return 0
+    if (isNil(a.parent)) return -1
+    if (isNil(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
+  })
+
+  /** Support both BBox (x,y,width,height) and legacy position/size used in some mocks */
+  const getBBox = (n: View['nodes'][number]) => {
+    const d = n as DiagramNode & { position?: [number, number]; size?: { width: number; height: number } }
+    const x = typeof d.x === 'number' ? d.x : (Array.isArray(d.position) ? d.position[0] : 0)
+    const y = typeof d.y === 'number' ? d.y : (Array.isArray(d.position) ? d.position[1] : 0)
+    const width = typeof d.width === 'number' ? d.width : (d.size?.width ?? 120)
+    const height = typeof d.height === 'number' ? d.height : (d.size?.height ?? 60)
+    return { x, y, width, height }
+  }
+
+  for (const node of sortedNodes) {
+    const id = getCellId(node.id)
+    const parentId = node.parent ? getCellId(node.parent) : defaultParentId
+    const label = escapeXml(node.title)
+    const shapeStyle = drawioShape(node.shape)
+    const { x, y, width, height } = getBBox(node)
+
+    const elemColors = getElementColors(viewmodel, node.color)
+    const colorStyle = elemColors != null
+      ? `fillColor=${elemColors.fill};strokeColor=${elemColors.stroke};fontColor=${elemColors.stroke};`
+      : ''
+
+    const description = node.description && flattenMarkdownOrString(node.description)
+    const desc = isEmptyish(description) ? '' : escapeXml(description)
+    const technology = node.technology && flattenMarkdownOrString(node.technology)
+    const tech = isEmptyish(technology) ? '' : escapeXml(technology)
+    const userData = desc !== '' || tech !== ''
+      ? `<mxUserObject><data key="likec4Description">${desc}</data><data key="likec4Technology">${tech}</data></mxUserObject>\n  `
+      : ''
+
+    vertexCells.push(
+      `<mxCell id="${id}" value="${label}" style="${shapeStyle}${colorStyle}verticalAlign=middle;align=center;overflow=fill;spacingLeft=2;spacingRight=2;spacingTop=2;spacingBottom=2;" vertex="1" parent="${parentId}">
+  ${userData}<mxGeometry x="${Math.round(x)}" y="${Math.round(y)}" width="${Math.round(width)}" height="${
+        Math.round(height)
+      }" as="geometry" />
+</mxCell>`,
+    )
+  }
+
+  for (const edge of edges as Edge[]) {
+    const id = String(cellId++)
+    const sourceId = getCellId(edge.source)
+    const targetId = getCellId(edge.target)
+    const label = edge.label ? escapeXml(edge.label) : ''
+    const strokeColor = getEdgeStrokeColor(viewmodel, edge.color)
+    const dashStyle = edge.line === 'dashed' ? 'dashed=1;' : edge.line === 'dotted' ? 'dashed=1;dashPattern=1 1;' : ''
+    edgeCells.push(
+      `<mxCell id="${id}" value="${label}" style="endArrow=block;html=1;rounded=0;exitX=1;exitY=0.5;entryX=0;entryY=0.5;strokeColor=${strokeColor};${dashStyle}" edge="1" parent="${defaultParentId}" source="${sourceId}" target="${targetId}">
+  <mxGeometry relative="1" as="geometry" />
+</mxCell>`,
+    )
+  }
+
+  let bounds: { x: number; y: number; width: number; height: number } = {
+    x: 0,
+    y: 0,
+    width: 800,
+    height: 600,
+  }
+  try {
+    const b = viewmodel.bounds
+    if (b != null && typeof b.x === 'number') bounds = b
+  } catch {
+    // View not layouted (e.g. in tests); use default canvas size
+  }
+  const allCells = [
+    `<mxCell id="${defaultParentId}" vertex="1" parent="${rootId}">
+  <mxGeometry x="${bounds.x}" y="${bounds.y}" width="${bounds.width}" height="${bounds.height}" as="geometry" />
+</mxCell>`,
+    ...vertexCells,
+    ...edgeCells,
+  ].join('\n')
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<mxfile host="LikeC4" modified="${new Date().toISOString()}" agent="LikeC4" version="1.0" etag="" type="device">
+  <diagram name="${escapeXml(view.id)}" id="likec4-${escapeXml(view.id)}">
+    <mxGraphModel dx="800" dy="800" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale=1 pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="${rootId}" />
+        ${allCells}
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
+`
+}

package/src/drawio/index.ts

@@ -0,0 +1,2 @@
+export { generateDrawio } from './generate-drawio'
+export { parseDrawioToLikeC4, type DrawioCell } from './parse-drawio'

package/src/drawio/parse-drawio.ts

@@ -0,0 +1,324 @@
+/**
+ * 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.
+ */
+
+export interface DrawioCell {
+  id: string
+  value?: string
+  parent?: string
+  source?: string
+  target?: string
+  vertex?: boolean
+  edge?: boolean
+  style?: string
+  x?: number
+  y?: number
+  width?: number
+  height?: number
+  /** From style fillColor= or mxUserObject */
+  fillColor?: string
+  strokeColor?: string
+  /** From mxUserObject data likec4Description / likec4Technology (exported by LikeC4) */
+  description?: string
+  technology?: string
+}
+
+function getAttr(attrs: string, name: string): string | undefined {
+  const re = new RegExp(`${name}="([^"]*)"`, 'i')
+  const m = attrs.match(re)
+  return m ? m[1] : undefined
+}
+
+function parseNum(s: string | undefined): number | undefined {
+  if (s === undefined || s === '') return undefined
+  const n = Number.parseFloat(s)
+  return Number.isNaN(n) ? undefined : n
+}
+
+/** Parse DrawIO style string (semicolon-separated key=value) into a map. */
+function parseStyle(style: string | undefined): Map<string, string> {
+  const map = new Map<string, string>()
+  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
+}
+
+/** Extract LikeC4 custom data from mxUserObject/data inside cell XML. */
+function parseUserData(fullTag: string): { description?: string; technology?: string } {
+  const out: { description?: string; technology?: string } = {}
+  const descMatch = fullTag.match(/<data\s+key="likec4Description"[^>]*>([\s\S]*?)<\/data>/i)
+  if (descMatch?.[1]) out.description = decodeXmlEntities(descMatch[1].trim())
+  const techMatch = fullTag.match(/<data\s+key="likec4Technology"[^>]*>([\s\S]*?)<\/data>/i)
+  if (techMatch?.[1]) out.technology = decodeXmlEntities(techMatch[1].trim())
+  return out
+}
+
+/**
+ * Simple XML parser for DrawIO mxCell elements. Extracts cells with id, value, parent,
+ * source, target, vertex, edge, geometry, style colors and LikeC4 user data.
+ */
+function parseDrawioXml(xml: string): DrawioCell[] {
+  const cells: DrawioCell[] = []
+  const mxCellRe = /<mxCell\s+([^>]+?)(?:\s*\/>|>([\s\S]*?)<\/mxCell>)/gi
+  const geomAttr = (tag: string, name: string) => getAttr(tag, name)
+  let m
+  while ((m = mxCellRe.exec(xml)) !== null) {
+    const attrs = m[1] ?? ''
+    const inner = m[2] ?? ''
+    const id = getAttr(attrs, 'id')
+    if (!id) continue
+    const valueRaw = getAttr(attrs, 'value')
+    const parent = getAttr(attrs, 'parent')
+    const source = getAttr(attrs, 'source')
+    const target = getAttr(attrs, 'target')
+    const vertex = getAttr(attrs, 'vertex') === '1'
+    const edge = getAttr(attrs, 'edge') === '1'
+    const style = getAttr(attrs, 'style')
+    const fullTag = m[0]
+    const geomMatch = fullTag.match(/<mxGeometry[^>]*>/i)
+    const geomStr = geomMatch ? geomMatch[0] : ''
+    const styleMap = parseStyle(style ?? undefined)
+    const userData = parseUserData(inner)
+    const x = parseNum(geomAttr(geomStr, 'x'))
+    const y = parseNum(geomAttr(geomStr, 'y'))
+    const width = parseNum(geomAttr(geomStr, 'width'))
+    const height = parseNum(geomAttr(geomStr, 'height'))
+    const fillColor = styleMap.get('fillcolor') ?? styleMap.get('fillColor')
+    const strokeColor = styleMap.get('strokecolor') ?? styleMap.get('strokeColor')
+    const cell: DrawioCell = {
+      id,
+      ...(valueRaw != null && valueRaw !== '' ? { value: decodeXmlEntities(valueRaw) } : {}),
+      ...(parent != null && parent !== '' ? { parent } : {}),
+      ...(source != null && source !== '' ? { source } : {}),
+      ...(target != null && target !== '' ? { target } : {}),
+      vertex,
+      edge,
+      ...(style != null && style !== '' ? { style } : {}),
+      ...(x !== undefined ? { x } : {}),
+      ...(y !== undefined ? { y } : {}),
+      ...(width !== undefined ? { width } : {}),
+      ...(height !== undefined ? { height } : {}),
+      ...(fillColor !== undefined ? { fillColor } : {}),
+      ...(strokeColor !== undefined ? { strokeColor } : {}),
+      ...(userData.description != null ? { description: userData.description } : {}),
+      ...(userData.technology != null ? { technology: userData.technology } : {}),
+    }
+    cells.push(cell)
+  }
+  return cells
+}
+
+function decodeXmlEntities(s: string): string {
+  return s
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&apos;/g, '\'')
+    .replace(/&amp;/g, '&')
+}
+
+/**
+ * Infer LikeC4 element kind from DrawIO shape style.
+ */
+function inferKind(style: string | undefined): 'actor' | 'system' | 'container' | 'component' {
+  if (!style) return 'container'
+  const s = style.toLowerCase()
+  if (s.includes('umlactor') || s.includes('shape=person')) return 'actor'
+  if (s.includes('swimlane') || s.includes('shape=rectangle') && s.includes('rounded')) return 'system'
+  return 'container'
+}
+
+/**
+ * Sanitize a string for use as LikeC4 identifier (element name).
+ */
+function toId(name: string): string {
+  return name
+    .trim()
+    .replace(/\s+/g, '_')
+    .replace(/[^a-zA-Z0-9_.-]/g, '')
+    .replace(/^[0-9]/, '_$&') || 'element'
+}
+
+/**
+ * Convert DrawIO XML to LikeC4 source (.c4) string.
+ * - Vertices become model elements (actor/container); hierarchy from parent refs.
+ * - Edges become relations (->).
+ * - Root diagram cells (parent "1") are top-level; others are nested by parent.
+ */
+export function parseDrawioToLikeC4(xml: string): string {
+  const cells = parseDrawioXml(xml)
+  const byId = new Map<string, DrawioCell>()
+  for (const c of cells) {
+    byId.set(c.id, c)
+  }
+
+  const vertices = cells.filter(c => c.vertex && c.id !== '1')
+  const edges = cells.filter(c => c.edge && c.source && c.target)
+
+  // Build hierarchy: root is parent "1". Assign FQN by traversing parent chain.
+  const rootId = '1'
+  const idToFqn = new Map<string, string>()
+  const idToCell = new Map<string, DrawioCell>()
+  for (const v of vertices) {
+    idToCell.set(v.id, v)
+  }
+
+  // Assign FQNs: use value as base name, ensure uniqueness. Flatten for simplicity if no clear hierarchy.
+  const usedNames = new Set<string>()
+  function uniqueName(base: string): string {
+    let name = toId(base || 'element')
+    let n = name
+    let i = 0
+    while (usedNames.has(n)) {
+      n = `${name}_${++i}`
+    }
+    usedNames.add(n)
+    return n
+  }
+
+  for (const v of vertices) {
+    if (v.parent === rootId || !v.parent) {
+      const name = uniqueName(v.value ?? v.id)
+      idToFqn.set(v.id, name)
+    }
+  }
+
+  // If we have parent refs that are not root, build hierarchy (e.g. parent is another vertex)
+  let changed = true
+  while (changed) {
+    changed = false
+    for (const v of vertices) {
+      if (idToFqn.has(v.id)) continue
+      const parent = v.parent ? idToFqn.get(v.parent) : null
+      if (parent != null) {
+        const local = uniqueName(v.value ?? v.id)
+        idToFqn.set(v.id, `${parent}.${local}`)
+        changed = true
+      }
+    }
+  }
+
+  // Any remaining vertices (orphans) get top-level names
+  for (const v of vertices) {
+    if (!idToFqn.has(v.id)) {
+      idToFqn.set(v.id, uniqueName(v.value ?? v.id))
+    }
+  }
+
+  // Collect unique hex colors from vertices for specification customColors
+  const hexToCustomName = new Map<string, string>()
+  let customColorIndex = 0
+  for (const v of vertices) {
+    const fill = v.fillColor?.trim()
+    if (fill && /^#[0-9A-Fa-f]{3,8}$/.test(fill)) {
+      if (!hexToCustomName.has(fill)) {
+        hexToCustomName.set(fill, `drawio_color_${++customColorIndex}`)
+      }
+    }
+  }
+
+  const lines: string[] = []
+
+  if (hexToCustomName.size > 0) {
+    lines.push('specification {')
+    for (const [hex, name] of hexToCustomName) {
+      lines.push(`  color ${name} ${hex}`)
+    }
+    lines.push('}')
+    lines.push('')
+  }
+
+  lines.push('model {')
+  lines.push('')
+
+  const children = new Map<string, Array<{ cellId: string; fqn: string }>>()
+  const roots: Array<{ cellId: string; fqn: string }> = []
+  for (const [cellId, fqn] of idToFqn) {
+    const cell = idToCell.get(cellId)
+    if (!cell) continue
+    if (cell.parent === rootId || !cell.parent) {
+      roots.push({ cellId, fqn })
+    } else {
+      const parentFqn = idToFqn.get(cell.parent)
+      if (parentFqn != null) {
+        const list = children.get(parentFqn) ?? []
+        list.push({ cellId, fqn })
+        children.set(parentFqn, list)
+      } else {
+        roots.push({ cellId, fqn })
+      }
+    }
+  }
+
+  function emitElement(cellId: string, fqn: string, indent: number): void {
+    const cell = idToCell.get(cellId)
+    if (!cell) return
+    const kind = inferKind(cell.style)
+    const title = (cell.value && cell.value.trim()) || fqn.split('.').pop() || 'Element'
+    const name = fqn.split('.').pop()!
+    const pad = '  '.repeat(indent)
+    const desc = cell.description?.trim()
+    const tech = cell.technology?.trim()
+    const colorName = cell.fillColor && /^#[0-9A-Fa-f]{3,8}$/.test(cell.fillColor.trim())
+      ? hexToCustomName.get(cell.fillColor.trim())
+      : undefined
+
+    if (kind === 'actor') {
+      lines.push(`${pad}${name} = actor '${title.replace(/'/g, '\'\'')}'`)
+    } else if (kind === 'system') {
+      lines.push(`${pad}${name} = system '${title.replace(/'/g, '\'\'')}'`)
+    } else {
+      lines.push(`${pad}${name} = container '${title.replace(/'/g, '\'\'')}'`)
+    }
+    const childList = children.get(fqn)
+    const hasBody = (childList && childList.length > 0) || desc || tech || colorName
+    if (hasBody) {
+      lines.push(`${pad}{`)
+      if (colorName) lines.push(`${pad}  style { color ${colorName} }`)
+      if (desc) lines.push(`${pad}  description '${desc.replace(/'/g, '\'\'')}'`)
+      if (tech) lines.push(`${pad}  technology '${tech.replace(/'/g, '\'\'')}'`)
+      if (childList && childList.length > 0) {
+        for (const ch of childList) {
+          emitElement(ch.cellId, ch.fqn, indent + 1)
+        }
+      }
+      lines.push(`${pad}}`)
+    } else {
+      lines.push(`${pad}{`)
+      lines.push(`${pad}}`)
+    }
+    lines.push('')
+  }
+
+  for (const { cellId, fqn } of roots) {
+    emitElement(cellId, fqn, 1)
+  }
+
+  for (const e of edges) {
+    const src = idToFqn.get(e.source!)
+    const tgt = idToFqn.get(e.target!)
+    if (!src || !tgt) continue
+    const label = (e.value && e.value.trim()) ? ` '${e.value.replace(/'/g, '\'\'')}'` : ''
+    lines.push(`  ${src} -> ${tgt}${label}`)
+  }
+
+  lines.push('}')
+  lines.push('')
+  lines.push('views {')
+  lines.push('  view index {')
+  lines.push('    include *')
+  lines.push('  }')
+  lines.push('}')
+  lines.push('')
+
+  return lines.join('\n')
+}

package/src/index.ts

@@ -1,5 +1,7 @@
+export { generateDrawio } from './drawio/generate-drawio'
 export { generateD2 } from './d2/generate-d2'
 export { generateMermaid } from './mmd/generate-mmd'
+export { parseDrawioToLikeC4 } from './drawio/parse-drawio'
 export { generateLikeC4Model } from './model/generate-likec4-model'
 export { generatePuml } from './puml/generate-puml'
 export { generateReactNext } from './react-next/generate-react-next'

package/src/mmd/generate-mmd.ts

@@ -45,6 +45,9 @@ const mmdshape = ({ shape, title }: Node): string => {
     case 'document': {
       return `@{ shape: doc, ${label} }`
     }
+    case 'component': {
+      return `@{ shape: rectangle, ${label} }`
+    }
     default:
       nonexhaustive(shape)
   }

package/src/puml/generate-puml.ts

@@ -68,6 +68,9 @@ const pumlShape = ({ shape }: ComputedNode) => {
     case 'cylinder': {
       return 'database' as const
     }
+    case 'component': {
+      return 'component' as const
+    }
     case 'document':
     case 'mobile':
     case 'bucket':