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!"); }
数学公式
行内公式：
块级公式：