@tldraw/mermaid 4.6.0-internal.c7df3c92455a

package/dist-esm/flowchartDiagram.mjs

@@ -0,0 +1,188 @@
+import { buildClassDefColorMap, parseCssStyles, parseNodeInlineColor } from "./colors.mjs";
+import {
+  buildNodeCentersFromSvg,
+  parseAllEdgePointsFromSvg,
+  parseClustersFromSvg,
+  parseNodesFromSvg,
+  scaleLayout
+} from "./svgParsing.mjs";
+import { getArrowBend, LAYOUT_SCALE, orderTopDown } from "./utils.mjs";
+function mapEdgeTypeToArrowhead(type) {
+  if (!type) return "arrow";
+  if (type.includes("point")) return "arrow";
+  if (type.includes("circle")) return "dot";
+  if (type.includes("cross")) return "bar";
+  if (type.includes("open")) return "none";
+  return "arrow";
+}
+function mapFlowShapeTypeToGeo(type) {
+  switch (type) {
+    case "diamond":
+      return "diamond";
+    case "ellipse":
+    case "circle":
+    case "doublecircle":
+    case "stadium":
+    case "cylinder":
+      return "ellipse";
+    case "hexagon":
+      return "hexagon";
+    case "trapezoid":
+    // TODO: implement inv_trapezoid in SDK
+    case "inv_trapezoid":
+      return "trapezoid";
+    case "lean_right":
+      return "rhombus";
+    case "lean_left":
+      return "rhombus-2";
+    case "square":
+    case "rect":
+    case "round":
+    case "subroutine":
+    default:
+      return "rectangle";
+  }
+}
+function mapEdgeStrokeToDash(stroke) {
+  if (!stroke) return "solid";
+  if (stroke === "dotted") return "dotted";
+  return "solid";
+}
+const FRAME_TOP_PAD = 14;
+function buildHierarchy(subGraphs) {
+  const subGraphIds = new Set(subGraphs.map((subGraph) => subGraph.id));
+  const nodeToSubGraph = /* @__PURE__ */ new Map();
+  const subGraphParent = /* @__PURE__ */ new Map();
+  for (const subGraph of subGraphs) {
+    for (const nodeId of subGraph.nodes) {
+      if (subGraphIds.has(nodeId)) {
+        subGraphParent.set(nodeId, subGraph.id);
+      } else if (!nodeToSubGraph.has(nodeId)) {
+        nodeToSubGraph.set(nodeId, subGraph.id);
+      }
+    }
+  }
+  return { nodeToSubGraph, subGraphParent };
+}
+function parseFlowchartLayout(root) {
+  const nodes = parseNodesFromSvg(root, ".node", (domId) => {
+    const match = domId.match(/^flowchart-(.+)-\d+$/);
+    return match ? match[1] : domId;
+  });
+  const clusters = parseClustersFromSvg(root, ".cluster");
+  const edges = parseAllEdgePointsFromSvg(root, (dataId) => {
+    const match = dataId.match(/^L_(.+)_([^_]+)_\d+$/);
+    return match ? { start: match[1], end: match[2] } : null;
+  });
+  scaleLayout(nodes, clusters, edges, LAYOUT_SCALE);
+  return { nodes, clusters, edges };
+}
+function flowchartToBlueprint(layout, vertices, edges, subGraphs, classDefs) {
+  const nodeColorMap = classDefs ? buildClassDefColorMap(classDefs, vertices) : /* @__PURE__ */ new Map();
+  const { nodes: svgNodes, clusters: svgClusters, edges: svgEdges } = layout;
+  const nodeCenters = buildNodeCentersFromSvg(svgNodes, svgClusters);
+  const allSubGraphs = subGraphs || [];
+  const { nodeToSubGraph, subGraphParent } = buildHierarchy(allSubGraphs);
+  const nodes = [];
+  const blueprintEdges = [];
+  for (const subGraph of orderTopDown(
+    allSubGraphs,
+    (subGraph2) => subGraph2.id,
+    (subGraph2) => subGraphParent.get(subGraph2.id)
+  )) {
+    const cluster = svgClusters.get(subGraph.id);
+    if (!cluster) continue;
+    nodes.push({
+      id: subGraph.id,
+      x: cluster.topLeft.x,
+      y: cluster.topLeft.y - FRAME_TOP_PAD,
+      w: cluster.width,
+      h: cluster.height + FRAME_TOP_PAD,
+      geo: "rectangle",
+      parentId: subGraphParent.get(subGraph.id),
+      label: subGraph.title || subGraph.id,
+      fill: "semi",
+      color: "black",
+      dash: "draw",
+      size: "s",
+      align: "middle",
+      verticalAlign: "start"
+    });
+  }
+  for (const [id, vertex] of vertices) {
+    const svgNode = svgNodes.get(id);
+    if (!svgNode) continue;
+    const geo = mapFlowShapeTypeToGeo(vertex.type);
+    const colors = nodeColorMap.get(id) ?? parseNodeInlineColor(vertex.styles);
+    let { width: w, height: h } = svgNode;
+    if (vertex.type === "circle" || vertex.type === "doublecircle") {
+      w = h = Math.max(w, h);
+    }
+    nodes.push({
+      id,
+      x: svgNode.center.x - w / 2,
+      y: svgNode.center.y - h / 2,
+      w,
+      h,
+      geo,
+      parentId: nodeToSubGraph.get(id),
+      label: vertex.text || void 0,
+      ...(colors?.fillColor && { fill: "solid" }),
+      ...(colors && { color: colors.strokeColor ?? colors.fillColor }),
+      align: "middle",
+      verticalAlign: "middle",
+      size: "m"
+    });
+  }
+  const claimed = /* @__PURE__ */ new Set();
+  for (const edge of edges) {
+    const startCenter = nodeCenters.get(edge.start);
+    const endCenter = nodeCenters.get(edge.end);
+    let bend = 0;
+    if (startCenter && endCenter) {
+      let bestIndex = -1;
+      let bestDist = Infinity;
+      for (let i = 0; i < svgEdges.length; i++) {
+        if (claimed.has(i) || svgEdges[i].points.length < 2) continue;
+        const points = svgEdges[i].points;
+        const distance = Math.hypot(points[0].x - startCenter.x, points[0].y - startCenter.y) + Math.hypot(
+          points[points.length - 1].x - endCenter.x,
+          points[points.length - 1].y - endCenter.y
+        );
+        if (distance < bestDist) {
+          bestDist = distance;
+          bestIndex = i;
+        }
+      }
+      if (bestIndex >= 0) {
+        claimed.add(bestIndex);
+        bend = getArrowBend(svgEdges[bestIndex]);
+      }
+    }
+    const cssOverrides = edge.style ? parseCssStyles(edge.style) : void 0;
+    const arrowheadEnd = mapEdgeTypeToArrowhead(edge.type);
+    const dash = cssOverrides?.dashOverride ?? mapEdgeStrokeToDash(edge.stroke);
+    const size = cssOverrides?.sizeOverride ?? (edge.stroke === "thick" ? "l" : "s");
+    blueprintEdges.push({
+      startNodeId: edge.start,
+      endNodeId: edge.end,
+      label: edge.text,
+      bend,
+      arrowheadEnd,
+      arrowheadStart: edge.type?.includes("double_arrow") ? arrowheadEnd : void 0,
+      dash,
+      size,
+      color: cssOverrides?.color
+    });
+  }
+  const nodeIds = new Set(nodes.map((n) => n.id));
+  const validEdges = blueprintEdges.filter(
+    (e) => nodeIds.has(e.startNodeId) && nodeIds.has(e.endNodeId)
+  );
+  return { nodes, edges: validEdges };
+}
+export {
+  flowchartToBlueprint,
+  parseFlowchartLayout
+};
+//# sourceMappingURL=flowchartDiagram.mjs.map

package/dist-esm/flowchartDiagram.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/flowchartDiagram.ts"],
+  "sourcesContent": ["import type {\n\tFlowClass,\n\tFlowEdge,\n\tFlowSubGraph,\n\tFlowVertex,\n} from 'mermaid/dist/diagrams/flowchart/types.js'\nimport { TLArrowShapeArrowheadStyle, TLDefaultDashStyle, TLGeoShape } from 'tldraw'\nimport type {\n\tDiagramMermaidBlueprint,\n\tMermaidBlueprintEdge,\n\tMermaidBlueprintGeoNode,\n} from './blueprint'\nimport { buildClassDefColorMap, parseCssStyles, parseNodeInlineColor } from './colors'\nimport {\n\tbuildNodeCentersFromSvg,\n\tparseAllEdgePointsFromSvg,\n\tparseClustersFromSvg,\n\ttype ParsedDiagramLayout,\n\tparseNodesFromSvg,\n\tscaleLayout,\n} from './svgParsing'\nimport { getArrowBend, LAYOUT_SCALE, orderTopDown } from './utils'\n\nfunction mapEdgeTypeToArrowhead(type: string | undefined): TLArrowShapeArrowheadStyle {\n\tif (!type) return 'arrow'\n\n\tif (type.includes('point')) return 'arrow'\n\tif (type.includes('circle')) return 'dot'\n\tif (type.includes('cross')) return 'bar'\n\tif (type.includes('open')) return 'none'\n\n\treturn 'arrow'\n}\n\nfunction mapFlowShapeTypeToGeo(type: string | undefined): TLGeoShape['props']['geo'] {\n\tswitch (type) {\n\t\tcase 'diamond':\n\t\t\treturn 'diamond'\n\t\tcase 'ellipse':\n\t\tcase 'circle':\n\t\tcase 'doublecircle':\n\t\tcase 'stadium':\n\t\tcase 'cylinder':\n\t\t\treturn 'ellipse'\n\t\tcase 'hexagon':\n\t\t\treturn 'hexagon'\n\t\tcase 'trapezoid':\n\t\t// TODO: implement inv_trapezoid in SDK\n\t\tcase 'inv_trapezoid':\n\t\t\treturn 'trapezoid'\n\t\tcase 'lean_right':\n\t\t\treturn 'rhombus'\n\t\tcase 'lean_left':\n\t\t\treturn 'rhombus-2'\n\t\tcase 'square':\n\t\tcase 'rect':\n\t\tcase 'round':\n\t\tcase 'subroutine':\n\t\tdefault:\n\t\t\treturn 'rectangle'\n\t}\n}\n\nfunction mapEdgeStrokeToDash(stroke: string | undefined): TLDefaultDashStyle {\n\tif (!stroke) return 'solid'\n\tif (stroke === 'dotted') return 'dotted'\n\treturn 'solid'\n}\n\nconst FRAME_TOP_PAD = 14\n\nfunction buildHierarchy(subGraphs: FlowSubGraph[]) {\n\tconst subGraphIds = new Set(subGraphs.map((subGraph) => subGraph.id))\n\tconst nodeToSubGraph = new Map<string, string>()\n\tconst subGraphParent = new Map<string, string>()\n\tfor (const subGraph of subGraphs) {\n\t\tfor (const nodeId of subGraph.nodes) {\n\t\t\tif (subGraphIds.has(nodeId)) {\n\t\t\t\tsubGraphParent.set(nodeId, subGraph.id)\n\t\t\t} else if (!nodeToSubGraph.has(nodeId)) {\n\t\t\t\tnodeToSubGraph.set(nodeId, subGraph.id)\n\t\t\t}\n\t\t}\n\t}\n\treturn { nodeToSubGraph, subGraphParent }\n}\n\n/** Parse flowchart-specific SVG layout data for use by {@link flowchartToBlueprint}. */\nexport function parseFlowchartLayout(root: Element): ParsedDiagramLayout {\n\tconst nodes = parseNodesFromSvg(root, '.node', (domId) => {\n\t\tconst match = domId.match(/^flowchart-(.+)-\\d+$/)\n\t\treturn match ? match[1] : domId\n\t})\n\tconst clusters = parseClustersFromSvg(root, '.cluster')\n\tconst edges = parseAllEdgePointsFromSvg(root, (dataId) => {\n\t\tconst match = dataId.match(/^L_(.+)_([^_]+)_\\d+$/)\n\t\treturn match ? { start: match[1], end: match[2] } : null\n\t})\n\tscaleLayout(nodes, clusters, edges, LAYOUT_SCALE)\n\treturn { nodes, clusters, edges }\n}\n\n/** Convert a parsed Mermaid flowchart into a tldraw blueprint of nodes and edges. */\nexport function flowchartToBlueprint(\n\tlayout: ParsedDiagramLayout,\n\tvertices: Map<string, FlowVertex>,\n\tedges: FlowEdge[],\n\tsubGraphs?: FlowSubGraph[],\n\tclassDefs?: Map<string, FlowClass>\n): DiagramMermaidBlueprint {\n\tconst nodeColorMap = classDefs ? buildClassDefColorMap(classDefs, vertices) : new Map()\n\tconst { nodes: svgNodes, clusters: svgClusters, edges: svgEdges } = layout\n\tconst nodeCenters = buildNodeCentersFromSvg(svgNodes, svgClusters)\n\n\tconst allSubGraphs = subGraphs || []\n\tconst { nodeToSubGraph, subGraphParent } = buildHierarchy(allSubGraphs)\n\n\tconst nodes: MermaidBlueprintGeoNode[] = []\n\tconst blueprintEdges: MermaidBlueprintEdge[] = []\n\n\t// Frames for subgraphs\n\tfor (const subGraph of orderTopDown(\n\t\tallSubGraphs,\n\t\t(subGraph) => subGraph.id,\n\t\t(subGraph) => subGraphParent.get(subGraph.id)\n\t)) {\n\t\tconst cluster = svgClusters.get(subGraph.id)\n\t\tif (!cluster) continue\n\n\t\tnodes.push({\n\t\t\tid: subGraph.id,\n\t\t\tx: cluster.topLeft.x,\n\t\t\ty: cluster.topLeft.y - FRAME_TOP_PAD,\n\t\t\tw: cluster.width,\n\t\t\th: cluster.height + FRAME_TOP_PAD,\n\t\t\tgeo: 'rectangle',\n\t\t\tparentId: subGraphParent.get(subGraph.id),\n\t\t\tlabel: subGraph.title || subGraph.id,\n\t\t\tfill: 'semi',\n\t\t\tcolor: 'black',\n\t\t\tdash: 'draw',\n\t\t\tsize: 's',\n\t\t\talign: 'middle',\n\t\t\tverticalAlign: 'start',\n\t\t})\n\t}\n\n\t// Node shapes\n\tfor (const [id, vertex] of vertices) {\n\t\tconst svgNode = svgNodes.get(id)\n\t\tif (!svgNode) continue\n\n\t\tconst geo = mapFlowShapeTypeToGeo(vertex.type)\n\t\tconst colors = nodeColorMap.get(id) ?? parseNodeInlineColor(vertex.styles)\n\n\t\tlet { width: w, height: h } = svgNode\n\t\tif (vertex.type === 'circle' || vertex.type === 'doublecircle') {\n\t\t\tw = h = Math.max(w, h)\n\t\t}\n\n\t\tnodes.push({\n\t\t\tid,\n\t\t\tx: svgNode.center.x - w / 2,\n\t\t\ty: svgNode.center.y - h / 2,\n\t\t\tw,\n\t\t\th,\n\t\t\tgeo,\n\t\t\tparentId: nodeToSubGraph.get(id),\n\t\t\tlabel: vertex.text || undefined,\n\t\t\t...(colors?.fillColor && { fill: 'solid' as const }),\n\t\t\t...(colors && { color: colors.strokeColor ?? colors.fillColor }),\n\t\t\talign: 'middle',\n\t\t\tverticalAlign: 'middle',\n\t\t\tsize: 'm',\n\t\t} satisfies MermaidBlueprintGeoNode)\n\t}\n\n\t// Edges: match DB edges to SVG edges by proximity, compute bends\n\tconst claimed = new Set<number>()\n\tfor (const edge of edges) {\n\t\tconst startCenter = nodeCenters.get(edge.start)\n\t\tconst endCenter = nodeCenters.get(edge.end)\n\n\t\tlet bend = 0\n\t\tif (startCenter && endCenter) {\n\t\t\tlet bestIndex = -1\n\t\t\tlet bestDist = Infinity\n\t\t\tfor (let i = 0; i < svgEdges.length; i++) {\n\t\t\t\tif (claimed.has(i) || svgEdges[i].points.length < 2) continue\n\n\t\t\t\tconst points = svgEdges[i].points\n\t\t\t\tconst distance =\n\t\t\t\t\tMath.hypot(points[0].x - startCenter.x, points[0].y - startCenter.y) +\n\t\t\t\t\tMath.hypot(\n\t\t\t\t\t\tpoints[points.length - 1].x - endCenter.x,\n\t\t\t\t\t\tpoints[points.length - 1].y - endCenter.y\n\t\t\t\t\t)\n\t\t\t\tif (distance < bestDist) {\n\t\t\t\t\tbestDist = distance\n\t\t\t\t\tbestIndex = i\n\t\t\t\t}\n\t\t\t}\n\t\t\tif (bestIndex >= 0) {\n\t\t\t\tclaimed.add(bestIndex)\n\t\t\t\tbend = getArrowBend(svgEdges[bestIndex])\n\t\t\t}\n\t\t}\n\n\t\tconst cssOverrides = edge.style ? parseCssStyles(edge.style) : undefined\n\t\tconst arrowheadEnd = mapEdgeTypeToArrowhead(edge.type)\n\t\tconst dash = cssOverrides?.dashOverride ?? mapEdgeStrokeToDash(edge.stroke)\n\t\tconst size = cssOverrides?.sizeOverride ?? (edge.stroke === 'thick' ? 'l' : 's')\n\n\t\tblueprintEdges.push({\n\t\t\tstartNodeId: edge.start,\n\t\t\tendNodeId: edge.end,\n\t\t\tlabel: edge.text,\n\t\t\tbend,\n\t\t\tarrowheadEnd,\n\t\t\tarrowheadStart: edge.type?.includes('double_arrow') ? arrowheadEnd : undefined,\n\t\t\tdash,\n\t\t\tsize,\n\t\t\tcolor: cssOverrides?.color,\n\t\t})\n\t}\n\n\tconst nodeIds = new Set(nodes.map((n) => n.id))\n\tconst validEdges = blueprintEdges.filter(\n\t\t(e) => nodeIds.has(e.startNodeId) && nodeIds.has(e.endNodeId)\n\t)\n\treturn { nodes, edges: validEdges }\n}\n"],
+  "mappings": "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",
+  "names": ["subGraph"]
+}

package/dist-esm/index.d.mts

@@ -0,0 +1,114 @@
+import { Editor } from 'tldraw';
+import type { TLArrowShapeArrowheadStyle } from 'tldraw';
+import type { TLDefaultColorStyle } from 'tldraw';
+import type { TLDefaultDashStyle } from 'tldraw';
+import type { TLDefaultFillStyle } from 'tldraw';
+import type { TLDefaultHorizontalAlignStyle } from 'tldraw';
+import type { TLDefaultSizeStyle } from 'tldraw';
+import type { TLDefaultVerticalAlignStyle } from 'tldraw';
+import type { TLGeoShapeGeoStyle } from 'tldraw';
+
+/** @public */
+export declare interface BlueprintRenderingOptions {
+    centerOnPosition?: boolean;
+    position?: {
+        x: number;
+        y: number;
+    };
+}
+
+/**
+ * Parse mermaid text and create tldraw shapes for supported diagram types.
+ * Returns the SVG string for supported diagrams, or `null` when the diagram type
+ * is unsupported (after calling `onUnsupportedDiagram` if provided).
+ * Throws {@link MermaidDiagramError} if parsing fails.
+ * @public
+ */
+export declare function createMermaidDiagram(editor: Editor, text: string, options?: MermaidDiagramOptions): Promise<void>;
+
+/**
+ * An intermediate representation of a parsed mermaid diagram as abstract nodes,
+ * edges, and lines with layout positions and tldraw style props. Produced by
+ * the diagram-specific converters and consumed by `renderBlueprint` to create
+ * actual tldraw shapes on the canvas.
+ *
+ * @public
+ */
+export declare interface DiagramMermaidBlueprint {
+    nodes: MermaidBlueprintGeoNode[];
+    edges: MermaidBlueprintEdge[];
+    lines?: MermaidBlueprintLineNode[];
+    groups?: string[][];
+}
+
+/** @public */
+export declare interface MermaidBlueprintEdge {
+    startNodeId: string;
+    endNodeId: string;
+    label?: string;
+    bend: number;
+    arrowheadEnd?: TLArrowShapeArrowheadStyle;
+    arrowheadStart?: TLArrowShapeArrowheadStyle;
+    dash?: TLDefaultDashStyle;
+    size?: TLDefaultSizeStyle;
+    color?: TLDefaultColorStyle;
+    anchorStartY?: number;
+    anchorEndY?: number;
+    isExact?: boolean;
+    isPrecise?: boolean;
+    isExactEnd?: boolean;
+    isPreciseEnd?: boolean;
+    decoration?: {
+        type: 'autonumber';
+        value: string;
+    };
+}
+
+/** @public */
+export declare interface MermaidBlueprintGeoNode {
+    id: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    geo: TLGeoShapeGeoStyle;
+    parentId?: string;
+    label?: string;
+    fill?: TLDefaultFillStyle;
+    color?: TLDefaultColorStyle;
+    dash?: TLDefaultDashStyle;
+    size?: TLDefaultSizeStyle;
+    align?: TLDefaultHorizontalAlignStyle;
+    verticalAlign?: TLDefaultVerticalAlignStyle;
+}
+
+/** @public */
+export declare interface MermaidBlueprintLineNode {
+    id: string;
+    x: number;
+    y: number;
+    endX?: number;
+    endY: number;
+    dash?: TLDefaultDashStyle;
+    size?: TLDefaultSizeStyle;
+    color?: TLDefaultColorStyle;
+}
+
+/** @public */
+export declare class MermaidDiagramError extends Error {
+    diagramType: string;
+    type: 'parse' | 'unsupported';
+    constructor(diagramType: string, type: 'parse' | 'unsupported');
+}
+
+/** @public */
+export declare interface MermaidDiagramOptions {
+    mermaidConfig?: Record<string, any>;
+    blueprintRender?: BlueprintRenderingOptions;
+    onUnsupportedDiagram?(svg: string): Promise<void>;
+}
+
+/** @public */
+export declare function renderBlueprint(editor: Editor, blueprint: DiagramMermaidBlueprint, opts?: BlueprintRenderingOptions): void;
+
+export { }

package/dist-esm/index.mjs

@@ -0,0 +1,14 @@
+import { registerTldrawLibraryVersion } from "@tldraw/utils";
+import { createMermaidDiagram, MermaidDiagramError } from "./createMermaidDiagram.mjs";
+import { renderBlueprint } from "./renderBlueprint.mjs";
+registerTldrawLibraryVersion(
+  "@tldraw/mermaid",
+  "4.6.0-internal.c7df3c92455a",
+  "esm"
+);
+export {
+  MermaidDiagramError,
+  createMermaidDiagram,
+  renderBlueprint
+};
+//# sourceMappingURL=index.mjs.map

package/dist-esm/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/index.ts"],
+  "sourcesContent": ["import { registerTldrawLibraryVersion } from '@tldraw/utils'\n\nexport type {\n\tDiagramMermaidBlueprint,\n\tMermaidBlueprintEdge,\n\tMermaidBlueprintGeoNode,\n\tMermaidBlueprintLineNode,\n} from './blueprint'\nexport { createMermaidDiagram, MermaidDiagramError } from './createMermaidDiagram'\nexport type { MermaidDiagramOptions } from './createMermaidDiagram'\nexport { renderBlueprint } from './renderBlueprint'\nexport type { BlueprintRenderingOptions } from './renderBlueprint'\n\nregisterTldrawLibraryVersion(\n\t(globalThis as any).TLDRAW_LIBRARY_NAME,\n\t(globalThis as any).TLDRAW_LIBRARY_VERSION,\n\t(globalThis as any).TLDRAW_LIBRARY_MODULES\n)\n"],
+  "mappings": "AAAA,SAAS,oCAAoC;AAQ7C,SAAS,sBAAsB,2BAA2B;AAE1D,SAAS,uBAAuB;AAGhC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF;",
+  "names": []
+}

package/dist-esm/renderBlueprint.mjs

@@ -0,0 +1,298 @@
+import {
+  createShapeId,
+  toRichText,
+  Vec
+} from "tldraw";
+import { orderTopDown, sanitizeDiagramText } from "./utils.mjs";
+const defaultBlueprintRenderingOptions = {
+  centerOnPosition: true
+};
+function renderBlueprint(editor, blueprint, opts) {
+  const options = { ...defaultBlueprintRenderingOptions, ...(opts || {}) };
+  const { nodes, edges, lines } = blueprint;
+  const bounds = computeBlueprintBounds(nodes, lines);
+  const center = options.position ? options.position : editor.user.getIsPasteAtCursorMode() ? editor.inputs.getCurrentPagePoint() : editor.getViewportPageBounds().center;
+  const offsetX = options.centerOnPosition ? center.x - (bounds.maxX + bounds.minX) / 2 : center.x - bounds.minX;
+  const offsetY = options.centerOnPosition ? center.y - (bounds.maxY + bounds.minY) / 2 : center.y - bounds.minY;
+  const ordered = orderTopDown(
+    nodes,
+    (n) => n.id,
+    (n) => n.parentId
+  );
+  const nodeById = new Map(nodes.map((node) => [node.id, node]));
+  const shapeIds = /* @__PURE__ */ new Map();
+  if (lines) {
+    for (const line of lines) {
+      const lineId = createShapeId();
+      shapeIds.set(line.id, lineId);
+      editor.createShape({
+        id: lineId,
+        type: "line",
+        x: offsetX + line.x,
+        y: offsetY + line.y,
+        props: {
+          dash: line.dash ?? "solid",
+          size: line.size ?? "s",
+          color: line.color ?? "black",
+          spline: "line",
+          points: {
+            a1: { id: "a1", index: "a1", x: 0, y: 0 },
+            a2: { id: "a2", index: "a2", x: line.endX ?? 0, y: line.endY }
+          }
+        }
+      });
+    }
+  }
+  for (const node of ordered) {
+    const shapeId = createShapeId();
+    shapeIds.set(node.id, shapeId);
+    const parent = node.parentId ? nodeById.get(node.parentId) : void 0;
+    const parentShapeId = node.parentId ? shapeIds.get(node.parentId) : void 0;
+    const absoluteX = offsetX + node.x;
+    const absoluteY = offsetY + node.y;
+    const x = parent ? absoluteX - (offsetX + parent.x) : absoluteX;
+    const y = parent ? absoluteY - (offsetY + parent.y) : absoluteY;
+    editor.createShape({
+      id: shapeId,
+      type: "geo",
+      x,
+      y,
+      parentId: parentShapeId,
+      props: {
+        geo: node.geo,
+        w: node.w,
+        h: node.h,
+        fill: node.fill ?? "none",
+        color: node.color ?? "black",
+        dash: node.dash ?? "draw",
+        size: node.size ?? "m",
+        ...(node.label && { richText: toRichText(sanitizeDiagramText(node.label)) }),
+        ...(node.align && { align: node.align }),
+        ...(node.verticalAlign && { verticalAlign: node.verticalAlign })
+      }
+    });
+  }
+  const arrowIds = [];
+  for (const edge of edges) {
+    const arrowId = createArrowFromEdge(editor, edge, shapeIds);
+    if (arrowId) arrowIds.push(arrowId);
+  }
+  const groupedIds = /* @__PURE__ */ new Set();
+  const subGroupIds = [];
+  if (blueprint.groups) {
+    for (const group of blueprint.groups) {
+      const members = [];
+      for (const blueprintId of group) {
+        const memberShapeId = shapeIds.get(blueprintId);
+        if (memberShapeId) {
+          members.push(memberShapeId);
+          groupedIds.add(memberShapeId);
+        }
+      }
+      if (members.length > 1) {
+        editor.groupShapes(members);
+        const first = editor.getShape(members[0]);
+        if (first && first.parentId !== editor.getCurrentPageId()) {
+          subGroupIds.push(first.parentId);
+        } else {
+          subGroupIds.push(members[0]);
+        }
+      } else if (members.length === 1) {
+        subGroupIds.push(members[0]);
+      }
+    }
+  }
+  const topLevelIds = [...subGroupIds];
+  for (const node of nodes) {
+    if (!node.parentId) {
+      const nodeShapeId = shapeIds.get(node.id);
+      if (nodeShapeId && !groupedIds.has(nodeShapeId)) topLevelIds.push(nodeShapeId);
+    }
+  }
+  if (lines) {
+    for (const line of lines) {
+      const lineShapeId = shapeIds.get(line.id);
+      if (lineShapeId && !groupedIds.has(lineShapeId)) topLevelIds.push(lineShapeId);
+    }
+  }
+  topLevelIds.push(...arrowIds);
+  let rootShapeId;
+  if (topLevelIds.length > 1) {
+    editor.groupShapes(topLevelIds);
+    const first = editor.getShape(topLevelIds[0]);
+    if (first && first.parentId !== editor.getCurrentPageId()) {
+      rootShapeId = first.parentId;
+    }
+  } else if (topLevelIds.length === 1) {
+    rootShapeId = topLevelIds[0];
+  }
+  if (rootShapeId) {
+    const actualBounds = editor.getShapePageBounds(rootShapeId);
+    if (actualBounds) {
+      const desiredX = options.centerOnPosition ? center.x - actualBounds.w / 2 : center.x;
+      const desiredY = options.centerOnPosition ? center.y - actualBounds.h / 2 : center.y;
+      const dx = desiredX - actualBounds.x;
+      const dy = desiredY - actualBounds.y;
+      if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
+        const shape = editor.getShape(rootShapeId);
+        editor.updateShape({
+          id: rootShapeId,
+          type: shape.type,
+          x: shape.x + dx,
+          y: shape.y + dy
+        });
+      }
+    }
+  }
+}
+function makeArrowBinding(arrowId, targetId, terminal, anchor, isExact, isPrecise) {
+  return {
+    fromId: arrowId,
+    toId: targetId,
+    type: "arrow",
+    props: { terminal, normalizedAnchor: anchor, isExact, isPrecise }
+  };
+}
+function createArrowFromEdge(editor, edge, shapeIds) {
+  const startShapeId = shapeIds.get(edge.startNodeId);
+  const endShapeId = shapeIds.get(edge.endNodeId);
+  if (!startShapeId || !endShapeId) return void 0;
+  const startBounds = editor.getShapePageBounds(startShapeId);
+  const endBounds = editor.getShapePageBounds(endShapeId);
+  if (!startBounds || !endBounds) return void 0;
+  const arrowId = createShapeId();
+  const isSelfLoop = startShapeId === endShapeId;
+  const hasPreciseAnchors = edge.anchorStartY !== void 0 || edge.anchorEndY !== void 0;
+  let labelText = edge.label;
+  if (edge.decoration?.type === "autonumber") {
+    const num = edge.decoration.value;
+    labelText = labelText ? `${num}  ${labelText}` : num;
+  }
+  const baseProps = {
+    dash: edge.dash ?? "solid",
+    size: edge.size ?? "s",
+    arrowheadEnd: edge.arrowheadEnd ?? "arrow",
+    ...(edge.arrowheadStart && { arrowheadStart: edge.arrowheadStart }),
+    color: edge.color ?? "black",
+    ...(labelText && { richText: toRichText(sanitizeDiagramText(labelText)) })
+  };
+  if (hasPreciseAnchors) {
+    const startAnchorY = edge.anchorStartY ?? 0.5;
+    const endAnchorY = edge.anchorEndY ?? 0.5;
+    const exactStart = edge.isExact ?? true;
+    const preciseStart = edge.isPrecise ?? true;
+    const exactEnd = edge.isExactEnd ?? exactStart;
+    const preciseEnd = edge.isPreciseEnd ?? preciseStart;
+    const startPoint = {
+      x: startBounds.x + startBounds.w * 0.5,
+      y: startBounds.y + startBounds.h * startAnchorY
+    };
+    const endPoint = {
+      x: endBounds.x + endBounds.w * 0.5,
+      y: endBounds.y + endBounds.h * endAnchorY
+    };
+    const origin = {
+      x: Math.min(startPoint.x, endPoint.x),
+      y: Math.min(startPoint.y, endPoint.y)
+    };
+    editor.run(() => {
+      editor.createShape({
+        id: arrowId,
+        type: "arrow",
+        x: origin.x,
+        y: origin.y,
+        props: {
+          ...baseProps,
+          start: { x: startPoint.x - origin.x, y: startPoint.y - origin.y },
+          end: { x: endPoint.x - origin.x, y: endPoint.y - origin.y },
+          bend: edge.bend
+        }
+      });
+      editor.createBindings([
+        makeArrowBinding(
+          arrowId,
+          startShapeId,
+          "start",
+          { x: 0.5, y: startAnchorY },
+          exactStart,
+          preciseStart
+        ),
+        makeArrowBinding(
+          arrowId,
+          endShapeId,
+          "end",
+          { x: 0.5, y: endAnchorY },
+          exactEnd,
+          preciseEnd
+        )
+      ]);
+    });
+    return arrowId;
+  }
+  if (isSelfLoop) {
+    editor.run(() => {
+      editor.createShape({
+        id: arrowId,
+        type: "arrow",
+        x: startBounds.x,
+        y: startBounds.y,
+        props: {
+          ...baseProps,
+          start: { x: startBounds.w / 2, y: 0 },
+          end: { x: startBounds.w, y: startBounds.h / 2 },
+          bend: -80
+        }
+      });
+      editor.createBindings([
+        makeArrowBinding(arrowId, startShapeId, "start", { x: 0.9, y: 0.5 }, false, false),
+        makeArrowBinding(arrowId, endShapeId, "end", { x: 0.85, y: 0.8 }, false, false)
+      ]);
+    });
+    return arrowId;
+  }
+  const startCenter = startBounds.center;
+  const endCenter = endBounds.center;
+  const arrowOrigin = Vec.Min(startCenter, endCenter);
+  editor.run(() => {
+    editor.createShape({
+      id: arrowId,
+      type: "arrow",
+      x: arrowOrigin.x,
+      y: arrowOrigin.y,
+      props: {
+        ...baseProps,
+        start: { x: startCenter.x - arrowOrigin.x, y: startCenter.y - arrowOrigin.y },
+        end: { x: endCenter.x - arrowOrigin.x, y: endCenter.y - arrowOrigin.y },
+        bend: edge.bend
+      }
+    });
+    editor.createBindings([
+      makeArrowBinding(arrowId, startShapeId, "start", { x: 0.5, y: 0.5 }, false, false),
+      makeArrowBinding(arrowId, endShapeId, "end", { x: 0.5, y: 0.5 }, false, false)
+    ]);
+  });
+  return arrowId;
+}
+function computeBlueprintBounds(nodes, lines) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (const node of nodes) {
+    if (node.parentId) continue;
+    minX = Math.min(minX, node.x);
+    minY = Math.min(minY, node.y);
+    maxX = Math.max(maxX, node.x + node.w);
+    maxY = Math.max(maxY, node.y + node.h);
+  }
+  if (lines) {
+    for (const line of lines) {
+      minX = Math.min(minX, line.x);
+      minY = Math.min(minY, line.y);
+      maxX = Math.max(maxX, line.x);
+      maxY = Math.max(maxY, line.y + line.endY);
+    }
+  }
+  return { minX, minY, maxX, maxY };
+}
+export {
+  renderBlueprint
+};
+//# sourceMappingURL=renderBlueprint.mjs.map