@statelyai/graph 0.12.0 → 0.13.0

package/dist/formats/elk/index.mjs

@@ -1,6 +1,23 @@
 import { getChildren } from "../../queries.mjs";
 
 //#region src/formats/elk/index.ts
+const STATELYAI_METADATA_KEY = "statelyai.metadata";
+function addMetadata(target, metadata) {
+	target.layoutOptions = {
+		...target.layoutOptions ?? {},
+		[STATELYAI_METADATA_KEY]: JSON.stringify(metadata)
+	};
+	return target;
+}
+function readMetadata(value) {
+	const raw = value.layoutOptions?.[STATELYAI_METADATA_KEY];
+	if (typeof raw !== "string") return void 0;
+	try {
+		return JSON.parse(raw);
+	} catch {
+		return;
+	}
+}
 const DIRECTION_TO_ELK = {
 	down: "DOWN",
 	up: "UP",
@@ -20,7 +37,21 @@ function convertEdge(edge) {
 		targets: [edge.targetPort ?? edge.targetId]
 	};
 	if (edge.label) elkEdge.labels = [{ text: edge.label }];
-	return elkEdge;
+	return addMetadata(elkEdge, { edge: {
+		sourceId: edge.sourceId,
+		targetId: edge.targetId,
+		sourcePort: edge.sourcePort,
+		targetPort: edge.targetPort,
+		label: edge.label,
+		data: edge.data,
+		weight: edge.weight,
+		color: edge.color,
+		style: edge.style,
+		x: edge.x,
+		y: edge.y,
+		width: edge.width,
+		height: edge.height
+	} });
 }
 function convertPort(port) {
 	const elkPort = {
@@ -32,7 +63,10 @@ function convertPort(port) {
 	};
 	if (port.label) elkPort.labels = [{ text: port.label }];
 	if (port.direction !== "inout") elkPort.layoutOptions = { "org.eclipse.elk.port.side": port.direction === "in" ? "WEST" : "EAST" };
-	return elkPort;
+	return addMetadata(elkPort, { port: {
+		data: port.data,
+		style: port.style
+	} });
 }
 function convertNode(graph, node) {
 	const elkNode = {
@@ -44,6 +78,13 @@ function convertNode(graph, node) {
 	};
 	if (node.label) elkNode.labels = [{ text: node.label }];
 	if (node.ports && node.ports.length > 0) elkNode.ports = node.ports.map(convertPort);
+	addMetadata(elkNode, { node: {
+		initialNodeId: node.initialNodeId,
+		data: node.data,
+		shape: node.shape,
+		color: node.color,
+		style: node.style
+	} });
 	const children = getChildren(graph, node.id);
 	if (children.length > 0) {
 		elkNode.children = children.map((child) => convertNode(graph, child));
@@ -85,6 +126,14 @@ function toELK(graph) {
 	const root = { id: graph.id };
 	const elkDir = DIRECTION_TO_ELK[graph.direction];
 	if (elkDir) root.layoutOptions = { "elk.direction": elkDir };
+	addMetadata(root, { graph: {
+		id: graph.id,
+		type: graph.type,
+		initialNodeId: graph.initialNodeId,
+		data: graph.data,
+		direction: graph.direction,
+		style: graph.style
+	} });
 	const roots = getChildren(graph, null);
 	if (roots.length > 0) root.children = roots.map((node) => convertNode(graph, node));
 	const allInnerEdgeIds = /* @__PURE__ */ new Set();
@@ -100,20 +149,25 @@ function toELK(graph) {
 function flattenElkNodes(elkNode, parentId, nodes, edges, edgeIdx, portOwner) {
 	if (elkNode.children) for (const child of elkNode.children) {
 		const label = child.labels?.[0]?.text ?? "";
+		const metadata = readMetadata(child)?.node;
 		const node = {
 			type: "node",
 			id: child.id,
 			parentId,
-			initialNodeId: null,
+			initialNodeId: metadata && "initialNodeId" in metadata ? metadata.initialNodeId : null,
 			label,
-			data: void 0,
+			data: metadata && "data" in metadata ? metadata.data : void 0,
 			x: child.x ?? 0,
 			y: child.y ?? 0,
 			width: child.width ?? 0,
-			height: child.height ?? 0
+			height: child.height ?? 0,
+			...metadata?.shape !== void 0 && { shape: metadata.shape },
+			...metadata?.color !== void 0 && { color: metadata.color },
+			...metadata?.style !== void 0 && { style: metadata.style }
 		};
 		if (child.ports && child.ports.length > 0) node.ports = child.ports.map((elkPort) => {
 			portOwner.set(elkPort.id, child.id);
+			const metadata$1 = readMetadata(elkPort)?.port;
 			const sideOpt = elkPort.layoutOptions?.["org.eclipse.elk.port.side"];
 			let direction = "inout";
 			if (sideOpt === "WEST") direction = "in";
@@ -122,33 +176,40 @@ function flattenElkNodes(elkNode, parentId, nodes, edges, edgeIdx, portOwner) {
 				name: elkPort.id,
 				direction,
 				label: elkPort.labels?.[0]?.text,
-				data: void 0,
+				data: metadata$1 && "data" in metadata$1 ? metadata$1.data : void 0,
 				x: elkPort.x ?? 0,
 				y: elkPort.y ?? 0,
 				width: elkPort.width ?? 0,
-				height: elkPort.height ?? 0
+				height: elkPort.height ?? 0,
+				...metadata$1?.style !== void 0 && { style: metadata$1.style }
 			};
 		});
 		nodes.push(node);
 		flattenElkNodes(child, child.id, nodes, edges, edgeIdx, portOwner);
 	}
 	if (elkNode.edges) for (const elkEdge of elkNode.edges) for (const source of elkEdge.sources) for (const target of elkEdge.targets) {
+		const metadata = readMetadata(elkEdge)?.edge;
 		const sourceNodeId = portOwner.get(source);
 		const targetNodeId = portOwner.get(target);
 		const edge = {
 			type: "edge",
 			id: elkEdge.id ?? `e${edgeIdx.value++}`,
-			sourceId: sourceNodeId ?? source,
-			targetId: targetNodeId ?? target,
-			label: elkEdge.labels?.[0]?.text ?? "",
-			data: void 0,
-			x: 0,
-			y: 0,
-			width: 0,
-			height: 0
+			sourceId: metadata?.sourceId ?? sourceNodeId ?? source,
+			targetId: metadata?.targetId ?? targetNodeId ?? target,
+			label: metadata && "label" in metadata ? metadata.label : elkEdge.labels?.[0]?.text ?? "",
+			data: metadata && "data" in metadata ? metadata.data : void 0,
+			x: metadata?.x ?? 0,
+			y: metadata?.y ?? 0,
+			width: metadata?.width ?? 0,
+			height: metadata?.height ?? 0,
+			...metadata?.weight !== void 0 && { weight: metadata.weight },
+			...metadata?.color !== void 0 && { color: metadata.color },
+			...metadata?.style !== void 0 && { style: metadata.style }
 		};
-		if (sourceNodeId) edge.sourcePort = source;
-		if (targetNodeId) edge.targetPort = target;
+		if (metadata && "sourcePort" in metadata) edge.sourcePort = metadata.sourcePort;
+		else if (sourceNodeId) edge.sourcePort = source;
+		if (metadata && "targetPort" in metadata) edge.targetPort = metadata.targetPort;
+		else if (targetNodeId) edge.targetPort = target;
 		edges.push(edge);
 	}
 }
@@ -179,15 +240,17 @@ function fromELK(elkRoot) {
 	const seenEdges = /* @__PURE__ */ new Map();
 	for (const edge of edges) if (!seenEdges.has(edge.id)) seenEdges.set(edge.id, edge);
 	const elkDir = elkRoot.layoutOptions?.["elk.direction"];
-	const direction = (elkDir ? ELK_TO_DIRECTION[elkDir] : void 0) ?? "down";
+	const graphMetadata = readMetadata(elkRoot)?.graph;
+	const direction = graphMetadata?.direction ?? (elkDir ? ELK_TO_DIRECTION[elkDir] : void 0) ?? "down";
 	return {
-		id: elkRoot.id,
-		type: "directed",
-		initialNodeId: null,
+		id: graphMetadata?.id ?? elkRoot.id,
+		type: graphMetadata?.type === "undirected" ? "undirected" : "directed",
+		initialNodeId: graphMetadata && "initialNodeId" in graphMetadata ? graphMetadata.initialNodeId : null,
 		nodes,
 		edges: [...seenEdges.values()],
-		data: void 0,
-		direction
+		data: graphMetadata && "data" in graphMetadata ? graphMetadata.data : void 0,
+		direction,
+		...graphMetadata?.style !== void 0 && { style: graphMetadata.style }
 	};
 }
 /**

package/dist/formats/gexf/index.mjs

@@ -24,6 +24,21 @@ function toGEXF(graph) {
 			"@_title": "shape",
 			"@_type": "string"
 		},
+		{
+			"@_id": "a_width",
+			"@_title": "width",
+			"@_type": "double"
+		},
+		{
+			"@_id": "a_height",
+			"@_title": "height",
+			"@_type": "double"
+		},
+		{
+			"@_id": "a_style",
+			"@_title": "style",
+			"@_type": "string"
+		},
 		{
 			"@_id": "a_ports",
 			"@_title": "ports",
@@ -36,6 +51,36 @@ function toGEXF(graph) {
 			"@_title": "data",
 			"@_type": "string"
 		},
+		{
+			"@_id": "a_edgeWeight",
+			"@_title": "weight",
+			"@_type": "double"
+		},
+		{
+			"@_id": "a_edgeX",
+			"@_title": "x",
+			"@_type": "double"
+		},
+		{
+			"@_id": "a_edgeY",
+			"@_title": "y",
+			"@_type": "double"
+		},
+		{
+			"@_id": "a_edgeWidth",
+			"@_title": "width",
+			"@_type": "double"
+		},
+		{
+			"@_id": "a_edgeHeight",
+			"@_title": "height",
+			"@_type": "double"
+		},
+		{
+			"@_id": "a_edgeStyle",
+			"@_title": "style",
+			"@_type": "string"
+		},
 		{
 			"@_id": "a_sourcePort",
 			"@_title": "sourcePort",
@@ -65,6 +110,18 @@ function toGEXF(graph) {
 			"@_for": "a_shape",
 			"@_value": n.shape
 		});
+		if (n.width !== void 0) attvalues.push({
+			"@_for": "a_width",
+			"@_value": n.width
+		});
+		if (n.height !== void 0) attvalues.push({
+			"@_for": "a_height",
+			"@_value": n.height
+		});
+		if (n.style !== void 0) attvalues.push({
+			"@_for": "a_style",
+			"@_value": JSON.stringify(n.style)
+		});
 		if (n.ports !== void 0) attvalues.push({
 			"@_for": "a_ports",
 			"@_value": JSON.stringify(n.ports)
@@ -102,6 +159,30 @@ function toGEXF(graph) {
 			"@_value": JSON.stringify(e.data)
 		}] };
 		const edgeAttvalues = edge.attvalues?.attvalue ?? [];
+		if (e.weight !== void 0) edgeAttvalues.push({
+			"@_for": "a_edgeWeight",
+			"@_value": e.weight
+		});
+		if (e.x !== void 0) edgeAttvalues.push({
+			"@_for": "a_edgeX",
+			"@_value": e.x
+		});
+		if (e.y !== void 0) edgeAttvalues.push({
+			"@_for": "a_edgeY",
+			"@_value": e.y
+		});
+		if (e.width !== void 0) edgeAttvalues.push({
+			"@_for": "a_edgeWidth",
+			"@_value": e.width
+		});
+		if (e.height !== void 0) edgeAttvalues.push({
+			"@_for": "a_edgeHeight",
+			"@_value": e.height
+		});
+		if (e.style !== void 0) edgeAttvalues.push({
+			"@_for": "a_edgeStyle",
+			"@_value": JSON.stringify(e.style)
+		});
 		if (e.sourcePort !== void 0) edgeAttvalues.push({
 			"@_for": "a_sourcePort",
 			"@_value": e.sourcePort
@@ -136,6 +217,7 @@ function toGEXF(graph) {
 				...graph.initialNodeId && { "@_initialNodeId": graph.initialNodeId },
 				...graph.direction && { "@_direction": graph.direction },
 				...graph.data !== void 0 && { "@_data": JSON.stringify(graph.data) },
+				...graph.style !== void 0 && { "@_style": JSON.stringify(graph.style) },
 				attributes: [{
 					"@_class": "node",
 					attribute: nodeAttrs
@@ -193,6 +275,7 @@ function fromGEXF(xml) {
 				data: attvals["data"] !== void 0 ? tryParseJSON(attvals["data"]) : void 0
 			};
 			if (attvals["shape"]) node.shape = attvals["shape"];
+			if (attvals["style"] !== void 0) node.style = tryParseJSON(attvals["style"]);
 			if (attvals["ports"] !== void 0) node.ports = tryParseJSON(attvals["ports"]);
 			const pos = n["viz:position"];
 			if (pos) {
@@ -204,6 +287,8 @@ function fromGEXF(xml) {
 				node.width = Number(size["@_value"] ?? 0);
 				node.height = Number(size["@_value"] ?? 0);
 			}
+			if (attvals["width"] !== void 0) node.width = Number(attvals["width"]);
+			if (attvals["height"] !== void 0) node.height = Number(attvals["height"]);
 			const color = n["viz:color"];
 			if (color) {
 				const r = Number(color["@_r"] ?? 0);
@@ -226,6 +311,12 @@ function fromGEXF(xml) {
 			targetId: String(e["@_target"]),
 			label: e["@_label"] ?? "",
 			data: attvals["data"] !== void 0 ? tryParseJSON(attvals["data"]) : void 0,
+			...attvals["weight"] !== void 0 && { weight: Number(attvals["weight"]) },
+			...attvals["x"] !== void 0 && { x: Number(attvals["x"]) },
+			...attvals["y"] !== void 0 && { y: Number(attvals["y"]) },
+			...attvals["width"] !== void 0 && { width: Number(attvals["width"]) },
+			...attvals["height"] !== void 0 && { height: Number(attvals["height"]) },
+			...attvals["style"] !== void 0 && { style: tryParseJSON(attvals["style"]) },
 			...attvals["sourcePort"] !== void 0 && { sourcePort: attvals["sourcePort"] },
 			...attvals["targetPort"] !== void 0 && { targetPort: attvals["targetPort"] }
 		};
@@ -245,7 +336,8 @@ function fromGEXF(xml) {
 		nodes,
 		edges,
 		data: graphEl["@_data"] !== void 0 ? tryParseJSON(String(graphEl["@_data"])) : void 0,
-		...graphEl["@_direction"] && { direction: graphEl["@_direction"] }
+		...graphEl["@_direction"] && { direction: graphEl["@_direction"] },
+		...graphEl["@_style"] !== void 0 && { style: tryParseJSON(String(graphEl["@_style"])) }
 	};
 }
 function asArray(val) {

package/dist/formats/gml/index.mjs

@@ -28,6 +28,10 @@ function toGML(graph) {
 	lines.push("graph [");
 	lines.push(`  directed ${graph.type === "directed" ? 1 : 0}`);
 	if (graph.id) lines.push(`  id ${gmlString(graph.id)}`);
+	if (graph.initialNodeId) lines.push(`  initialNodeId ${gmlString(graph.initialNodeId)}`);
+	if (graph.data !== void 0) lines.push(`  data ${gmlString(JSON.stringify(graph.data))}`);
+	if (graph.direction) lines.push(`  direction ${gmlString(graph.direction)}`);
+	if (graph.style !== void 0) lines.push(`  style ${gmlString(JSON.stringify(graph.style))}`);
 	const childrenMap = /* @__PURE__ */ new Map();
 	for (const node of graph.nodes) {
 		const pid = node.parentId ?? null;
@@ -43,6 +47,7 @@ function toGML(graph) {
 		if (node.ports !== void 0) lines.push(`${indent}  ports ${gmlString(JSON.stringify(node.ports))}`);
 		if (node.shape) lines.push(`${indent}  shape ${gmlString(node.shape)}`);
 		if (node.color) lines.push(`${indent}  color ${gmlString(node.color)}`);
+		if (node.style !== void 0) lines.push(`${indent}  style ${gmlString(JSON.stringify(node.style))}`);
 		if (node.x !== void 0 || node.y !== void 0 || node.width !== void 0 || node.height !== void 0) {
 			lines.push(`${indent}  graphics [`);
 			if (node.x !== void 0) lines.push(`${indent}    x ${node.x}`);
@@ -64,9 +69,19 @@ function toGML(graph) {
 		lines.push(`    target ${gmlString(edge.targetId)}`);
 		if (edge.label) lines.push(`    label ${gmlString(edge.label)}`);
 		if (edge.data !== void 0) lines.push(`    data ${gmlString(JSON.stringify(edge.data))}`);
+		if (edge.weight !== void 0) lines.push(`    weight ${edge.weight}`);
 		if (edge.sourcePort !== void 0) lines.push(`    sourcePort ${gmlString(edge.sourcePort)}`);
 		if (edge.targetPort !== void 0) lines.push(`    targetPort ${gmlString(edge.targetPort)}`);
 		if (edge.color) lines.push(`    color ${gmlString(edge.color)}`);
+		if (edge.style !== void 0) lines.push(`    style ${gmlString(JSON.stringify(edge.style))}`);
+		if (edge.x !== void 0 || edge.y !== void 0 || edge.width !== void 0 || edge.height !== void 0) {
+			lines.push("    graphics [");
+			if (edge.x !== void 0) lines.push(`      x ${edge.x}`);
+			if (edge.y !== void 0) lines.push(`      y ${edge.y}`);
+			if (edge.width !== void 0) lines.push(`      w ${edge.width}`);
+			if (edge.height !== void 0) lines.push(`      h ${edge.height}`);
+			lines.push("    ]");
+		}
 		lines.push("  ]");
 	}
 	lines.push("]");
@@ -118,6 +133,7 @@ function fromGML(gml) {
 				...n["ports"] !== void 0 && { ports: tryParseJSON(n["ports"]) },
 				...n["shape"] && { shape: n["shape"] },
 				...n["color"] && { color: n["color"] },
+				...n["style"] !== void 0 && { style: tryParseJSON(n["style"]) },
 				...gfx?.x !== void 0 && { x: gfx.x },
 				...gfx?.y !== void 0 && { y: gfx.y },
 				...gfx?.w !== void 0 && { width: gfx.w },
@@ -128,24 +144,35 @@ function fromGML(gml) {
 	}
 	parseNodes(graphBlock, null);
 	const edgeEntries = asArray(graphBlock["edge"]);
-	for (const e of edgeEntries) edges.push({
-		type: "edge",
-		id: String(e["id"] ?? `e${edges.length}`),
-		sourceId: String(e["source"] ?? ""),
-		targetId: String(e["target"] ?? ""),
-		label: e["label"] ?? "",
-		data: e["data"] !== void 0 ? tryParseJSON(e["data"]) : void 0,
-		...e["sourcePort"] !== void 0 && { sourcePort: String(e["sourcePort"]) },
-		...e["targetPort"] !== void 0 && { targetPort: String(e["targetPort"]) },
-		...e["color"] && { color: e["color"] }
-	});
+	for (const e of edgeEntries) {
+		const gfx = e["graphics"];
+		edges.push({
+			type: "edge",
+			id: String(e["id"] ?? `e${edges.length}`),
+			sourceId: String(e["source"] ?? ""),
+			targetId: String(e["target"] ?? ""),
+			label: e["label"] ?? "",
+			data: e["data"] !== void 0 ? tryParseJSON(e["data"]) : void 0,
+			...e["weight"] !== void 0 && { weight: Number(e["weight"]) },
+			...e["sourcePort"] !== void 0 && { sourcePort: String(e["sourcePort"]) },
+			...e["targetPort"] !== void 0 && { targetPort: String(e["targetPort"]) },
+			...e["color"] && { color: e["color"] },
+			...e["style"] !== void 0 && { style: tryParseJSON(e["style"]) },
+			...gfx?.x !== void 0 && { x: gfx.x },
+			...gfx?.y !== void 0 && { y: gfx.y },
+			...gfx?.w !== void 0 && { width: gfx.w },
+			...gfx?.h !== void 0 && { height: gfx.h }
+		});
+	}
 	return {
 		id: graphId,
 		type: directed ? "directed" : "undirected",
-		initialNodeId: null,
+		initialNodeId: graphBlock["initialNodeId"] ?? null,
 		nodes,
 		edges,
-		data: void 0
+		data: graphBlock["data"] !== void 0 ? tryParseJSON(graphBlock["data"]) : void 0,
+		...graphBlock["direction"] && { direction: String(graphBlock["direction"]) },
+		...graphBlock["style"] !== void 0 && { style: tryParseJSON(graphBlock["style"]) }
 	};
 }
 function tokenize(input) {

package/dist/formats/jgf/index.mjs

@@ -23,6 +23,7 @@ function toJGF(graph) {
 	if (graph.initialNodeId) metadata.initialNodeId = graph.initialNodeId;
 	if (graph.data !== void 0) metadata.data = graph.data;
 	if (graph.direction) metadata.direction = graph.direction;
+	if (graph.style !== void 0) metadata.style = graph.style;
 	return { graph: {
 		id: graph.id || void 0,
 		directed: graph.type === "directed",
@@ -38,6 +39,7 @@ function toJGF(graph) {
 			if (n.height !== void 0) meta.height = n.height;
 			if (n.shape) meta.shape = n.shape;
 			if (n.color) meta.color = n.color;
+			if (n.style !== void 0) meta.style = n.style;
 			if (n.ports !== void 0) meta.ports = n.ports;
 			return {
 				id: n.id,
@@ -48,7 +50,13 @@ function toJGF(graph) {
 		edges: graph.edges.map((e) => {
 			const meta = {};
 			if (e.data !== void 0) meta.data = e.data;
+			if (e.weight !== void 0) meta.weight = e.weight;
+			if (e.x !== void 0) meta.x = e.x;
+			if (e.y !== void 0) meta.y = e.y;
+			if (e.width !== void 0) meta.width = e.width;
+			if (e.height !== void 0) meta.height = e.height;
 			if (e.color) meta.color = e.color;
+			if (e.style !== void 0) meta.style = e.style;
 			if (e.sourcePort !== void 0) meta.sourcePort = e.sourcePort;
 			if (e.targetPort !== void 0) meta.targetPort = e.targetPort;
 			return {
@@ -89,6 +97,7 @@ function fromJGF(jgf) {
 		initialNodeId: g.metadata?.initialNodeId ?? null,
 		data: g.metadata?.data,
 		...g.metadata?.direction && { direction: g.metadata.direction },
+		...g.metadata?.style !== void 0 && { style: g.metadata.style },
 		nodes: g.nodes.map((n) => ({
 			type: "node",
 			id: n.id,
@@ -102,6 +111,7 @@ function fromJGF(jgf) {
 			...n.metadata?.height !== void 0 && { height: n.metadata.height },
 			...n.metadata?.shape && { shape: n.metadata.shape },
 			...n.metadata?.color && { color: n.metadata.color },
+			...n.metadata?.style !== void 0 && { style: n.metadata.style },
 			...n.metadata?.ports !== void 0 && { ports: n.metadata.ports }
 		})),
 		edges: g.edges.map((e, i) => ({
@@ -111,7 +121,13 @@ function fromJGF(jgf) {
 			targetId: e.target,
 			label: e.label ?? "",
 			data: e.metadata?.data,
+			...e.metadata?.weight !== void 0 && { weight: e.metadata.weight },
+			...e.metadata?.x !== void 0 && { x: e.metadata.x },
+			...e.metadata?.y !== void 0 && { y: e.metadata.y },
+			...e.metadata?.width !== void 0 && { width: e.metadata.width },
+			...e.metadata?.height !== void 0 && { height: e.metadata.height },
 			...e.metadata?.color && { color: e.metadata.color },
+			...e.metadata?.style !== void 0 && { style: e.metadata.style },
 			...e.metadata?.sourcePort !== void 0 && { sourcePort: e.metadata.sourcePort },
 			...e.metadata?.targetPort !== void 0 && { targetPort: e.metadata.targetPort }
 		}))

package/dist/formats/mermaid/index.d.mts

@@ -165,6 +165,7 @@ interface StateNodeData {
   notes?: Array<{
     position: 'left' | 'right';
     text: string;
+    format?: 'inline' | 'block';
   }>;
   isStart?: boolean;
   isEnd?: boolean;

package/dist/formats/mermaid/index.mjs

@@ -1415,10 +1415,16 @@ function fromMermaidState(input) {
 	const parentStack = [null];
 	const regionCounters = /* @__PURE__ */ new Map();
 	function ensureNode(id) {
-		if (!nodeMap.has(id)) nodeMap.set(id, {
+		const parentId = parentStack[parentStack.length - 1];
+		const existing = nodeMap.get(id);
+		if (existing) {
+			if (parentId && existing.parentId === null && existing.id !== parentId) existing.parentId = parentId;
+			return existing;
+		}
+		nodeMap.set(id, {
 			type: "node",
 			id,
-			parentId: parentStack[parentStack.length - 1],
+			parentId,
 			initialNodeId: null,
 			label: id,
 			data: {}
@@ -1462,6 +1468,15 @@ function fromMermaidState(input) {
 			parentStack.push(stateId);
 			continue;
 		}
+		const compositeStateAsMatch = line.match(/^state\s+"([^"]+)"\s+as\s+(\S+)\s*\{\s*$/);
+		if (compositeStateAsMatch) {
+			const description = compositeStateAsMatch[1];
+			const stateId = compositeStateAsMatch[2];
+			const node = ensureNode(stateId);
+			node.data.description = description;
+			parentStack.push(stateId);
+			continue;
+		}
 		const stereotypeMatch = line.match(/^state\s+(\S+)\s+<<(choice|fork|join)>>\s*$/);
 		if (stereotypeMatch) {
 			const stateId = stereotypeMatch[1];
@@ -1542,16 +1557,27 @@ function fromMermaidState(input) {
 			}
 			continue;
 		}
-		const noteMatch = line.match(/^note\s+(left|right)\s+of\s+(\S+)\s*:\s*(.+)$/i);
+		const noteMatch = line.match(/^note\s+(left|right)\s+of\s+(\S+)\s*(?::\s*(.*))?$/i);
 		if (noteMatch) {
 			const position = noteMatch[1].toLowerCase();
 			const stateId = noteMatch[2];
-			const text = noteMatch[3].trim();
+			const inlineText = noteMatch[3]?.trim();
+			const text = inlineText && inlineText.length > 0 ? inlineText : (() => {
+				const content = [];
+				while (i + 1 < lines.length) {
+					i++;
+					const noteLine = lines[i].trim();
+					if (/^end\s+note$/i.test(noteLine)) break;
+					content.push(noteLine);
+				}
+				return content.join("\n").trim();
+			})();
 			const node = ensureNode(stateId);
 			if (!node.data.notes) node.data.notes = [];
 			node.data.notes.push({
 				position,
-				text
+				text,
+				format: inlineText && inlineText.length > 0 ? "inline" : "block"
 			});
 			continue;
 		}
@@ -1687,9 +1713,9 @@ function toMermaidState(graph) {
 			if (node.data?.isStart || node.data?.isEnd) continue;
 			if (node.id.includes("_region_")) continue;
 			if (node.data?.stateType && node.data.stateType !== "parallel") lines.push(`${indent}state ${node.id} <<${node.data.stateType}>>`);
-			if (node.data?.description) lines.push(`${indent}state "${escapeMermaidLabel(node.data.description)}" as ${node.id}`);
 			if (isParent.has(node.id)) {
-				lines.push(`${indent}state ${node.id} {`);
+				const stateDecl = node.data?.description ? `state "${escapeMermaidLabel(node.data.description)}" as ${node.id} {` : `state ${node.id} {`;
+				lines.push(`${indent}${stateDecl}`);
 				if (node.data?.direction) {
 					const mDir = DIRECTION_TO_MERMAID[node.data.direction];
 					if (mDir) lines.push(`${indent}    direction ${mDir}`);
@@ -1702,8 +1728,12 @@ function toMermaidState(graph) {
 					}
 				} else writeNodes(node.id, indent + "    ");
 				lines.push(`${indent}}`);
-			}
-			if (node.data?.notes) for (const note of node.data.notes) lines.push(`${indent}note ${note.position} of ${node.id} : ${escapeMermaidLabel(note.text)}`);
+			} else if (node.data?.description) lines.push(`${indent}state "${escapeMermaidLabel(node.data.description)}" as ${node.id}`);
+			if (node.data?.notes) for (const note of node.data.notes) if (note.format === "block" || note.text.includes("\n")) {
+				lines.push(`${indent}note ${note.position} of ${node.id}`);
+				for (const noteLine of note.text.split("\n")) lines.push(`${indent}    ${escapeMermaidLabel(noteLine)}`);
+				lines.push(`${indent}end note`);
+			} else lines.push(`${indent}note ${note.position} of ${node.id} : ${escapeMermaidLabel(note.text)}`);
 		}
 	}
 	writeNodes(null, "    ");

package/dist/formats/xyflow/index.d.mts

@@ -9,6 +9,7 @@ type XYFlowEdge<TEdgeData extends Record<string, unknown> = Record<string, unkno
 interface XYFlow<TNodeData extends Record<string, unknown> = Record<string, unknown>, TEdgeData extends Record<string, unknown> = Record<string, unknown>> {
   nodes: XYFlowNode<TNodeData>[];
   edges: XYFlowEdge<TEdgeData>[];
+  data?: Record<string, unknown>;
 }
 /**
  * Converts a visual graph to xyflow (React Flow / Svelte Flow) format.