Mermaid 测试页面

功能特性

  • • 智能延迟渲染：首次渲染立即执行，后续变化延迟300ms
  • • 先解析后渲染：使用mermaid.parse()预检查语法完整性
  • • 状态管理：区分渲染中、错误、空状态，提供清晰反馈
  • • 防抖优化：避免实时输入时的频繁重绘
  • • 错误分类：语法错误不显示，其他错误友好提示
  • • 唯一ID：每个图表使用唯一ID避免冲突
  • • 完美高度自适应：每个图表根据内容显示不同高度，无固定限制
  • • 智能宽度控制：图表自动适应容器宽度，不会超出可视区域
  • • 全屏查看：点击全屏按钮，在模态框中查看大图
  • • 下载功能：支持下载SVG格式的图表文件
  • • 简洁高效：无复杂库依赖，性能更佳
  • • 响应式设计：支持深色主题，适配移动端

最终版本：已完全移除svg-pan-zoom，彻底解决高度问题：
• ✅ 完美的高度自适应：每个图表都有不同的自然高度
• ✅ 宽度控制正常：图表不会超出可视区域
• ✅ 全屏查看功能：点击全屏按钮查看大图
• ✅ 下载功能：支持SVG格式下载
• ✅ 代码简洁：移除了所有复杂的缩放逻辑
• ✅ 性能更好：没有额外的库和复杂的DOM操作
• 用户可以使用浏览器原生缩放（Ctrl+滚轮）来缩放页面

Mermaid 测试页面

这是一个测试页面，用于验证 Mermaid 流程图渲染功能，特别是实时渲染时的优化。

实时渲染测试

以下是一个简单的流程图，用于测试实时渲染时的防抖和完整性检查：

Empty

复杂流程图示例

Empty

大型流程图测试（自适应高度）

Empty

时序图示例

Empty

类图示例

Empty

甘特图示例

Empty

普通代码块

function hello() {
    console.log("Hello, World!");
}

数学公式

行内公式：E=mc2E = mc^2

块级公式：

∫−∞∞e−x2dx=π\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}