Mermaid 11.5.0 版本发布：流程图动画与元数据语法优化

Mermaid 是一个基于 JavaScript 的图表生成工具，它允许用户通过简单的文本语法来创建各种类型的图表，包括流程图、序列图、甘特图等。Mermaid 的核心优势在于其易用性和可读性，使得非技术人员也能快速上手创建专业图表。

主要功能更新

流程图边线动画支持

11.5.0 版本为流程图引入了边线动画功能。这一特性通过为边线添加动画效果，可以更直观地展示流程中的动态变化或强调特定路径。开发者现在可以为边线定义动画属性，使其在渲染时呈现动态效果。

节点元数据语法优化

本次版本修复了节点元数据语法中的两个重要问题：

1. 修复了使用 & 符号时节点标签映射错误的问题
2. 解决了在 } 符号前有尾随空格时导致的语法错误

这些改进使得元数据语法的使用更加稳定和可靠，特别是在处理复杂节点定义时。

架构与渲染改进

统一渲染流程

本次更新将需求图和ER图迁移到了通用渲染流程中，这一架构改进带来了两个重要优势：

1. 新增了对方向控制的支持
2. 增加了手绘风格的支持

这种统一化的处理不仅提高了代码的可维护性，还使得不同图表类型能够共享更多功能特性。

箭头颜色匹配

边线的箭头颜色现在会自动与边线颜色保持一致。这一改进通过为每种颜色的边线创建唯一的箭头标记克隆实现，确保了视觉上的一致性。

问题修复与稳定性提升

状态图数据库改进

1. 为状态图数据库添加了版本控制机制
2. 修复了状态图方向获取和设置的问题
3. 确保每次调用 getDiagramFromText() 都返回新的数据库实例

这些改进显著提升了状态图的稳定性和可预测性。

跨图表类型修复

1. 修复了架构图因对齐冲突导致高度异常的问题
2. 解决了类图、流程图和序列图中数据库实例共享的问题
3. 确保甘特图、桑基图和用户旅程图能够正确继承配置中的字体设置

技术实现细节

边线动画实现原理

边线动画功能是通过为SVG元素添加CSS动画实现的。系统会为每条边线生成唯一的ID，并应用预设的动画效果。这种实现方式既保证了性能，又提供了足够的灵活性。

元数据语法解析优化

新的解析器改进了对特殊字符（如@和&）的处理逻辑，同时增强了对空白字符的容错能力。这使得语法解析更加健壮，减少了因格式问题导致的解析失败。

升级建议

对于现有项目，建议进行以下升级步骤：

1. 测试现有图表在新版本下的渲染效果
2. 检查是否有依赖特殊字符的节点标签
3. 评估是否需要为重要边线添加动画效果
4. 验证状态图的方向设置是否正确

11.5.0 版本通过引入新功能和修复关键问题，进一步提升了 Mermaid 的稳定性和功能性，是值得升级的一个版本。