@tldraw/mermaid 5.2.0-next.e2b8d10bf10e → 5.2.0

package/src/mindmapDiagram.ts

@@ -65,7 +65,7 @@ export interface ParsedMindmapLayout {
 }
 
 function parseMindmapNodeId(domId: string): string {
-	const match = domId.match(/^node_(\d+)$/)
+	const match = domId.match(/^(?:mermaid-\d+-)?node_(\d+)$/)
 	return match ? match[1] : domId
 }
 

package/src/sequenceDiagram.ts

@@ -63,6 +63,25 @@ const LINETYPE = {
 	PAR_OVER_START: 32,
 	BIDIRECTIONAL_SOLID: 33,
 	BIDIRECTIONAL_DOTTED: 34,
+	SOLID_TOP: 41,
+	SOLID_BOTTOM: 42,
+	STICK_TOP: 43,
+	STICK_BOTTOM: 44,
+	SOLID_ARROW_TOP_REVERSE: 45,
+	SOLID_ARROW_BOTTOM_REVERSE: 46,
+	STICK_ARROW_TOP_REVERSE: 47,
+	STICK_ARROW_BOTTOM_REVERSE: 48,
+	SOLID_TOP_DOTTED: 51,
+	SOLID_BOTTOM_DOTTED: 52,
+	STICK_TOP_DOTTED: 53,
+	STICK_BOTTOM_DOTTED: 54,
+	SOLID_ARROW_TOP_REVERSE_DOTTED: 55,
+	SOLID_ARROW_BOTTOM_REVERSE_DOTTED: 56,
+	STICK_ARROW_TOP_REVERSE_DOTTED: 57,
+	STICK_ARROW_BOTTOM_REVERSE_DOTTED: 58,
+	CENTRAL_CONNECTION: 59,
+	CENTRAL_CONNECTION_REVERSE: 60,
+	CENTRAL_CONNECTION_DUAL: 61,
 } as const satisfies SequenceDB['LINETYPE']
 
 const PLACEMENT = {

package/src/stateDiagram.ts

@@ -229,14 +229,21 @@ const FRAME_TOP = 54
 
 /** Parse state-diagram SVG layout data for use by {@link stateToBlueprint}. */
 export function parseStateDiagramLayout(root: Element): ParsedDiagramLayout {
+	// Mermaid 11.15 prefixes node and cluster dom ids with the diagram id (e.g.
+	// `mermaid-0-state-Foo-1` instead of `state-Foo-1`), so tolerate that
+	// optional `mermaid-<n>-` prefix when reading the clean id.
 	const nodes = parseNodesFromSvg(
 		root,
 		'.node',
-		(domId) => domId.match(/^state-(.+)-\d+$/)?.[1] ?? domId
+		(domId) => domId.match(/^(?:mermaid-\d+-)?state-(.+)-\d+$/)?.[1] ?? domId
+	)
+	const clusters = parseClustersFromSvg(
+		root,
+		'.statediagram-cluster',
+		(domId) => domId.match(/^(?:mermaid-\d+-)?state-(.+)-\d+$/)?.[1] ?? domId
 	)
-	const clusters = parseClustersFromSvg(root, '.statediagram-cluster')
 	const edges = parseAllEdgePointsFromSvg(root, (dataId) =>
-		/^edge\d+$/.test(dataId) ? { start: '', end: '' } : null
+		/(?:^|-)edge\d+$/.test(dataId) ? { start: '', end: '' } : null
 	)
 	scaleLayout(nodes, clusters, edges, LAYOUT_SCALE)
 	return { nodes, clusters, edges }

package/src/svgParsing.test.ts

@@ -0,0 +1,58 @@
+import { parseFlowchartLayout } from './flowchartDiagram'
+import { parseStateDiagramLayout } from './stateDiagram'
+
+function svgFromString(markup: string): SVGSVGElement {
+	const container = document.createElement('div')
+	container.innerHTML = markup
+	return container.querySelector('svg') as unknown as SVGSVGElement
+}
+
+// Regression for the mermaid 11.15 upgrade: every rendered element id gained a
+// `<svgId>-` prefix, which broke the node/cluster id parsers and produced empty
+// diagrams (and therefore failed exports). The parsers must resolve bare ids
+// across mermaid versions.
+describe('layout parsing tolerates mermaid >= 11.15 prefixed ids', () => {
+	it('parses flowchart nodes and clusters', () => {
+		const svg = svgFromString(`
+			<svg id="mermaid-0">
+				<g class="cluster" id="mermaid-0-Frontend" transform="translate(0,0)">
+					<rect x="0" y="0" width="200" height="160" />
+				</g>
+				<g class="node" id="mermaid-0-flowchart-A-0" transform="translate(50,40)">
+					<rect width="80" height="40" />
+				</g>
+			</svg>
+		`)
+		const layout = parseFlowchartLayout(svg)
+		expect([...layout.nodes.keys()]).toEqual(['A'])
+		expect([...layout.clusters.keys()]).toEqual(['Frontend'])
+	})
+
+	it('parses state nodes and clusters', () => {
+		const svg = svgFromString(`
+			<svg id="mermaid-1">
+				<g class="statediagram-cluster" id="mermaid-1-state-Active-4" transform="translate(0,0)">
+					<rect x="0" y="0" width="240" height="180" />
+				</g>
+				<g class="node" id="mermaid-1-state-Idle-3" transform="translate(30,30)">
+					<rect width="60" height="30" />
+				</g>
+			</svg>
+		`)
+		const layout = parseStateDiagramLayout(svg)
+		expect([...layout.nodes.keys()]).toEqual(['Idle'])
+		expect([...layout.clusters.keys()]).toEqual(['Active'])
+	})
+
+	it('still parses bare ids from older mermaid versions', () => {
+		const svg = svgFromString(`
+			<svg>
+				<g class="node" id="flowchart-A-0" transform="translate(50,40)">
+					<rect width="80" height="40" />
+				</g>
+			</svg>
+		`)
+		const layout = parseFlowchartLayout(svg)
+		expect([...layout.nodes.keys()]).toEqual(['A'])
+	})
+})

package/src/svgParsing.ts

@@ -124,10 +124,14 @@ export function parseNodesFromSvg(
 	return out
 }
 
-export function parseClustersFromSvg(root: Element, selector: string): Map<string, ParsedCluster> {
+export function parseClustersFromSvg(
+	root: Element,
+	selector: string,
+	idParser: NodeIdParser = (id) => id
+): Map<string, ParsedCluster> {
 	const out = new Map<string, ParsedCluster>()
 	for (const groupEl of root.querySelectorAll(selector)) {
-		const id = groupEl.getAttribute('id') || ''
+		const id = idParser(groupEl.getAttribute('id') || '')
 		const rect = groupEl.querySelector('rect')
 		if (!rect) continue
 		const rx = parseFloat(rect.getAttribute('x') || '0')