Text clipping

[liu-huitao]

Description

The SVG graphic obtained by executing the following method has text clipping issues：
const { svg, bindFunctions } = await mermaid.render(id, code);
As shown below:

Steps to reproduce

import elkLayouts from "@mermaid-js/layout-elk";
import zenuml from "@mermaid-js/mermaid-zenuml";
import mermaid from "mermaid";
mermaid.registerLayoutLoaders(elkLayouts);

const initMermaid = mermaid.registerExternalDiagrams([zenuml]);

const compileMermaid = async (code: string) => {
	const compiledContainer = document.querySelector(`.compiled-container`) as HTMLDivElement;
	await initMermaid;
	// Initialize mermaid with the global configuration (optional)
	mermaid.initialize({
		// securityLevel: "loose",
		startOnLoad: false, // Automatically render on page load
		theme: "default" // Example theme
		// logLevel: "warn"
		// htmlLabels: false
	});
	// Render the diagram
	try {
		const id = _uniqueId("mermaid-");
		await mermaid.parse(code);
		const { svg, bindFunctions } = await mermaid.render(id, code);
		if (svg.length > 0) {
			compiledContainer.innerHTML = `
			<div class="mermaid-view-wrapper" id="${id}">${svg as any}</div>
			`;

			const graphDiv = document.querySelector<SVGSVGElement>(`#${id}`);
			if (!graphDiv) {
				throw new Error(`${id} not found`);
			}

			graphDiv.setAttribute("height", "100%");
			graphDiv.style.maxWidth = "100%";
			if (bindFunctions) {
				bindFunctions(graphDiv);
			}
		}
	} catch (error) {
		throw error;
	}
};

Screenshots

No response

Code Sample

No response

Setup

• Mermaid version:
• Browser and Version: [Chrome, Edge, Firefox]

Suggested Solutions

No response

Additional Context

No response