@tldraw/mermaid 4.6.0-internal.c7df3c92455a

package/src/createMermaidDiagram.ts

@@ -0,0 +1,155 @@
+let nextMermaidId = 0
+
+import mermaid from 'mermaid'
+import type { FlowDB } from 'mermaid/dist/diagrams/flowchart/flowDb.d.ts'
+import type { FlowEdge, FlowSubGraph, FlowVertex } from 'mermaid/dist/diagrams/flowchart/types.js'
+import type { SequenceDB } from 'mermaid/dist/diagrams/sequence/sequenceDb.d.ts'
+import type { StateDB } from 'mermaid/dist/diagrams/state/stateDb.d.ts'
+import { Editor } from 'tldraw'
+import { flowchartToBlueprint, parseFlowchartLayout } from './flowchartDiagram'
+import { BlueprintRenderingOptions, renderBlueprint } from './renderBlueprint'
+import { countSequenceEvents, parseSequenceLayout, sequenceToBlueprint } from './sequenceDiagram'
+import { parseStateDiagramLayout, stateToBlueprint } from './stateDiagram'
+
+/** @public */
+export class MermaidDiagramError extends Error {
+	constructor(
+		public diagramType: string,
+		public type: 'parse' | 'unsupported'
+	) {
+		super(`mermaid diagram error: ${diagramType}`)
+		this.name = 'MermaidDiagramError'
+	}
+}
+
+// Inflate the font size so Mermaid's layout engine allocates larger nodes,
+// compensating for tldraw's hand-drawn font being wider than Mermaid's default.
+const FONT_INFLATE = 1.4
+
+const MERMAID_CONFIG = {
+	startOnLoad: false,
+	flowchart: { nodeSpacing: 80, rankSpacing: 80, padding: 20 },
+	state: { nodeSpacing: 80, rankSpacing: 80, padding: 20 },
+	sequence: { actorMargin: 50, noteMargin: 20 },
+	themeVariables: { fontSize: `${18 * FONT_INFLATE}px` },
+}
+
+/** @public */
+export interface MermaidDiagramOptions {
+	mermaidConfig?: Record<string, any>
+	blueprintRender?: BlueprintRenderingOptions
+	onUnsupportedDiagram?(svg: string): Promise<void>
+}
+
+/**
+ * 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 async function createMermaidDiagram(
+	editor: Editor,
+	text: string,
+	options: MermaidDiagramOptions = {}
+): Promise<void> {
+	mermaid.initialize({
+		...MERMAID_CONFIG,
+		...(options.mermaidConfig ?? {}),
+		flowchart: { ...MERMAID_CONFIG.flowchart, ...options.mermaidConfig?.flowchart },
+		state: { ...MERMAID_CONFIG.state, ...options.mermaidConfig?.state },
+		sequence: { ...MERMAID_CONFIG.sequence, ...options.mermaidConfig?.sequence },
+		themeVariables: { ...MERMAID_CONFIG.themeVariables, ...options.mermaidConfig?.themeVariables },
+	})
+
+	const parsedResult = await mermaid.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 mermaid.render(`mermaid-${nextMermaidId++}`, text, offscreen)).svg
+
+		// Reuse the live SVG that mermaid.render() already mounted into the
+		// offscreen container.  This avoids a second DOM mount and ensures
+		// getBBox() works for every diagram type (state diagrams in particular
+		// lack explicit dimension attributes and rely on live layout).
+		let liveSvg = offscreen.querySelector('svg')
+
+		if (!liveSvg) {
+			offscreen.innerHTML = parsedSvg
+			liveSvg = offscreen.querySelector('svg')
+			if (!liveSvg) {
+				throw new MermaidDiagramError(parsedResult.diagramType, 'parse')
+			}
+		}
+
+		// eslint-disable-next-line @typescript-eslint/no-deprecated
+		const diagramResult = await mermaid.mermaidAPI.getDiagramFromText(text)
+
+		let blueprint
+		switch (parsedResult.diagramType) {
+			case 'flowchart-v2': {
+				const db = diagramResult.db as FlowDB
+				const vertices = db.getVertices() as Map<string, FlowVertex>
+				const edges = db.getEdges() as FlowEdge[]
+				const subGraphs = db.getSubGraphs() as FlowSubGraph[]
+				const classes = db.getClasses()
+				const layout = parseFlowchartLayout(liveSvg)
+				blueprint = flowchartToBlueprint(layout, vertices, edges, subGraphs, classes)
+				break
+			}
+			case 'sequence': {
+				const db = diagramResult.db as SequenceDB
+				const actors = db.getActors()
+				const actorKeys = db.getActorKeys()
+				const messages = db.getMessages()
+				const layout = parseSequenceLayout(liveSvg, actorKeys.length, countSequenceEvents(messages))
+				blueprint = sequenceToBlueprint(
+					layout,
+					actors,
+					actorKeys,
+					messages,
+					db.getCreatedActors(),
+					db.getDestroyedActors()
+				)
+				break
+			}
+			case 'state':
+			case 'stateDiagram': {
+				const db = diagramResult.db as StateDB
+				const states = db.getStates()
+				const relations = db.getRelations()
+				const classes = db.getClasses()
+				const layout = parseStateDiagramLayout(liveSvg)
+				blueprint = stateToBlueprint(layout, states, relations, classes)
+				break
+			}
+			default:
+				if (options.onUnsupportedDiagram) {
+					await options.onUnsupportedDiagram(parsedSvg)
+				} else {
+					throw new MermaidDiagramError(parsedResult.diagramType, 'unsupported')
+				}
+				break
+		}
+
+		if (blueprint) {
+			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()
+	}
+}

package/src/flowchartDiagram.ts

@@ -0,0 +1,232 @@
+import type {
+	FlowClass,
+	FlowEdge,
+	FlowSubGraph,
+	FlowVertex,
+} from 'mermaid/dist/diagrams/flowchart/types.js'
+import { TLArrowShapeArrowheadStyle, TLDefaultDashStyle, TLGeoShape } from 'tldraw'
+import type {
+	DiagramMermaidBlueprint,
+	MermaidBlueprintEdge,
+	MermaidBlueprintGeoNode,
+} from './blueprint'
+import { buildClassDefColorMap, parseCssStyles, parseNodeInlineColor } from './colors'
+import {
+	buildNodeCentersFromSvg,
+	parseAllEdgePointsFromSvg,
+	parseClustersFromSvg,
+	type ParsedDiagramLayout,
+	parseNodesFromSvg,
+	scaleLayout,
+} from './svgParsing'
+import { getArrowBend, LAYOUT_SCALE, orderTopDown } from './utils'
+
+function mapEdgeTypeToArrowhead(type: string | undefined): TLArrowShapeArrowheadStyle {
+	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: string | undefined): TLGeoShape['props']['geo'] {
+	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: string | undefined): TLDefaultDashStyle {
+	if (!stroke) return 'solid'
+	if (stroke === 'dotted') return 'dotted'
+	return 'solid'
+}
+
+const FRAME_TOP_PAD = 14
+
+function buildHierarchy(subGraphs: FlowSubGraph[]) {
+	const subGraphIds = new Set(subGraphs.map((subGraph) => subGraph.id))
+	const nodeToSubGraph = new Map<string, string>()
+	const subGraphParent = new Map<string, string>()
+	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 }
+}
+
+/** Parse flowchart-specific SVG layout data for use by {@link flowchartToBlueprint}. */
+export function parseFlowchartLayout(root: Element): ParsedDiagramLayout {
+	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 }
+}
+
+/** Convert a parsed Mermaid flowchart into a tldraw blueprint of nodes and edges. */
+export function flowchartToBlueprint(
+	layout: ParsedDiagramLayout,
+	vertices: Map<string, FlowVertex>,
+	edges: FlowEdge[],
+	subGraphs?: FlowSubGraph[],
+	classDefs?: Map<string, FlowClass>
+): DiagramMermaidBlueprint {
+	const nodeColorMap = classDefs ? buildClassDefColorMap(classDefs, vertices) : 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: MermaidBlueprintGeoNode[] = []
+	const blueprintEdges: MermaidBlueprintEdge[] = []
+
+	// Frames for subgraphs
+	for (const subGraph of orderTopDown(
+		allSubGraphs,
+		(subGraph) => subGraph.id,
+		(subGraph) => subGraphParent.get(subGraph.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',
+		})
+	}
+
+	// Node shapes
+	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 || undefined,
+			...(colors?.fillColor && { fill: 'solid' as const }),
+			...(colors && { color: colors.strokeColor ?? colors.fillColor }),
+			align: 'middle',
+			verticalAlign: 'middle',
+			size: 'm',
+		} satisfies MermaidBlueprintGeoNode)
+	}
+
+	// Edges: match DB edges to SVG edges by proximity, compute bends
+	const claimed = new Set<number>()
+	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) : undefined
+		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 : undefined,
+			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 }
+}

package/src/index.ts

@@ -0,0 +1,18 @@
+import { registerTldrawLibraryVersion } from '@tldraw/utils'
+
+export type {
+	DiagramMermaidBlueprint,
+	MermaidBlueprintEdge,
+	MermaidBlueprintGeoNode,
+	MermaidBlueprintLineNode,
+} from './blueprint'
+export { createMermaidDiagram, MermaidDiagramError } from './createMermaidDiagram'
+export type { MermaidDiagramOptions } from './createMermaidDiagram'
+export { renderBlueprint } from './renderBlueprint'
+export type { BlueprintRenderingOptions } from './renderBlueprint'
+
+registerTldrawLibraryVersion(
+	(globalThis as any).TLDRAW_LIBRARY_NAME,
+	(globalThis as any).TLDRAW_LIBRARY_VERSION,
+	(globalThis as any).TLDRAW_LIBRARY_MODULES
+)