@tldraw/mermaid 4.6.0-canary.00a8c03b5687

package/README.md

@@ -0,0 +1,195 @@
+# @tldraw/mermaid
+
+Convert [Mermaid](https://mermaid.js.org/) diagram syntax into native, editable tldraw shapes.
+
+Instead of rendering a static SVG, `@tldraw/mermaid` parses Mermaid text and creates real geo shapes, arrows, frames, and groups on the tldraw canvas — so users can move, resize, restyle, and connect them like any other shape.
+
+## Installation
+
+```bash
+npm i @tldraw/mermaid
+```
+
+**Peer dependencies:** your app must also include compatible versions of:
+
+- **`tldraw`** — the SDK this package plugs into
+- **`react`** — `^18.2.0` or `^19.2.1`
+- **`react-dom`** — `^18.2.0` or `^19.2.1`
+
+## Quick start
+
+```tsx
+import { createMermaidDiagram } from '@tldraw/mermaid'
+
+// Inside a component or callback with access to the editor:
+await createMermaidDiagram(
+	editor,
+	`
+  flowchart TD
+    A[Start] --> B{Decision}
+    B -->|Yes| C[Do something]
+    B -->|No| D[Do something else]
+`
+)
+```
+
+By default, shapes are centered on the viewport. You can control placement with `blueprintRender`:
+
+```tsx
+// Center the diagram on a specific point (default behavior)
+await createMermaidDiagram(editor, diagramText, {
+	blueprintRender: {
+		position: { x: 500, y: 300 },
+		centerOnPosition: true,
+	},
+})
+
+// Place the diagram's top-left corner at the given point
+await createMermaidDiagram(editor, diagramText, {
+	blueprintRender: {
+		position: { x: 0, y: 0 },
+		centerOnPosition: false,
+	},
+})
+```
+
+When `centerOnPosition` is `true` (the default), the diagram's center aligns with the given position. When `false`, the diagram's top-left corner aligns with it instead. If no `position` is provided, the diagram uses the viewport center — or the cursor position if the user has "paste at cursor" mode enabled.
+
+## Supported diagram types
+
+| Diagram type     | Mermaid keyword      | What you get                                                        |
+| ---------------- | -------------------- | ------------------------------------------------------------------- |
+| Flowchart        | `flowchart`, `graph` | Geo shapes, arrows, subgraph frames                                 |
+| Sequence diagram | `sequenceDiagram`    | Actor shapes, lifelines, signal arrows, fragment frames             |
+| State diagram    | `stateDiagram-v2`    | State shapes, transitions, compound state frames, fork/join, choice |
+| Mindmap          | `mindmap`            | Colored geo shapes, parent-child edges, tree hierarchy              |
+
+Unsupported diagram types (pie, gantt, class, ER, etc.) can be handled with the `onUnsupportedDiagram` callback — for example, to fall back to SVG import:
+
+```tsx
+await createMermaidDiagram(editor, text, {
+	onUnsupportedDiagram(svgString) {
+		editor.putExternalContent({ type: 'svg-text', text: svgString })
+	},
+})
+```
+
+## API
+
+### `createMermaidDiagram(editor, text, options?)`
+
+Parses Mermaid text, extracts layout from the rendered SVG, builds a blueprint, and creates tldraw shapes.
+
+- **`editor`** — a tldraw `Editor` instance.
+- **`text`** — Mermaid diagram source text.
+- **`options`** — optional `MermaidDiagramOptions`:
+  - `mermaidConfig` — Mermaid configuration overrides (theme, spacing, etc.).
+  - `blueprintRender` — positioning options (`position`, `centerOnPosition`).
+  - `onUnsupportedDiagram(svg)` — callback when the diagram type isn't natively supported.
+
+Throws `MermaidDiagramError` on parse failure or unsupported diagram type (if no callback is provided).
+
+### `renderBlueprint(editor, blueprint, opts?)`
+
+Renders a pre-built `DiagramMermaidBlueprint` into the editor. Useful if you want to construct or modify a blueprint programmatically before rendering.
+
+### `MermaidDiagramError`
+
+Error class with `type: 'parse' | 'unsupported'` and `diagramType` properties.
+
+### Types
+
+- **`DiagramMermaidBlueprint`** — intermediate representation: `{ nodes, edges, lines?, groups? }`.
+- **`MermaidBlueprintGeoNode`** — a shape node with position, size, geo type, label, colors, and optional `parentId`.
+- **`MermaidBlueprintEdge`** — an arrow with start/end node IDs, bend, arrowheads, dash style, and anchor positions.
+- **`MermaidBlueprintLineNode`** — a vertical or horizontal line (used for sequence diagram lifelines).
+- **`BlueprintRenderingOptions`** — position and centering options for `renderBlueprint`.
+
+## How it works
+
+The conversion happens in three stages:
+
+```mermaid
+flowchart LR
+    MermaidText["Mermaid text"] --> ParseRender["Parse and render SVG"]
+    ParseRender --> ExtractBlueprint["Extract blueprint"]
+    ExtractBlueprint --> CreateShapes["Create tldraw shapes"]
+```
+
+1. **Parse and render** — Mermaid parses the text and renders an SVG into an offscreen DOM element, giving us accurate layout positions via `getBBox()`.
+2. **Extract blueprint** — a diagram-specific converter reads positions from the SVG and semantic data from Mermaid's internal database, producing a `DiagramMermaidBlueprint`.
+3. **Create shapes** — `renderBlueprint` converts the blueprint into tldraw geo shapes, arrows, lines, frames, and groups.
+
+## Example: paste handler
+
+A common integration is converting Mermaid text on paste. Here's a React component that registers itself as a text content handler — based on the pattern used on [tldraw.com](https://github.com/tldraw/tldraw/blob/main/apps/dotcom/client/src/components/SneakyMermaidHandler/SneakyMermaidHandler.tsx):
+
+```tsx
+import { useEffect } from 'react'
+import { defaultHandleExternalTextContent, useEditor } from 'tldraw'
+
+const MERMAID_KEYWORD =
+	/^\s*(flowchart|graph|sequenceDiagram|stateDiagram|classDiagram|erDiagram|gantt|pie|gitGraph|mindmap)/
+
+export function MermaidPasteHandler() {
+	const editor = useEditor()
+
+	useEffect(() => {
+		editor.registerExternalContentHandler('text', async (content) => {
+			if (!MERMAID_KEYWORD.test(content.text)) {
+				await defaultHandleExternalTextContent(editor, content)
+				return
+			}
+
+			try {
+				const { createMermaidDiagram } = await import('@tldraw/mermaid')
+				await createMermaidDiagram(editor, content.text, {
+					async onUnsupportedDiagram(svgString) {
+						await editor.putExternalContent({ type: 'svg-text', text: svgString })
+					},
+				})
+			} catch {
+				await defaultHandleExternalTextContent(editor, content)
+			}
+		})
+	}, [editor])
+
+	return null
+}
+```
+
+Drop `<MermaidPasteHandler />` inside your `<Tldraw>` component and users can paste Mermaid text directly onto the canvas.
+
+The regex above is a simplified check. On tldraw.com the detection is handled by [`simpleMermaidStringTest`](https://github.com/tldraw/tldraw/blob/main/apps/dotcom/client/src/components/SneakyMermaidHandler/simpleMermaidStringTest.ts), which also strips YAML frontmatter (`---...---`), `%%{...}%%` directives, and `%%` comments before testing for the diagram keyword — making it more robust for real-world pasted content.
+
+## Lazy loading
+
+The `mermaid` dependency is roughly 2 MB. The paste handler above already lazy-loads with `await import('@tldraw/mermaid')` — the package is only fetched when the pasted text matches a Mermaid keyword. For your own integration, the same pattern applies: pre-screen with a lightweight regex, then dynamic-import the package only when needed.
+
+## Examples
+
+See the [Mermaid diagrams example](https://github.com/tldraw/tldraw/tree/main/apps/examples/src/examples/use-cases/hundred-mermaids) in the examples app for a runnable demo that renders many diagram types at once. Run it locally with `yarn dev` from the repo root and visit `localhost:5420`.
+
+## License
+
+This project is part of the tldraw SDK. It is provided under the [tldraw SDK license](https://github.com/tldraw/tldraw/blob/main/LICENSE.md).
+
+## Trademarks
+
+Copyright (c) 2024-present tldraw Inc. The tldraw name and logo are trademarks of tldraw. Please see our [trademark guidelines](https://github.com/tldraw/tldraw/blob/main/TRADEMARKS.md) for info on acceptable usage.
+
+## Distributions
+
+You can find tldraw on npm [here](https://www.npmjs.com/package/@tldraw/tldraw?activeTab=versions).
+
+## Contribution
+
+Please see our [contributing guide](https://github.com/tldraw/tldraw/blob/main/CONTRIBUTING.md). Found a bug? Please [submit an issue](https://github.com/tldraw/tldraw/issues/new).
+
+## Community
+
+Have questions, comments or feedback? [Join our discord](https://discord.tldraw.com/?utm_source=github&utm_medium=readme&utm_campaign=sociallink). For the latest news and release notes, visit [tldraw.dev](https://tldraw.dev).
+
+## Contact
+
+Find us on Twitter/X at [@tldraw](https://twitter.com/tldraw).

package/dist-cjs/blueprint.js

@@ -0,0 +1,17 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var blueprint_exports = {};
+module.exports = __toCommonJS(blueprint_exports);
+//# sourceMappingURL=blueprint.js.map

package/dist-cjs/blueprint.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/blueprint.ts"],
+  "sourcesContent": ["import type {\n\tTLArrowShapeArrowheadStyle,\n\tTLDefaultColorStyle,\n\tTLDefaultDashStyle,\n\tTLDefaultFillStyle,\n\tTLDefaultHorizontalAlignStyle,\n\tTLDefaultSizeStyle,\n\tTLDefaultVerticalAlignStyle,\n\tTLGeoShapeGeoStyle,\n} from 'tldraw'\n\n/**\n * An intermediate representation of a parsed mermaid diagram as abstract nodes,\n * edges, and lines with layout positions and tldraw style props. Produced by\n * the diagram-specific converters and consumed by `renderBlueprint` to create\n * actual tldraw shapes on the canvas.\n *\n * @public\n */\nexport interface DiagramMermaidBlueprint {\n\tnodes: MermaidBlueprintGeoNode[]\n\tedges: MermaidBlueprintEdge[]\n\tlines?: MermaidBlueprintLineNode[]\n\tgroups?: string[][]\n}\n\n/** @public */\nexport interface MermaidBlueprintGeoNode {\n\tid: string\n\tx: number\n\ty: number\n\tw: number\n\th: number\n\tgeo: TLGeoShapeGeoStyle\n\tparentId?: string\n\tlabel?: string\n\tfill?: TLDefaultFillStyle\n\tcolor?: TLDefaultColorStyle\n\tdash?: TLDefaultDashStyle\n\tsize?: TLDefaultSizeStyle\n\talign?: TLDefaultHorizontalAlignStyle\n\tverticalAlign?: TLDefaultVerticalAlignStyle\n}\n\n/** @public */\nexport interface MermaidBlueprintEdge {\n\tstartNodeId: string\n\tendNodeId: string\n\tlabel?: string\n\tbend: number\n\tarrowheadEnd?: TLArrowShapeArrowheadStyle\n\tarrowheadStart?: TLArrowShapeArrowheadStyle\n\tdash?: TLDefaultDashStyle\n\tsize?: TLDefaultSizeStyle\n\tcolor?: TLDefaultColorStyle\n\tanchorStartY?: number\n\tanchorEndY?: number\n\tisExact?: boolean\n\tisPrecise?: boolean\n\tisExactEnd?: boolean\n\tisPreciseEnd?: boolean\n\tdecoration?: { type: 'autonumber'; value: string }\n}\n\n/** @public */\nexport interface MermaidBlueprintLineNode {\n\tid: string\n\tx: number\n\ty: number\n\tendX?: number\n\tendY: number\n\tdash?: TLDefaultDashStyle\n\tsize?: TLDefaultSizeStyle\n\tcolor?: TLDefaultColorStyle\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/dist-cjs/colors.js

@@ -0,0 +1,173 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var colors_exports = {};
+__export(colors_exports, {
+  buildClassDefColorMap: () => buildClassDefColorMap,
+  parseCssStyles: () => parseCssStyles,
+  parseNodeInlineColor: () => parseNodeInlineColor,
+  parseRgbToTldrawColor: () => parseRgbToTldrawColor
+});
+module.exports = __toCommonJS(colors_exports);
+var import_tlschema = require("@tldraw/tlschema");
+function buildClassDefColorMap(classDefs, items) {
+  const result = /* @__PURE__ */ new Map();
+  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 = {};
+      if (fill) colors.fillColor = nearestTldrawColor(fill);
+      if (stroke) colors.strokeColor = nearestTldrawColor(stroke);
+      result.set(nodeId, colors);
+      break;
+    }
+  }
+  return result;
+}
+function parseRgbToTldrawColor(text) {
+  const color = toColor(text);
+  if (!color) return null;
+  return { color: nearestTldrawColor(color), hasAlpha: color[3] < 255 };
+}
+function parseCssProps(styles) {
+  const props = /* @__PURE__ */ new Map();
+  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;
+}
+function parseCssStyles(styles) {
+  if (!styles || styles.length === 0) return {};
+  const props = parseCssProps(styles);
+  const result = {};
+  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;
+}
+function parseNodeInlineColor(styles) {
+  if (!styles || styles.length === 0) return void 0;
+  const props = parseCssProps(styles);
+  const fill = toColor(props.get("fill"));
+  const stroke = toColor(props.get("stroke"));
+  if (!fill && !stroke) return void 0;
+  const colors = {};
+  if (fill) colors.fillColor = nearestTldrawColor(fill);
+  if (stroke) colors.strokeColor = nearestTldrawColor(stroke);
+  return colors;
+}
+function parseHexToRgb(hex) {
+  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 = import_tlschema.defaultColorNames.map(
+  (name) => {
+    const { solid } = import_tlschema.DefaultColorThemePalette.lightMode[name];
+    const rgb = parseHexToRgb(solid);
+    return [name, rgb[0], rgb[1], rgb[2]];
+  }
+);
+function nearestTldrawColor(rgb) {
+  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;
+  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 = "black";
+  let bestDistance = Infinity;
+  for (const [name, red, green, blue] of TLDRAW_PALETTE) {
+    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) {
+  if (!value) return void 0;
+  const trimmed = value.trim();
+  if (!trimmed || trimmed === "none" || trimmed === "transparent") return void 0;
+  if (trimmed.startsWith("rgb")) {
+    const match = trimmed.match(/rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*([\d.]+)\s*)?\)/);
+    if (!match) return void 0;
+    return [
+      parseInt(match[1], 10),
+      parseInt(match[2], 10),
+      parseInt(match[3], 10),
+      match[4] !== void 0 ? Math.round(parseFloat(match[4]) * 255) : 255
+    ];
+  }
+  if (trimmed.startsWith("#")) {
+    const rgb = parseHexToRgb(trimmed);
+    if (!rgb) return void 0;
+    return [rgb[0], rgb[1], rgb[2], 255];
+  }
+  return void 0;
+}
+//# sourceMappingURL=colors.js.map

package/dist-cjs/colors.js.map

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

package/dist-cjs/createMermaidDiagram.js

@@ -0,0 +1,157 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var createMermaidDiagram_exports = {};
+__export(createMermaidDiagram_exports, {
+  MermaidDiagramError: () => MermaidDiagramError,
+  createMermaidDiagram: () => createMermaidDiagram
+});
+module.exports = __toCommonJS(createMermaidDiagram_exports);
+var import_mermaid = __toESM(require("mermaid"), 1);
+var import_flowchartDiagram = require("./flowchartDiagram");
+var import_mindmapDiagram = require("./mindmapDiagram");
+var import_renderBlueprint = require("./renderBlueprint");
+var import_sequenceDiagram = require("./sequenceDiagram");
+var import_stateDiagram = require("./stateDiagram");
+let nextMermaidId = 0;
+class MermaidDiagramError extends Error {
+  constructor(diagramType, type) {
+    super(`mermaid diagram error: ${diagramType}`);
+    this.diagramType = diagramType;
+    this.type = type;
+    this.name = "MermaidDiagramError";
+  }
+}
+const FONT_INFLATE = 1.4;
+const MERMAID_CONFIG = {
+  startOnLoad: false,
+  flowchart: { nodeSpacing: 80, rankSpacing: 80, padding: 20 },
+  state: { nodeSpacing: 80, rankSpacing: 80, padding: 20 },
+  mindmap: { padding: 20 },
+  sequence: { actorMargin: 50, noteMargin: 20 },
+  themeVariables: { fontSize: `${18 * FONT_INFLATE}px` }
+};
+async function createMermaidDiagram(editor, text, options = {}) {
+  import_mermaid.default.initialize({
+    ...MERMAID_CONFIG,
+    ...options.mermaidConfig ?? {},
+    flowchart: { ...MERMAID_CONFIG.flowchart, ...options.mermaidConfig?.flowchart },
+    state: { ...MERMAID_CONFIG.state, ...options.mermaidConfig?.state },
+    mindmap: { ...MERMAID_CONFIG.mindmap, ...options.mermaidConfig?.mindmap },
+    sequence: { ...MERMAID_CONFIG.sequence, ...options.mermaidConfig?.sequence },
+    themeVariables: { ...MERMAID_CONFIG.themeVariables, ...options.mermaidConfig?.themeVariables }
+  });
+  const parsedResult = await import_mermaid.default.parse(text, { suppressErrors: true });
+  if (!parsedResult) {
+    throw new MermaidDiagramError("not a mermaid diagram", "parse");
+  }
+  const offscreen = document.createElement("div");
+  offscreen.style.position = "absolute";
+  offscreen.style.left = "-9999px";
+  offscreen.style.top = "-9999px";
+  offscreen.style.overflow = "hidden";
+  document.body.appendChild(offscreen);
+  try {
+    const parsedSvg = (await import_mermaid.default.render(`mermaid-${nextMermaidId++}`, text, offscreen)).svg;
+    let liveSvg = offscreen.querySelector("svg");
+    if (!liveSvg) {
+      offscreen.innerHTML = parsedSvg;
+      liveSvg = offscreen.querySelector("svg");
+      if (!liveSvg) {
+        throw new MermaidDiagramError(parsedResult.diagramType, "parse");
+      }
+    }
+    const diagramResult = await import_mermaid.default.mermaidAPI.getDiagramFromText(text);
+    let blueprint;
+    switch (parsedResult.diagramType) {
+      case "flowchart-v2": {
+        const db = diagramResult.db;
+        const vertices = db.getVertices();
+        const edges = db.getEdges();
+        const subGraphs = db.getSubGraphs();
+        const classes = db.getClasses();
+        const layout = (0, import_flowchartDiagram.parseFlowchartLayout)(liveSvg);
+        blueprint = (0, import_flowchartDiagram.flowchartToBlueprint)(layout, vertices, edges, subGraphs, classes);
+        break;
+      }
+      case "sequence": {
+        const db = diagramResult.db;
+        const actors = db.getActors();
+        const actorKeys = db.getActorKeys();
+        const messages = db.getMessages();
+        const layout = (0, import_sequenceDiagram.parseSequenceLayout)(liveSvg, actorKeys.length, (0, import_sequenceDiagram.countSequenceEvents)(messages));
+        blueprint = (0, import_sequenceDiagram.sequenceToBlueprint)(
+          layout,
+          actors,
+          actorKeys,
+          messages,
+          db.getCreatedActors(),
+          db.getDestroyedActors()
+        );
+        break;
+      }
+      case "state":
+      case "stateDiagram": {
+        const db = diagramResult.db;
+        const states = db.getStates();
+        const relations = db.getRelations();
+        const classes = db.getClasses();
+        const layout = (0, import_stateDiagram.parseStateDiagramLayout)(liveSvg);
+        blueprint = (0, import_stateDiagram.stateToBlueprint)(layout, states, relations, classes);
+        break;
+      }
+      case "mindmap": {
+        const db = diagramResult.db;
+        const tree = db.getMindmap();
+        if (tree) {
+          db.assignSections(tree);
+          const layout = (0, import_mindmapDiagram.parseMindmapLayout)(liveSvg);
+          blueprint = (0, import_mindmapDiagram.mindmapToBlueprint)(layout, tree, liveSvg);
+        }
+        break;
+      }
+      default:
+        if (options.onUnsupportedDiagram) {
+          await options.onUnsupportedDiagram(parsedSvg);
+        } else {
+          throw new MermaidDiagramError(parsedResult.diagramType, "unsupported");
+        }
+        break;
+    }
+    if (blueprint) {
+      (0, import_renderBlueprint.renderBlueprint)(editor, blueprint, options.blueprintRender);
+    }
+  } catch (e) {
+    if (e instanceof MermaidDiagramError) throw e;
+    console.error(e);
+    throw new MermaidDiagramError(parsedResult.diagramType, "parse");
+  } finally {
+    offscreen.remove();
+  }
+}
+//# sourceMappingURL=createMermaidDiagram.js.map

package/dist-cjs/createMermaidDiagram.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/createMermaidDiagram.ts"],
+  "sourcesContent": ["let nextMermaidId = 0\n\nimport mermaid from 'mermaid'\nimport type { FlowDB } from 'mermaid/dist/diagrams/flowchart/flowDb.d.ts'\nimport type { FlowEdge, FlowSubGraph, FlowVertex } from 'mermaid/dist/diagrams/flowchart/types.js'\nimport type { MindmapDB } from 'mermaid/dist/diagrams/mindmap/mindmapDb.d.ts'\nimport type { SequenceDB } from 'mermaid/dist/diagrams/sequence/sequenceDb.d.ts'\nimport type { StateDB } from 'mermaid/dist/diagrams/state/stateDb.d.ts'\nimport { Editor } from 'tldraw'\nimport { flowchartToBlueprint, parseFlowchartLayout } from './flowchartDiagram'\nimport { mindmapToBlueprint, parseMindmapLayout } from './mindmapDiagram'\nimport { BlueprintRenderingOptions, renderBlueprint } from './renderBlueprint'\nimport { countSequenceEvents, parseSequenceLayout, sequenceToBlueprint } from './sequenceDiagram'\nimport { parseStateDiagramLayout, stateToBlueprint } from './stateDiagram'\n\n/** @public */\nexport class MermaidDiagramError extends Error {\n\tconstructor(\n\t\tpublic diagramType: string,\n\t\tpublic type: 'parse' | 'unsupported'\n\t) {\n\t\tsuper(`mermaid diagram error: ${diagramType}`)\n\t\tthis.name = 'MermaidDiagramError'\n\t}\n}\n\n// Inflate the font size so Mermaid's layout engine allocates larger nodes,\n// compensating for tldraw's hand-drawn font being wider than Mermaid's default.\nconst FONT_INFLATE = 1.4\n\nconst MERMAID_CONFIG = {\n\tstartOnLoad: false,\n\tflowchart: { nodeSpacing: 80, rankSpacing: 80, padding: 20 },\n\tstate: { nodeSpacing: 80, rankSpacing: 80, padding: 20 },\n\tmindmap: { padding: 20 },\n\tsequence: { actorMargin: 50, noteMargin: 20 },\n\tthemeVariables: { fontSize: `${18 * FONT_INFLATE}px` },\n}\n\n/** @public */\nexport interface MermaidDiagramOptions {\n\tmermaidConfig?: Record<string, any>\n\tblueprintRender?: BlueprintRenderingOptions\n\tonUnsupportedDiagram?(svg: string): Promise<void>\n}\n\n/**\n * Parse mermaid text and create tldraw shapes for supported diagram types.\n * Returns the SVG string for supported diagrams, or `null` when the diagram type\n * is unsupported (after calling `onUnsupportedDiagram` if provided).\n * Throws {@link MermaidDiagramError} if parsing fails.\n * @public\n */\nexport async function createMermaidDiagram(\n\teditor: Editor,\n\ttext: string,\n\toptions: MermaidDiagramOptions = {}\n): Promise<void> {\n\tmermaid.initialize({\n\t\t...MERMAID_CONFIG,\n\t\t...(options.mermaidConfig ?? {}),\n\t\tflowchart: { ...MERMAID_CONFIG.flowchart, ...options.mermaidConfig?.flowchart },\n\t\tstate: { ...MERMAID_CONFIG.state, ...options.mermaidConfig?.state },\n\t\tmindmap: { ...MERMAID_CONFIG.mindmap, ...options.mermaidConfig?.mindmap },\n\t\tsequence: { ...MERMAID_CONFIG.sequence, ...options.mermaidConfig?.sequence },\n\t\tthemeVariables: { ...MERMAID_CONFIG.themeVariables, ...options.mermaidConfig?.themeVariables },\n\t})\n\n\tconst parsedResult = await mermaid.parse(text, { suppressErrors: true })\n\n\tif (!parsedResult) {\n\t\tthrow new MermaidDiagramError('not a mermaid diagram', 'parse')\n\t}\n\n\tconst offscreen = document.createElement('div')\n\toffscreen.style.position = 'absolute'\n\toffscreen.style.left = '-9999px'\n\toffscreen.style.top = '-9999px'\n\toffscreen.style.overflow = 'hidden'\n\tdocument.body.appendChild(offscreen)\n\n\ttry {\n\t\tconst parsedSvg = (await mermaid.render(`mermaid-${nextMermaidId++}`, text, offscreen)).svg\n\n\t\t// Reuse the live SVG that mermaid.render() already mounted into the\n\t\t// offscreen container.  This avoids a second DOM mount and ensures\n\t\t// getBBox() works for every diagram type (state diagrams in particular\n\t\t// lack explicit dimension attributes and rely on live layout).\n\t\tlet liveSvg = offscreen.querySelector('svg')\n\n\t\tif (!liveSvg) {\n\t\t\toffscreen.innerHTML = parsedSvg\n\t\t\tliveSvg = offscreen.querySelector('svg')\n\t\t\tif (!liveSvg) {\n\t\t\t\tthrow new MermaidDiagramError(parsedResult.diagramType, 'parse')\n\t\t\t}\n\t\t}\n\n\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\tconst diagramResult = await mermaid.mermaidAPI.getDiagramFromText(text)\n\n\t\tlet blueprint\n\t\tswitch (parsedResult.diagramType) {\n\t\t\tcase 'flowchart-v2': {\n\t\t\t\tconst db = diagramResult.db as FlowDB\n\t\t\t\tconst vertices = db.getVertices() as Map<string, FlowVertex>\n\t\t\t\tconst edges = db.getEdges() as FlowEdge[]\n\t\t\t\tconst subGraphs = db.getSubGraphs() as FlowSubGraph[]\n\t\t\t\tconst classes = db.getClasses()\n\t\t\t\tconst layout = parseFlowchartLayout(liveSvg)\n\t\t\t\tblueprint = flowchartToBlueprint(layout, vertices, edges, subGraphs, classes)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'sequence': {\n\t\t\t\tconst db = diagramResult.db as SequenceDB\n\t\t\t\tconst actors = db.getActors()\n\t\t\t\tconst actorKeys = db.getActorKeys()\n\t\t\t\tconst messages = db.getMessages()\n\t\t\t\tconst layout = parseSequenceLayout(liveSvg, actorKeys.length, countSequenceEvents(messages))\n\t\t\t\tblueprint = sequenceToBlueprint(\n\t\t\t\t\tlayout,\n\t\t\t\t\tactors,\n\t\t\t\t\tactorKeys,\n\t\t\t\t\tmessages,\n\t\t\t\t\tdb.getCreatedActors(),\n\t\t\t\t\tdb.getDestroyedActors()\n\t\t\t\t)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'state':\n\t\t\tcase 'stateDiagram': {\n\t\t\t\tconst db = diagramResult.db as StateDB\n\t\t\t\tconst states = db.getStates()\n\t\t\t\tconst relations = db.getRelations()\n\t\t\t\tconst classes = db.getClasses()\n\t\t\t\tconst layout = parseStateDiagramLayout(liveSvg)\n\t\t\t\tblueprint = stateToBlueprint(layout, states, relations, classes)\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tcase 'mindmap': {\n\t\t\t\tconst db = diagramResult.db as MindmapDB\n\t\t\t\tconst tree = db.getMindmap()\n\t\t\t\tif (tree) {\n\t\t\t\t\tdb.assignSections(tree)\n\t\t\t\t\tconst layout = parseMindmapLayout(liveSvg)\n\t\t\t\t\tblueprint = mindmapToBlueprint(layout, tree, liveSvg)\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t\t}\n\t\t\tdefault:\n\t\t\t\tif (options.onUnsupportedDiagram) {\n\t\t\t\t\tawait options.onUnsupportedDiagram(parsedSvg)\n\t\t\t\t} else {\n\t\t\t\t\tthrow new MermaidDiagramError(parsedResult.diagramType, 'unsupported')\n\t\t\t\t}\n\t\t\t\tbreak\n\t\t}\n\n\t\tif (blueprint) {\n\t\t\trenderBlueprint(editor, blueprint, options.blueprintRender)\n\t\t}\n\t} catch (e) {\n\t\tif (e instanceof MermaidDiagramError) throw e\n\t\tconsole.error(e)\n\t\tthrow new MermaidDiagramError(parsedResult.diagramType, 'parse')\n\t} finally {\n\t\toffscreen.remove()\n\t}\n}\n"],
+  "mappings": "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",
+  "names": ["mermaid"]
+}