@tldraw/mermaid 4.6.0-internal.c7df3c92455a

package/dist-esm/svgParsing.mjs

@@ -0,0 +1,167 @@
+function parseTranslate(attr) {
+  if (!attr) return { x: 0, y: 0 };
+  const translateMatch = attr.match(/translate\(\s*([\d.e+-]+)[,\s]+([\d.e+-]+)\s*\)/);
+  if (!translateMatch) return { x: 0, y: 0 };
+  return { x: parseFloat(translateMatch[1]), y: parseFloat(translateMatch[2]) };
+}
+function getAccumulatedTranslate(el) {
+  let x = 0;
+  let y = 0;
+  let cur = el.parentElement;
+  while (cur) {
+    const parentTranslate = parseTranslate(cur.getAttribute("transform"));
+    x += parentTranslate.x;
+    y += parentTranslate.y;
+    cur = cur.parentElement;
+  }
+  return { x, y };
+}
+function getNodeDimensions(groupEl) {
+  const shapeEl = groupEl.querySelector(".label-container");
+  if (shapeEl) {
+    try {
+      const bbox = shapeEl.getBBox();
+      if (bbox.width > 0 && bbox.height > 0) return { w: bbox.width, h: bbox.height };
+    } catch {
+    }
+  }
+  try {
+    const bbox = groupEl.getBBox();
+    if (bbox.width > 0 && bbox.height > 0) return { w: bbox.width, h: bbox.height };
+  } catch {
+  }
+  const rect = groupEl.querySelector("rect");
+  if (rect) {
+    const w = parseFloat(rect.getAttribute("width") || "0");
+    const h = parseFloat(rect.getAttribute("height") || "0");
+    if (w > 0 && h > 0) return { w, h };
+  }
+  const poly = groupEl.querySelector("polygon");
+  if (poly) {
+    const pts = (poly.getAttribute("points") || "").trim().split(/\s+/).map((pointStr) => pointStr.split(",").map(Number));
+    let minX = Infinity;
+    let maxX = -Infinity;
+    let minY = Infinity;
+    let maxY = -Infinity;
+    for (const [px, py] of pts) {
+      minX = Math.min(minX, px);
+      maxX = Math.max(maxX, px);
+      minY = Math.min(minY, py);
+      maxY = Math.max(maxY, py);
+    }
+    if (maxX > minX && maxY > minY) return { w: maxX - minX, h: maxY - minY };
+  }
+  const circle = groupEl.querySelector("circle");
+  if (circle) {
+    const r = parseFloat(circle.getAttribute("r") || "0");
+    if (r > 0) return { w: r * 2, h: r * 2 };
+  }
+  const ellipse = groupEl.querySelector("ellipse");
+  if (ellipse) {
+    const w = parseFloat(ellipse.getAttribute("rx") || "0") * 2;
+    const h = parseFloat(ellipse.getAttribute("ry") || "0") * 2;
+    if (w > 0 && h > 0) return { w, h };
+  }
+  return { w: 0, h: 0 };
+}
+function parseNodesFromSvg(root, selector, idParser) {
+  const out = /* @__PURE__ */ new Map();
+  for (const groupEl of root.querySelectorAll(selector)) {
+    const rawId = groupEl.getAttribute("id") || "";
+    const id = idParser(rawId);
+    const self = parseTranslate(groupEl.getAttribute("transform"));
+    const ancestor = getAccumulatedTranslate(groupEl);
+    const { w, h } = getNodeDimensions(groupEl);
+    out.set(id, {
+      id,
+      center: { x: ancestor.x + self.x, y: ancestor.y + self.y },
+      width: w,
+      height: h
+    });
+  }
+  return out;
+}
+function parseClustersFromSvg(root, selector) {
+  const out = /* @__PURE__ */ new Map();
+  for (const groupEl of root.querySelectorAll(selector)) {
+    const id = groupEl.getAttribute("id") || "";
+    const rect = groupEl.querySelector("rect");
+    if (!rect) continue;
+    const rx = parseFloat(rect.getAttribute("x") || "0");
+    const ry = parseFloat(rect.getAttribute("y") || "0");
+    const w = parseFloat(rect.getAttribute("width") || "0");
+    const h = parseFloat(rect.getAttribute("height") || "0");
+    const self = parseTranslate(groupEl.getAttribute("transform"));
+    const ancestor = getAccumulatedTranslate(groupEl);
+    out.set(id, {
+      id,
+      topLeft: { x: ancestor.x + self.x + rx, y: ancestor.y + self.y + ry },
+      width: w,
+      height: h
+    });
+  }
+  return out;
+}
+function parseAllEdgePointsFromSvg(root, parser) {
+  const out = [];
+  for (const path of root.querySelectorAll("path[data-points]")) {
+    const dataId = path.getAttribute("data-id") || path.getAttribute("id") || "";
+    const dataPoints = path.getAttribute("data-points");
+    if (!dataPoints) continue;
+    const parsed = parser(dataId);
+    if (!parsed) continue;
+    try {
+      const points = JSON.parse(atob(dataPoints));
+      const ancestor = getAccumulatedTranslate(path);
+      for (const point of points) {
+        point.x += ancestor.x;
+        point.y += ancestor.y;
+      }
+      out.push({ start: parsed.start, end: parsed.end, points });
+    } catch {
+    }
+  }
+  return out;
+}
+function buildNodeCentersFromSvg(nodes, clusters) {
+  const out = /* @__PURE__ */ new Map();
+  for (const [id, node] of nodes) {
+    out.set(id, { x: node.center.x, y: node.center.y });
+  }
+  for (const [id, cluster] of clusters) {
+    out.set(id, {
+      x: cluster.topLeft.x + cluster.width / 2,
+      y: cluster.topLeft.y + cluster.height / 2
+    });
+  }
+  return out;
+}
+function scaleLayout(nodes, clusters, edges, scale) {
+  for (const [, node] of nodes) {
+    node.center.x *= scale;
+    node.center.y *= scale;
+    node.width *= scale;
+    node.height *= scale;
+  }
+  for (const [, cluster] of clusters) {
+    cluster.topLeft.x *= scale;
+    cluster.topLeft.y *= scale;
+    cluster.width *= scale;
+    cluster.height *= scale;
+  }
+  for (const edge of edges) {
+    for (const point of edge.points) {
+      point.x *= scale;
+      point.y *= scale;
+    }
+  }
+}
+export {
+  buildNodeCentersFromSvg,
+  getAccumulatedTranslate,
+  parseAllEdgePointsFromSvg,
+  parseClustersFromSvg,
+  parseNodesFromSvg,
+  scaleLayout
+};
+//# sourceMappingURL=svgParsing.mjs.map

package/dist-esm/svgParsing.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/svgParsing.ts"],
+  "sourcesContent": ["export interface Vec2 {\n\tx: number\n\ty: number\n}\n\nexport interface ParsedNode {\n\tid: string\n\tcenter: Vec2\n\twidth: number\n\theight: number\n}\n\nexport interface ParsedCluster {\n\tid: string\n\ttopLeft: Vec2\n\twidth: number\n\theight: number\n}\n\ntype NodeIdParser = (domId: string) => string\ntype EdgeIdParser = (dataId: string) => { start: string; end: string } | null\n\nfunction parseTranslate(attr: string | null): Vec2 {\n\tif (!attr) return { x: 0, y: 0 }\n\t// Matches SVG translate transforms, e.g. transform=\"translate(123.45, 67.8)\".\n\t// Handles scientific notation (1.2e+3). Group 1 = x offset, group 2 = y offset.\n\tconst translateMatch = attr.match(/translate\\(\\s*([\\d.e+-]+)[,\\s]+([\\d.e+-]+)\\s*\\)/)\n\tif (!translateMatch) return { x: 0, y: 0 }\n\treturn { x: parseFloat(translateMatch[1]), y: parseFloat(translateMatch[2]) }\n}\n\nexport function getAccumulatedTranslate(el: Element): Vec2 {\n\tlet x = 0\n\tlet y = 0\n\tlet cur: Element | null = el.parentElement\n\twhile (cur) {\n\t\tconst parentTranslate = parseTranslate(cur.getAttribute('transform'))\n\t\tx += parentTranslate.x\n\t\ty += parentTranslate.y\n\t\tcur = cur.parentElement\n\t}\n\treturn { x, y }\n}\n\n/**\n * Extract element dimensions from a live SVG element using getBBox(),\n * falling back to attribute parsing for non-browser environments (jsdom).\n */\nfunction getNodeDimensions(groupEl: Element): { w: number; h: number } {\n\tconst shapeEl = groupEl.querySelector('.label-container')\n\tif (shapeEl) {\n\t\ttry {\n\t\t\tconst bbox = (shapeEl as SVGGraphicsElement).getBBox()\n\t\t\tif (bbox.width > 0 && bbox.height > 0) return { w: bbox.width, h: bbox.height }\n\t\t} catch {\n\t\t\t/* fall through */\n\t\t}\n\t}\n\n\ttry {\n\t\tconst bbox = (groupEl as SVGGraphicsElement).getBBox()\n\t\tif (bbox.width > 0 && bbox.height > 0) return { w: bbox.width, h: bbox.height }\n\t} catch {\n\t\t/* fall through */\n\t}\n\n\tconst rect = groupEl.querySelector('rect')\n\tif (rect) {\n\t\tconst w = parseFloat(rect.getAttribute('width') || '0')\n\t\tconst h = parseFloat(rect.getAttribute('height') || '0')\n\t\tif (w > 0 && h > 0) return { w, h }\n\t}\n\tconst poly = groupEl.querySelector('polygon')\n\tif (poly) {\n\t\tconst pts = (poly.getAttribute('points') || '')\n\t\t\t.trim()\n\t\t\t.split(/\\s+/)\n\t\t\t.map((pointStr) => pointStr.split(',').map(Number))\n\t\tlet minX = Infinity\n\t\tlet maxX = -Infinity\n\t\tlet minY = Infinity\n\t\tlet maxY = -Infinity\n\t\tfor (const [px, py] of pts) {\n\t\t\tminX = Math.min(minX, px)\n\t\t\tmaxX = Math.max(maxX, px)\n\t\t\tminY = Math.min(minY, py)\n\t\t\tmaxY = Math.max(maxY, py)\n\t\t}\n\t\tif (maxX > minX && maxY > minY) return { w: maxX - minX, h: maxY - minY }\n\t}\n\tconst circle = groupEl.querySelector('circle')\n\tif (circle) {\n\t\tconst r = parseFloat(circle.getAttribute('r') || '0')\n\t\tif (r > 0) return { w: r * 2, h: r * 2 }\n\t}\n\tconst ellipse = groupEl.querySelector('ellipse')\n\tif (ellipse) {\n\t\tconst w = parseFloat(ellipse.getAttribute('rx') || '0') * 2\n\t\tconst h = parseFloat(ellipse.getAttribute('ry') || '0') * 2\n\t\tif (w > 0 && h > 0) return { w, h }\n\t}\n\treturn { w: 0, h: 0 }\n}\n\nexport function parseNodesFromSvg(\n\troot: Element,\n\tselector: string,\n\tidParser: NodeIdParser\n): Map<string, ParsedNode> {\n\tconst out = new Map<string, ParsedNode>()\n\tfor (const groupEl of root.querySelectorAll(selector)) {\n\t\tconst rawId = groupEl.getAttribute('id') || ''\n\t\tconst id = idParser(rawId)\n\t\tconst self = parseTranslate(groupEl.getAttribute('transform'))\n\t\tconst ancestor = getAccumulatedTranslate(groupEl)\n\t\tconst { w, h } = getNodeDimensions(groupEl)\n\t\tout.set(id, {\n\t\t\tid,\n\t\t\tcenter: { x: ancestor.x + self.x, y: ancestor.y + self.y },\n\t\t\twidth: w,\n\t\t\theight: h,\n\t\t})\n\t}\n\treturn out\n}\n\nexport function parseClustersFromSvg(root: Element, selector: string): Map<string, ParsedCluster> {\n\tconst out = new Map<string, ParsedCluster>()\n\tfor (const groupEl of root.querySelectorAll(selector)) {\n\t\tconst id = groupEl.getAttribute('id') || ''\n\t\tconst rect = groupEl.querySelector('rect')\n\t\tif (!rect) continue\n\t\tconst rx = parseFloat(rect.getAttribute('x') || '0')\n\t\tconst ry = parseFloat(rect.getAttribute('y') || '0')\n\t\tconst w = parseFloat(rect.getAttribute('width') || '0')\n\t\tconst h = parseFloat(rect.getAttribute('height') || '0')\n\t\tconst self = parseTranslate(groupEl.getAttribute('transform'))\n\t\tconst ancestor = getAccumulatedTranslate(groupEl)\n\t\tout.set(id, {\n\t\t\tid,\n\t\t\ttopLeft: { x: ancestor.x + self.x + rx, y: ancestor.y + self.y + ry },\n\t\t\twidth: w,\n\t\t\theight: h,\n\t\t})\n\t}\n\treturn out\n}\n\nexport interface ParsedEdge {\n\tstart: string\n\tend: string\n\tpoints: Vec2[]\n}\n\n/**\n * Pre-parsed SVG layout for flowchart and state diagram converters.\n * Contains already-scaled node, cluster, and edge data.\n */\nexport interface ParsedDiagramLayout {\n\tnodes: Map<string, ParsedNode>\n\tclusters: Map<string, ParsedCluster>\n\tedges: ParsedEdge[]\n}\n\n/**\n * Parse every SVG edge path in DOM order (matching mermaid's edge list order).\n * Unlike the old per-pair map, this preserves all parallel edges individually.\n */\nexport function parseAllEdgePointsFromSvg(root: Element, parser: EdgeIdParser): ParsedEdge[] {\n\tconst out: ParsedEdge[] = []\n\tfor (const path of root.querySelectorAll('path[data-points]')) {\n\t\tconst dataId = path.getAttribute('data-id') || path.getAttribute('id') || ''\n\t\tconst dataPoints = path.getAttribute('data-points')\n\t\tif (!dataPoints) continue\n\t\tconst parsed = parser(dataId)\n\t\tif (!parsed) continue\n\t\ttry {\n\t\t\tconst points = JSON.parse(atob(dataPoints))\n\t\t\tconst ancestor = getAccumulatedTranslate(path as Element)\n\t\t\tfor (const point of points) {\n\t\t\t\tpoint.x += ancestor.x\n\t\t\t\tpoint.y += ancestor.y\n\t\t\t}\n\t\t\tout.push({ start: parsed.start, end: parsed.end, points })\n\t\t} catch {\n\t\t\t/* ignore malformed data */\n\t\t}\n\t}\n\treturn out\n}\n\n/**\n * Build a map of node/cluster id \u2192 center (for flowchart and state diagram edge matching).\n */\nexport function buildNodeCentersFromSvg(\n\tnodes: Map<string, ParsedNode>,\n\tclusters: Map<string, ParsedCluster>\n): Map<string, Vec2> {\n\tconst out = new Map<string, Vec2>()\n\tfor (const [id, node] of nodes) {\n\t\tout.set(id, { x: node.center.x, y: node.center.y })\n\t}\n\tfor (const [id, cluster] of clusters) {\n\t\tout.set(id, {\n\t\t\tx: cluster.topLeft.x + cluster.width / 2,\n\t\t\ty: cluster.topLeft.y + cluster.height / 2,\n\t\t})\n\t}\n\treturn out\n}\n\n// ---------------------------------------------------------------------------\n// Layout scaling and bounds\n// ---------------------------------------------------------------------------\n\nexport function scaleLayout(\n\tnodes: Map<string, ParsedNode>,\n\tclusters: Map<string, ParsedCluster>,\n\tedges: ParsedEdge[],\n\tscale: number\n): void {\n\tfor (const [, node] of nodes) {\n\t\tnode.center.x *= scale\n\t\tnode.center.y *= scale\n\t\tnode.width *= scale\n\t\tnode.height *= scale\n\t}\n\tfor (const [, cluster] of clusters) {\n\t\tcluster.topLeft.x *= scale\n\t\tcluster.topLeft.y *= scale\n\t\tcluster.width *= scale\n\t\tcluster.height *= scale\n\t}\n\tfor (const edge of edges) {\n\t\tfor (const point of edge.points) {\n\t\t\tpoint.x *= scale\n\t\t\tpoint.y *= scale\n\t\t}\n\t}\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-esm/utils.mjs

@@ -0,0 +1,55 @@
+const BEND_SCALE = -1.8;
+const MAX_ARROW_BEND = 200;
+function getArrowBend(edgeData) {
+  const points = edgeData.points;
+  if (points.length < 2) {
+    return 0;
+  }
+  const start = points[0];
+  const end = points[points.length - 1];
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  const chordLength = Math.sqrt(dx * dx + dy * dy);
+  if (chordLength === 0) return 0;
+  let maxDistance = 0;
+  for (let i = 1; i < points.length - 1; i++) {
+    const distance = ((points[i].x - start.x) * dy - (points[i].y - start.y) * dx) / chordLength;
+    if (Math.abs(distance) > Math.abs(maxDistance)) {
+      maxDistance = distance;
+    }
+  }
+  const bend = maxDistance * BEND_SCALE;
+  return Math.max(-MAX_ARROW_BEND, Math.min(MAX_ARROW_BEND, bend));
+}
+function sanitizeDiagramText(text) {
+  if (typeof text !== "string") return "";
+  const doc = new DOMParser().parseFromString(text.replace(/<br\s*\/?>/gi, "\n"), "text/html");
+  return (doc.body.textContent ?? "").trim();
+}
+const LAYOUT_SCALE = 1.25;
+function orderTopDown(items, getId, getParentId) {
+  const byId = new Map(items.map((item) => [getId(item), item]));
+  const visited = /* @__PURE__ */ new Set();
+  const result = [];
+  function visit(id) {
+    if (visited.has(id)) return;
+    visited.add(id);
+    const item = byId.get(id);
+    if (item) result.push(item);
+    for (const child of items) {
+      if (getParentId(child) === id) visit(getId(child));
+    }
+  }
+  for (const item of items) {
+    const parentId = getParentId(item);
+    if (!parentId || !byId.has(parentId)) visit(getId(item));
+  }
+  return result;
+}
+export {
+  LAYOUT_SCALE,
+  getArrowBend,
+  orderTopDown,
+  sanitizeDiagramText
+};
+//# sourceMappingURL=utils.mjs.map

package/dist-esm/utils.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/utils.ts"],
+  "sourcesContent": ["const BEND_SCALE = -1.8\nconst MAX_ARROW_BEND = 200\n\n/**\n * Extrapolate a bend value for tldraw arrows from Mermaid edge path waypoints.\n * Uses perpendicular distance from chord to mid-points, scaled and clamped.\n */\nexport function getArrowBend(edgeData: { points: { x: number; y: number }[] }) {\n\tconst points = edgeData.points\n\n\tif (points.length < 2) {\n\t\treturn 0\n\t}\n\n\tconst start = points[0]\n\tconst end = points[points.length - 1]\n\tconst dx = end.x - start.x\n\tconst dy = end.y - start.y\n\tconst chordLength = Math.sqrt(dx * dx + dy * dy)\n\n\tif (chordLength === 0) return 0\n\n\tlet maxDistance = 0\n\tfor (let i = 1; i < points.length - 1; i++) {\n\t\tconst distance = ((points[i].x - start.x) * dy - (points[i].y - start.y) * dx) / chordLength\n\t\tif (Math.abs(distance) > Math.abs(maxDistance)) {\n\t\t\tmaxDistance = distance\n\t\t}\n\t}\n\n\tconst bend = maxDistance * BEND_SCALE\n\treturn Math.max(-MAX_ARROW_BEND, Math.min(MAX_ARROW_BEND, bend))\n}\n\n/** Normalize HTML line breaks to newlines, decode HTML entities, and trim. */\nexport function sanitizeDiagramText(text: string): string {\n\tif (typeof text !== 'string') return ''\n\tconst doc = new DOMParser().parseFromString(text.replace(/<br\\s*\\/?>/gi, '\\n'), 'text/html')\n\treturn (doc.body.textContent ?? '').trim()\n}\n\n/** Scale factor applied to parsed SVG layout (nodes, clusters, edges). */\nexport const LAYOUT_SCALE = 1.25\n\n/**\n * Order items top-down by parent relationship so parents are visited before children.\n * Works for subgraphs (FlowSubGraph[]) and compound state IDs (string[]).\n */\nexport function orderTopDown<T>(\n\titems: T[],\n\tgetId: (item: T) => string,\n\tgetParentId: (item: T) => string | undefined\n): T[] {\n\tconst byId = new Map(items.map((item) => [getId(item), item]))\n\tconst visited = new Set<string>()\n\tconst result: T[] = []\n\n\tfunction visit(id: string) {\n\t\tif (visited.has(id)) return\n\t\tvisited.add(id)\n\t\tconst item = byId.get(id)\n\t\tif (item) result.push(item)\n\t\tfor (const child of items) {\n\t\t\tif (getParentId(child) === id) visit(getId(child))\n\t\t}\n\t}\n\n\tfor (const item of items) {\n\t\tconst parentId = getParentId(item)\n\t\tif (!parentId || !byId.has(parentId)) visit(getId(item))\n\t}\n\treturn result\n}\n"],
+  "mappings": "AAAA,MAAM,aAAa;AACnB,MAAM,iBAAiB;AAMhB,SAAS,aAAa,UAAkD;AAC9E,QAAM,SAAS,SAAS;AAExB,MAAI,OAAO,SAAS,GAAG;AACtB,WAAO;AAAA,EACR;AAEA,QAAM,QAAQ,OAAO,CAAC;AACtB,QAAM,MAAM,OAAO,OAAO,SAAS,CAAC;AACpC,QAAM,KAAK,IAAI,IAAI,MAAM;AACzB,QAAM,KAAK,IAAI,IAAI,MAAM;AACzB,QAAM,cAAc,KAAK,KAAK,KAAK,KAAK,KAAK,EAAE;AAE/C,MAAI,gBAAgB,EAAG,QAAO;AAE9B,MAAI,cAAc;AAClB,WAAS,IAAI,GAAG,IAAI,OAAO,SAAS,GAAG,KAAK;AAC3C,UAAM,aAAa,OAAO,CAAC,EAAE,IAAI,MAAM,KAAK,MAAM,OAAO,CAAC,EAAE,IAAI,MAAM,KAAK,MAAM;AACjF,QAAI,KAAK,IAAI,QAAQ,IAAI,KAAK,IAAI,WAAW,GAAG;AAC/C,oBAAc;AAAA,IACf;AAAA,EACD;AAEA,QAAM,OAAO,cAAc;AAC3B,SAAO,KAAK,IAAI,CAAC,gBAAgB,KAAK,IAAI,gBAAgB,IAAI,CAAC;AAChE;AAGO,SAAS,oBAAoB,MAAsB;AACzD,MAAI,OAAO,SAAS,SAAU,QAAO;AACrC,QAAM,MAAM,IAAI,UAAU,EAAE,gBAAgB,KAAK,QAAQ,gBAAgB,IAAI,GAAG,WAAW;AAC3F,UAAQ,IAAI,KAAK,eAAe,IAAI,KAAK;AAC1C;AAGO,MAAM,eAAe;AAMrB,SAAS,aACf,OACA,OACA,aACM;AACN,QAAM,OAAO,IAAI,IAAI,MAAM,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC;AAC7D,QAAM,UAAU,oBAAI,IAAY;AAChC,QAAM,SAAc,CAAC;AAErB,WAAS,MAAM,IAAY;AAC1B,QAAI,QAAQ,IAAI,EAAE,EAAG;AACrB,YAAQ,IAAI,EAAE;AACd,UAAM,OAAO,KAAK,IAAI,EAAE;AACxB,QAAI,KAAM,QAAO,KAAK,IAAI;AAC1B,eAAW,SAAS,OAAO;AAC1B,UAAI,YAAY,KAAK,MAAM,GAAI,OAAM,MAAM,KAAK,CAAC;AAAA,IAClD;AAAA,EACD;AAEA,aAAW,QAAQ,OAAO;AACzB,UAAM,WAAW,YAAY,IAAI;AACjC,QAAI,CAAC,YAAY,CAAC,KAAK,IAAI,QAAQ,EAAG,OAAM,MAAM,IAAI,CAAC;AAAA,EACxD;AACA,SAAO;AACR;",
+  "names": []
+}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@tldraw/mermaid",
+  "description": "Mermaid diagram to tldraw shape conversion.",
+  "version": "4.6.0-internal.c7df3c92455a",
+  "author": {
+    "name": "tldraw Inc.",
+    "email": "hello@tldraw.com"
+  },
+  "homepage": "https://tldraw.dev",
+  "license": "SEE LICENSE IN LICENSE.md",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tldraw/tldraw"
+  },
+  "bugs": {
+    "url": "https://github.com/tldraw/tldraw/issues"
+  },
+  "keywords": [
+    "tldraw",
+    "mermaid",
+    "diagram",
+    "canvas",
+    "infinite"
+  ],
+  "main": "dist-cjs/index.js",
+  "files": [
+    "dist-esm",
+    "dist-cjs",
+    "src"
+  ],
+  "scripts": {
+    "test-ci": "yarn run -T vitest run --passWithNoTests",
+    "test": "yarn run -T vitest --passWithNoTests",
+    "test-coverage": "yarn run -T vitest run --coverage --passWithNoTests",
+    "build": "yarn run -T tsx ../../internal/scripts/build-package.ts",
+    "build-api": "yarn run -T tsx ../../internal/scripts/build-api.ts",
+    "prepack": "yarn run -T tsx ../../internal/scripts/prepack.ts",
+    "postpack": "../../internal/scripts/postpack.sh",
+    "pack-tarball": "yarn pack",
+    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
+  },
+  "dependencies": {
+    "@tldraw/tlschema": "4.6.0-internal.c7df3c92455a",
+    "@tldraw/utils": "4.6.0-internal.c7df3c92455a",
+    "mermaid": "11.12.2"
+  },
+  "peerDependencies": {
+    "tldraw": "4.6.0-internal.c7df3c92455a"
+  },
+  "devDependencies": {
+    "lazyrepo": "0.0.0-alpha.27",
+    "vitest": "^3.2.4"
+  },
+  "module": "dist-esm/index.mjs",
+  "source": "src/index.ts",
+  "exports": {
+    ".": {
+      "import": "./dist-esm/index.mjs",
+      "require": "./dist-cjs/index.js"
+    }
+  }
+}

package/src/blueprint.ts

@@ -0,0 +1,75 @@
+import type {
+	TLArrowShapeArrowheadStyle,
+	TLDefaultColorStyle,
+	TLDefaultDashStyle,
+	TLDefaultFillStyle,
+	TLDefaultHorizontalAlignStyle,
+	TLDefaultSizeStyle,
+	TLDefaultVerticalAlignStyle,
+	TLGeoShapeGeoStyle,
+} from 'tldraw'
+
+/**
+ * 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 interface DiagramMermaidBlueprint {
+	nodes: MermaidBlueprintGeoNode[]
+	edges: MermaidBlueprintEdge[]
+	lines?: MermaidBlueprintLineNode[]
+	groups?: string[][]
+}
+
+/** @public */
+export 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 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 interface MermaidBlueprintLineNode {
+	id: string
+	x: number
+	y: number
+	endX?: number
+	endY: number
+	dash?: TLDefaultDashStyle
+	size?: TLDefaultSizeStyle
+	color?: TLDefaultColorStyle
+}

package/src/colors.ts

@@ -0,0 +1,215 @@
+import { defaultColorNames, DefaultColorThemePalette } from '@tldraw/tlschema'
+import { TLDefaultColorStyle, TLDefaultDashStyle, TLDefaultSizeStyle } from 'tldraw'
+
+type Color = [number, number, number, number]
+
+export interface ParsedNodeColors {
+	fillColor?: TLDefaultColorStyle
+	strokeColor?: TLDefaultColorStyle
+}
+
+/**
+ * Build a map of node id → parsed fill/stroke colors from Mermaid's classDef definitions.
+ *
+ * Uses the structured data from `db.getClasses()` and each node's `classes`
+ * array. For each node, looks up its applied classDef styles and maps fill and
+ * stroke independently to the nearest tldraw palette color.
+ */
+export function buildClassDefColorMap(
+	classDefs: Map<string, { styles: string[] }>,
+	items: Iterable<[string, { classes?: string[] }]>
+): Map<string, ParsedNodeColors> {
+	const result = new Map<string, ParsedNodeColors>()
+	if (classDefs.size === 0) return result
+
+	for (const [nodeId, item] of items) {
+		if (!item.classes || item.classes.length === 0) continue
+
+		for (const className of item.classes) {
+			const classDef = classDefs.get(className)
+			if (!classDef || classDef.styles.length === 0) continue
+
+			const props = parseCssProps(classDef.styles)
+			const fill = toColor(props.get('fill'))
+			const stroke = toColor(props.get('stroke'))
+
+			if (!fill && !stroke) continue
+
+			const colors: ParsedNodeColors = {}
+			if (fill) colors.fillColor = nearestTldrawColor(fill)
+			if (stroke) colors.strokeColor = nearestTldrawColor(stroke)
+			result.set(nodeId, colors)
+			break
+		}
+	}
+
+	return result
+}
+
+export function parseRgbToTldrawColor(
+	text: string
+): { color: TLDefaultColorStyle; hasAlpha: boolean } | null {
+	const color = toColor(text)
+	if (!color) return null
+	return { color: nearestTldrawColor(color), hasAlpha: color[3] < 255 }
+}
+
+interface ParsedCssOverrides {
+	color?: TLDefaultColorStyle
+	dashOverride?: TLDefaultDashStyle
+	sizeOverride?: TLDefaultSizeStyle
+}
+
+function parseCssProps(styles: string[]): Map<string, string> {
+	const props = new Map<string, string>()
+	for (const entry of styles) {
+		for (const part of entry.split(';')) {
+			const colon = part.indexOf(':')
+			if (colon < 0) continue
+			const key = part.slice(0, colon).trim().toLowerCase()
+			const value = part.slice(colon + 1).trim()
+			if (key && value) props.set(key, value)
+		}
+	}
+	return props
+}
+
+/**
+ * Parse a Mermaid CSS style array from an edge (FlowEdge.style / linkStyle)
+ * and return tldraw-compatible overrides.
+ */
+export function parseCssStyles(styles: string[] | undefined): ParsedCssOverrides {
+	if (!styles || styles.length === 0) return {}
+
+	const props = parseCssProps(styles)
+	const result: ParsedCssOverrides = {}
+
+	const stroke = toColor(props.get('stroke'))
+	if (stroke) {
+		result.color = nearestTldrawColor(stroke)
+	}
+
+	if (props.has('stroke-dasharray')) {
+		result.dashOverride = 'dashed'
+	}
+
+	const strokeWidth = props.get('stroke-width')
+	if (strokeWidth) {
+		const pixels = parseFloat(strokeWidth)
+		if (Number.isFinite(pixels)) {
+			if (pixels <= 1) result.sizeOverride = 's'
+			else if (pixels <= 2) result.sizeOverride = 'm'
+			else result.sizeOverride = 'l'
+		}
+	}
+
+	return result
+}
+
+/**
+ * Parse inline `style nodeId fill:…,stroke:…` directives from a FlowVertex.styles
+ * array and return fill and stroke as independent tldraw colors.
+ */
+export function parseNodeInlineColor(styles: string[] | undefined): ParsedNodeColors | undefined {
+	if (!styles || styles.length === 0) return undefined
+
+	const props = parseCssProps(styles)
+	const fill = toColor(props.get('fill'))
+	const stroke = toColor(props.get('stroke'))
+
+	if (!fill && !stroke) return undefined
+
+	const colors: ParsedNodeColors = {}
+	if (fill) colors.fillColor = nearestTldrawColor(fill)
+	if (stroke) colors.strokeColor = nearestTldrawColor(stroke)
+	return colors
+}
+
+function parseHexToRgb(hex: string): [number, number, number] | null {
+	const stripped = hex.replace(/^#/, '')
+	if (stripped.length === 3 || stripped.length === 4) {
+		return [
+			parseInt(stripped[0] + stripped[0], 16),
+			parseInt(stripped[1] + stripped[1], 16),
+			parseInt(stripped[2] + stripped[2], 16),
+		]
+	}
+	if (stripped.length === 6 || stripped.length === 8) {
+		return [
+			parseInt(stripped.slice(0, 2), 16),
+			parseInt(stripped.slice(2, 4), 16),
+			parseInt(stripped.slice(4, 6), 16),
+		]
+	}
+	return null
+}
+
+const TLDRAW_PALETTE: [TLDefaultColorStyle, number, number, number][] = defaultColorNames.map(
+	(name) => {
+		const { solid } = DefaultColorThemePalette.lightMode[name]
+		const rgb = parseHexToRgb(solid)!
+		return [name, rgb[0], rgb[1], rgb[2]]
+	}
+)
+
+/** Map an arbitrary Color tuple to the nearest tldraw named color (best-effort). */
+function nearestTldrawColor(rgb: Color): TLDefaultColorStyle {
+	let [r, g, b] = rgb
+
+	const max = Math.max(r, g, b)
+	const min = Math.min(r, g, b)
+	const lightness = (max + min) / 2 / 255
+	const chroma = max - min
+
+	// For very light pastels, strip the white base and amplify the
+	// chromatic signal so the distance metric can see the hue.
+	if (lightness > 0.75 && chroma > 5) {
+		const target = 200
+		r = Math.round(((r - min) / chroma) * target)
+		g = Math.round(((g - min) / chroma) * target)
+		b = Math.round(((b - min) / chroma) * target)
+	}
+
+	let best: TLDefaultColorStyle = 'black'
+	let bestDistance = Infinity
+	for (const [name, red, green, blue] of TLDRAW_PALETTE) {
+		// "Redmean" weighted Euclidean distance (Compuphase approximation).
+		// Weights RGB channels by the average red value of the two colors to
+		// approximate human perception, which is more sensitive to green and
+		// varies in red/blue sensitivity depending on the color's warmth.
+		const rMean = (r + red) / 2
+		const dR = r - red
+		const dG = g - green
+		const dB = b - blue
+		const distance = (2 + rMean / 256) * dR * dR + 4 * dG * dG + (2 + (255 - rMean) / 256) * dB * dB
+		if (distance < bestDistance) {
+			bestDistance = distance
+			best = name
+		}
+	}
+	return best
+}
+
+function toColor(value: string | undefined): Color | undefined {
+	if (!value) return undefined
+
+	const trimmed = value.trim()
+	if (!trimmed || trimmed === 'none' || trimmed === 'transparent') return undefined
+
+	if (trimmed.startsWith('rgb')) {
+		const match = trimmed.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)/)
+		if (!match) return undefined
+		return [
+			parseInt(match[1], 10),
+			parseInt(match[2], 10),
+			parseInt(match[3], 10),
+			match[4] !== undefined ? Math.round(parseFloat(match[4]) * 255) : 255,
+		]
+	}
+	if (trimmed.startsWith('#')) {
+		const rgb = parseHexToRgb(trimmed)
+		if (!rgb) return undefined
+		return [rgb[0], rgb[1], rgb[2], 255]
+	}
+	return undefined
+}

package/src/createMermaidDiagram.test.ts

@@ -0,0 +1,31 @@
+vi.mock('tldraw', () => ({
+	createShapeId: () => `shape:mock-0` as any,
+	toRichText: (text: string) => ({
+		type: 'doc',
+		content: [{ type: 'paragraph', content: [{ type: 'text', text }] }],
+	}),
+	Vec: {
+		Min: (a: { x: number; y: number }, b: { x: number; y: number }) => ({
+			x: Math.min(a.x, b.x),
+			y: Math.min(a.y, b.y),
+		}),
+	},
+}))
+
+import { createMermaidDiagram, MermaidDiagramError } from './createMermaidDiagram'
+
+describe('createMermaidDiagram', () => {
+	it('throws MermaidDiagramError for invalid input', async () => {
+		const editor = {} as any
+
+		await expect(
+			createMermaidDiagram(editor, 'not a diagram at all', {
+				blueprintRender: { position: { x: 0, y: 0 }, centerOnPosition: false },
+			})
+		).rejects.toThrow(MermaidDiagramError)
+
+		await expect(createMermaidDiagram(editor, 'not a diagram at all')).rejects.toMatchObject({
+			type: 'parse',
+		})
+	})
+})