/gi, '\n');
// 2. 移除所有 HTML 标签，但保留内容
rawCode = rawCode.replace(/<[^>]+>/g, '');
// 3. 移除零宽字符和特殊空白字符
rawCode = rawCode.replace(/[\u200B-\u200D\uFEFF]/g, '');
// 4. 统一换行符为 \n
rawCode = rawCode.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
// 5. 移除多余的空行（超过2个连续换行）
rawCode = rawCode.replace(/\n{3,}/g, '\n\n');
// 6. 移除每行首尾空白，但保持缩进结构
rawCode = rawCode.split('\n').map(line => line.trimEnd()).join('\n');
// 7. **关键修正：处理节点标签内的多行文本**
// Mermaid 不支持 [...] 内的换行符，需要将多行标签转为单行
rawCode = rawCode.replace(/([A-Za-z0-9_]+)\[([^\]]+)\]/g, (match, nodeId, labelContent) => {
// 将标签内的换行替换为空格
let cleanLabel = labelContent.replace(/\n+/g, ' ');
// 压缩多余空格
cleanLabel = cleanLabel.replace(/\s+/g, ' ').trim();
// **替换特殊符号为全角（避免 Mermaid 解析错误）**
cleanLabel = cleanLabel
.replace(/\[/g, '［') // 方括号左
.replace(/\]/g, '］') // 方括号右
.replace(/\(/g, '（')
.replace(/\)/g, '）')
.replace(/\|/g, '｜');
// 限制标签长度（最多80字符）
if (cleanLabel.length > 80) {
cleanLabel = cleanLabel.substring(0, 77) + '...';
}
return `${nodeId}[${cleanLabel}]`;
});
// 8. 修正常见的语法错误
// 8.1 修正箭头语法（-- > 改为 -->）
rawCode = rawCode.replace(/--\s+>/g, '-->');
rawCode = rawCode.replace(/<\s+--/g, '<--');
// 8.2 修正节点定义后多余的节点名（A[text]A --> B 改为 A[text] --> B）
// 必须在 8.3 之前执行，避免误判
// 匹配：节点ID + [ + 内容(可能包含全角］) + ] + 重复的节点ID
rawCode = rawCode.replace(/([A-Za-z0-9_]+)\[([^\]]*(?:］[^\]]*)*)\]\1(?=\s|$)/g, '$1[$2]');
// 8.3 修正节点定义后缺少空格的问题（]D --> 改为 ]\nD -->）
// 只处理半角右括号后紧跟字母的情况
rawCode = rawCode.replace(/\]([A-Za-z0-9_]+)(\s+-->)/g, ']\n$1$2');
rawCode = rawCode.replace(/\]([A-Za-z0-9_]+)(\s*$)/gm, ']\n$1');
// 8.4 修复缺少箭头的节点连接
// 修复菱形节点缺少结束花括号的情况（如 J{文本 K[...] 改为 J{文本} --> K[...]）
rawCode = rawCode.replace(/\{([^}]*?)\s{2,}([A-Z][A-Za-z0-9_]*)\[/g, '{$1} --> $2[');
// 修复 } [ 或 }[ 的情况（菱形节点后缺少箭头）
rawCode = rawCode.replace(/\}(\s{2,}|\s*)\[/g, '} --> [');
// 修复 ] [ 的情况（方括号节点后缺少箭头，至少2个空格）
rawCode = rawCode.replace(/\](\s{2,})\[/g, '] --> [');
// 修复 ) [ 的情况（圆括号节点后缺少箭头）
rawCode = rawCode.replace(/\)(\s{2,})\[/g, ') --> [');
// 8.5 移除空的 graph 声明
rawCode = rawCode.replace(/^\s*graph\s*$/gim, '');
// 9. 修正 subgraph 语法
rawCode = rawCode.replace(/^\s*subgraph\s+([^\n]+)$/gm, (match, name) => {
// 移除 subgraph 名称中的括号内容
let cleanName = name.replace(/\([^\)]*\)/g, '').trim();
// 移除逗号和句号
cleanName = cleanName.replace(/[.,，。]/g, '');
// 压缩多余空格
cleanName = cleanName.replace(/\s+/g, ' ');
return cleanName ? `subgraph ${cleanName}` : 'subgraph';
});
// 10. 修正 class 语句语法（移除多余的 class 关键字）
// 例如：class A,B,C class stage1 → class A,B,C stage1
rawCode = rawCode.replace(/^\s*class\s+([A-Za-z0-9_,\s]+)\s+class\s+([A-Za-z0-9_]+)\s*$/gm, 'class $1 $2');
// 11. Trim 最终结果
rawCode = rawCode.trim();
// 选择父节点（兼容 pre > code 或单独 code）
let parent;
try {
parent = block.parentElement.tagName === 'PRE' ? block.parentElement : block;
} catch (e) {
parent = block; // 兜底
}
const code = rawCode;
currentCodeForError = code;
// 创建 Mermaid 渲染容器
const mermaidDiv = document.createElement('div');
// 生成绝对唯一的 ID（使用时间戳 + 索引 + 随机数 + 性能计时器）
const uniqueId = `mermaid-${Date.now()}-${idx}-${Math.floor(Math.random()*100000)}-${Math.floor(performance.now()*1000)}`;
mermaidDiv.className = 'mermaid';
mermaidDiv.id = uniqueId;
mermaidDiv.setAttribute('data-mermaid-index', idx.toString());
// 卡片样式
mermaidDiv.style.background = 'var(--chatbot-bg, #fff)';
mermaidDiv.style.borderRadius = '12px';
mermaidDiv.style.boxShadow = '0 2px 8px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03)';
mermaidDiv.style.padding = '20px';
mermaidDiv.style.position = 'relative';
mermaidDiv.style.width = 'fit-content';
mermaidDiv.style.maxWidth = '100%';
mermaidDiv.style.margin = '12px auto';
mermaidDiv.textContent = code;
// 检查内容有效性
const codeTrimmed = code.replace(/\s+/g, '');
if (!codeTrimmed || /^graph(TD|LR|RL|BT|TB)?$/i.test(codeTrimmed)) {
mermaidDiv.innerHTML = '无有效Mermaid内容
';
parent.replaceWith(mermaidDiv);
return;
}
// 记录上一次渲染成功的 SVG（用于回退）
let lastSVG = null;
if (parent.id && parent.id.startsWith('mermaid-') && parent.querySelector('svg')) {
lastSVG = parent.querySelector('svg').cloneNode(true);
} else if (parent.firstElementChild && parent.firstElementChild.id && parent.firstElementChild.id.startsWith('mermaid-') && parent.firstElementChild.querySelector('svg')){
lastSVG = parent.firstElementChild.querySelector('svg').cloneNode(true);
}
// 用新的 mermaidDiv 替换原代码块
parent.replaceWith(mermaidDiv);
try {
// 使用 mermaid.init 渲染 SVG
await window.mermaid.init(undefined, '#' + uniqueId);
// 渲染成功，清除错误边框
mermaidDiv.style.border = '';
const existingWarning = mermaidDiv.querySelector('.mermaid-render-warning');
if (existingWarning) existingWarning.remove();
// 添加按钮
addMermaidButtons(mermaidDiv, currentCodeForError);
} catch (renderError) {
/**
* Mermaid 渲染失败处理（增强版）：
* 1. 自动尝试多级修正（无需 data-mermaid-final 标记）
* 2. 若修正成功则渲染，否则继续下一个修正
* 3. 若所有修正都失败，显示详细错误信息
* 4. 若有上一次成功 SVG，可回退显示
*/
console.warn('Mermaid 初次渲染失败，尝试自动修正...', renderError);
// 增强的修正函数集合（从最保守到最激进）
const mermaidFixers = [
// 修正0a: 修复缺少箭头的节点连接（如 J{text} K[text] 改为 J{text} --> K[text]）
code => {
// 修复菱形节点缺少结束花括号的情况
code = code.replace(/\{([^}]*?)\s{2,}([A-Z][A-Za-z0-9_]*)\[/g, '{$1} --> $2[');
// 修复 } [ 或 }[ 的情况（菱形节点后缺少箭头）
code = code.replace(/\}(\s{2,}|\s*)\[/g, '} --> [');
// 修复 ] [ 的情况（方括号节点后缺少箭头）
code = code.replace(/\](\s{2,})\[/g, '] --> [');
// 修复 ) [ 的情况（圆括号节点后缺少箭头）
code = code.replace(/\)(\s{2,})\[/g, ') --> [');
return code;
},
// 修正0b: 处理节点标签中的括号、方括号和管道符（最常见问题）
code => {
return code.replace(/\[([^\]]+)\]/g, (match, labelContent) => {
let cleanLabel = labelContent
.replace(/\[/g, '［') // 方括号左
.replace(/\]/g, '］') // 方括号右
.replace(/\(/g, '（')
.replace(/\)/g, '）')
.replace(/\|/g, '｜');
return `[${cleanLabel}]`;
});
},
// 修正1: 处理多行文本和长度限制
code => {
return code.replace(/\[([^\]]+)\]/g, (match, labelContent) => {
let cleanLabel = labelContent.replace(/\n+/g, ' ').replace(/\s+/g, ' ').trim();
if (cleanLabel.length > 60) {
cleanLabel = cleanLabel.substring(0, 57) + '...';
}
return `[${cleanLabel}]`;
});
},
// 修正2: 修正常见的引号问题
code => {
return code.replace(/["']/g, '');
},
// 修正3: 将节点标签中的斜杠替换为全角
code => {
return code.replace(/\[([^\]]*)\]/g, match => match.replace(/\//g, '／'));
},
// 修正4: 移除节点标签中的冒号和破折号
code => {
return code.replace(/\[([^\]]*)\]/g, match => match.replace(/[:\-]/g, ''));
},
// 修正5: 将所有特殊符号替换为全角或空格
code => {
return code.replace(/\[([^\]]*)\]/g, match => {
return match
.replace(/\(/g, '（')
.replace(/\)/g, '）')
.replace(/\|/g, '｜')
.replace(//g, '＞')
.replace(/\{/g, '｛')
.replace(/\}/g, '｝');
});
},
// 修正6: 极端修正 - 只保留节点内的中英文、数字和常见符号
code => {
return code.replace(/\[([^\]]*)\]/g, match => {
return match.replace(/[^\u4e00-\u9fa5a-zA-Z0-9\[\]\s\.]/g, '');
});
},
// 修正7: 最激进 - 简化所有节点名称为纯文本
code => {
return code.replace(/\[([^\]]*)\]/g, match => {
const inner = match.slice(1, -1).trim();
// 只保留前20个字符
return '[' + inner.substring(0, 20).replace(/[^\u4e00-\u9fa5a-zA-Z0-9\s]/g, '') + ']';
});
}
];
let fixSuccess = false;
let successfulCode = null;
for (let i = 0; i < mermaidFixers.length && !fixSuccess; i++) {
try {
const fixedCode = mermaidFixers[i](code);
if (fixedCode === code) continue; // 跳过没有改变的修正
// 重新设置 mermaid div 内容
mermaidDiv.textContent = fixedCode;
await window.mermaid.init(undefined, '#' + uniqueId);
// 验证 SVG 是否真正生成
const svgElement = mermaidDiv.querySelector('svg');
if (!svgElement) {
console.warn(`修正器 ${i + 1} 执行完成但未生成 SVG`);
continue; // 未生成 SVG，尝试下一个修正器
}
// 修正成功！
fixSuccess = true;
successfulCode = fixedCode;
console.log(`Mermaid 修正成功 (修正器 ${i + 1})`, fixedCode);
// 清除错误边框
mermaidDiv.style.border = '';
// 显示警告提示
const warningDiv = document.createElement('div');
warningDiv.className = 'mermaid-auto-fix-warning';
warningDiv.style.cssText = `
color: #d97706;
font-size: 12px;
background: #fef3c7;
border: 1px solid #fcd34d;
border-radius: 6px;
padding: 8px 12px;
margin-top: 12px;
text-align: center;
`;
warningDiv.innerHTML = `
⚠️ 已自动修正语法
原始代码存在语法问题，已应用修正器 ${i + 1} 进行渲染
`;
mermaidDiv.appendChild(warningDiv);
// 更新 currentCodeForError 为修正后的代码
currentCodeForError = fixedCode;
// 添加按钮
addMermaidButtons(mermaidDiv, currentCodeForError);
break;
} catch (e) {
// 这个修正器失败了，继续尝试下一个
console.warn(`修正器 ${i + 1} 失败:`, e);
}
}
// 如果所有修正都失败
if (!fixSuccess) {
// XSS 防护：安全地转义错误消息和代码
const escapedErrorMessage = safeEscapeHtml(renderError.str || renderError.message);
const escapedCode = safeEscapeHtml(currentCodeForError);
if (lastSVG) {
// 回退到上一次成功的 SVG
mermaidDiv.innerHTML = '';
mermaidDiv.appendChild(lastSVG);
mermaidDiv.style.border = '2px dashed #f59e0b';
let warn = mermaidDiv.querySelector('.mermaid-render-warning');
if (!warn) {
warn = document.createElement('div');
warn.className = 'mermaid-render-warning';
warn.style.cssText = 'color:#d97706;font-size:12px;margin-top:4px;text-align:center;';
mermaidDiv.appendChild(warn);
}
warn.textContent = '⚠️ 当前代码解析失败，显示上一版本。错误: ' + escapedErrorMessage;
} else {
// 显示详细错误信息
mermaidDiv.innerHTML = `
❌ Mermaid 渲染失败
错误信息: ${escapedErrorMessage}
查看原始代码
${escapedCode}
`;
mermaidDiv.style.border = '2px solid #e53e3e';
}
}
}
} catch (generalBlockError) {
// 兜底：处理 block 解析或 DOM 操作异常
// XSS 防护：安全地转义错误消息
const escapedGeneralErrorMessage = safeEscapeHtml(generalBlockError.message);
console.error('处理Mermaid block时发生一般错误:', generalBlockError, block);
let errorDisplayDiv = block.parentElement || document.createElement('div');
if (block.parentElement) {
let tempDiv = document.createElement('div');
tempDiv.innerHTML = 'Mermaid block处理异常: ' + escapedGeneralErrorMessage + '
';
block.replaceWith(tempDiv);
} else {
block.innerHTML = 'Mermaid block处理异常: ' + escapedGeneralErrorMessage + '
';
}
}
} // 结束 for...of 循环
}
// 挂载到全局命名空间
if (typeof window.ChatbotRenderingUtils === 'undefined') {
window.ChatbotRenderingUtils = {};
}
window.ChatbotRenderingUtils.renderAllMermaidBlocks = renderAllMermaidBlocksInternal;