-
-
+
+
`.trim()
}
@@ -102,7 +134,6 @@ function setMermaidActionsState(block: HTMLElement, payload: MermaidImagePayload
}
if (action === 'download') {
- node.textContent = 'Download PNG'
if (payload) {
node.removeAttribute('disabled')
node.setAttribute('data-mermaid-url', payload.downloadUrl || payload.previewUrl)
@@ -130,6 +161,7 @@ function setMermaidActionsState(block: HTMLElement, payload: MermaidImagePayload
}
function getSvgSize(svg: string) {
+ // 优先读取 viewBox (取第三、四个值作为宽高)
const viewBox = svg.match(/viewBox\s*=\s*["']\s*[-\d.]+\s+[-\d.]+\s+([-\d.]+)\s+([-\d.]+)\s*["']/i)
if (viewBox) {
const width = Number(viewBox[1])
@@ -139,14 +171,16 @@ function getSvgSize(svg: string) {
}
}
- const widthAttr = svg.match(/width\s*=\s*["']([-\d.]+)(px)?["']/i)
- const heightAttr = svg.match(/height\s*=\s*["']([-\d.]+)(px)?["']/i)
- const width = widthAttr ? Number(widthAttr[1]) : 960
- const height = heightAttr ? Number(heightAttr[1]) : 540
- return {
- width: Number.isFinite(width) && width > 0 ? width : 960,
- height: Number.isFinite(height) && height > 0 ? height : 540,
+ // 次选读取数字像素属性
+ const widthAttr = svg.match(/\bwidth\s*=\s*["']([\d.]+)(?:px)?["']/i)
+ const heightAttr = svg.match(/\bheight\s*=\s*["']([\d.]+)(?:px)?["']/i)
+ const attrW = widthAttr ? Number(widthAttr[1]) : 0
+ const attrH = heightAttr ? Number(heightAttr[1]) : 0
+ if (attrW > 0 && attrH > 0) {
+ return { width: attrW, height: attrH }
}
+
+ return { width: 960, height: 540 }
}
function svgToDataUrl(svg: string) {
@@ -159,6 +193,38 @@ function stripExternalSvgResources(svg: string) {
.replace(/url\(\s*["']?https?:\/\/[^"')]*["']?\s*\)/gi, 'none')
}
+/** 给 SVG viewBox 四周加 padding，同步更新 width/height 并注入字体样式防止截断 */
+function padSvgViewBox(svg: string, pad = 48): string {
+ let result = svg
+
+ // 注入显式字体样式，确保测量与渲染一致
+ const styleInject = `
+`
+ if (result.includes('')) {
+ result = result.replace('', ` svg { font-family: 'Inter', system-ui, sans-serif !important; }\n .node text, .edgeLabel text { font-family: 'Inter', system-ui, sans-serif !important; }\n`)
+ } else {
+ result = result.replace(/>/, `>${styleInject}`)
+ }
+
+ // 匹配 viewBox
+ const vbMatch = result.match(/viewBox\s*=\s*["']\s*([-\d.]+)\s+([-\d.]+)\s+([-\d.]+)\s+([-\d.]+)\s*["']/i)
+ if (vbMatch) {
+ const x = parseFloat(vbMatch[1]) - pad
+ const y = parseFloat(vbMatch[2]) - pad
+ const w = parseFloat(vbMatch[3]) + pad * 2
+ const h = parseFloat(vbMatch[4]) + pad * 2
+ result = result.replace(vbMatch[0], `viewBox="${x} ${y} ${w} ${h}"`)
+
+ // 覆盖外层 width/height 为实际像素值
+ result = result.replace(/\bwidth\s*=\s*["'][^"']*["']/i, `width="${w}"`)
+ result = result.replace(/\bheight\s*=\s*["'][^"']*["']/i, `height="${h}"`)
+ }
+ return result
+}
+
function getRasterDpr(width: number, height: number) {
const rawDpr = typeof window !== 'undefined' ? window.devicePixelRatio || 1 : 1
const baseDpr = Math.min(3, Math.max(1, rawDpr))
@@ -196,7 +262,8 @@ async function rasterizeSvgToPngDataUrl(svg: string, width: number, height: numb
}
async function svgToImageDataUrl(svg: string): Promise