Mermaid.js 类图中泛型语法解析问题分析

问题背景

在使用Mermaid.js绘制类图时，开发者发现当使用某些特定名称作为泛型类型参数时，会出现意外的HTML标签渲染问题。具体表现为当泛型类型参数为Video或Section时，这些词会被错误地解析为HTML元素标签，而非普通的类型名称。

问题复现

通过以下Mermaid代码可以复现该问题：

classDiagram
    class Zebra{
      +List<Video> videos
    }
    class Tiger{
      +List<Section> section
    }
    class Lion{
      +List<Img> images
    }

在上述代码中，Video和Section会被错误地解析为HTML标签，而Img则不会出现同样的问题。这种不一致的行为表明解析器对某些特定词汇有特殊处理。

根本原因分析

经过技术分析，这个问题源于Mermaid.js解析器的设计决策：

1. HTML标签识别机制：解析器内置了HTML标签识别功能，会将某些特定词汇（如Video、Section）误判为HTML5标签
2. 泛型语法歧义：使用尖括号<>作为泛型参数分隔符与HTML标签语法冲突
3. 保留字处理不足：解析器没有完全区分编程语言类型名与HTML标签名

官方推荐解决方案

Mermaid.js官方文档实际上推荐使用波浪号~~而非尖括号<>来声明泛型类型参数。正确的写法应该是：

classDiagram
    class Zebra{
      +List~Video~ videos
    }
    class Tiger{
      +List~Section~ section
    }
    class Lion{
      +List~Img~ images
    }

这种语法设计有以下优势：

1. 避免与HTML标签冲突：完全消除了与HTML标签语法的歧义
2. 一致性：统一了泛型参数的表示方式
3. 可读性：在视觉上仍然保持了泛型参数的可识别性

技术建议

对于Mermaid.js使用者，建议：

1. 遵循官方语法规范：始终使用波浪号~~来声明泛型类型
2. 注意文档细节：仔细阅读文档中的示例代码，区分展示效果和实际编写语法
3. 复杂类型处理：对于嵌套泛型类型，同样使用波浪号语法，如List~List~int~~

总结

Mermaid.js作为一款强大的图表生成工具，在类图语法设计上考虑了多种使用场景。虽然尖括号<>在直觉上更符合主流编程语言的泛型语法习惯，但考虑到与HTML标签的潜在冲突，官方选择了波浪号~~作为泛型参数的语法标记。理解这一设计决策有助于开发者更有效地使用Mermaid.js绘制准确的类图。