Mermaid 11.6.0版本发布：新增雷达图与流程图曲线配置修复

项目简介

Mermaid是一个基于JavaScript的图表生成工具，它使用简单的文本语法来创建各种类型的图表，包括流程图、序列图、甘特图等。通过Markdown风格的语法，开发者可以轻松地在文档中嵌入动态生成的图表，而无需依赖复杂的绘图工具。

版本亮点

Mermaid 11.6.0版本带来了两个重要更新：新增了雷达图支持，并修复了流程图曲线配置功能。这些改进进一步扩展了Mermaid的图表类型，同时增强了现有功能的稳定性。

雷达图支持

什么是雷达图

雷达图（Radar Chart），又称蜘蛛网图或星形图，是一种多变量数据可视化方法。它将多个变量的数据点绘制在从同一点开始的轴上，各轴之间的间距相等，并将数据点连接起来形成多边形。雷达图特别适合用于比较多个项目的多个特性或维度。

Mermaid中的雷达图实现

在11.6.0版本中，Mermaid正式引入了雷达图支持。开发者现在可以使用简单的文本语法来创建雷达图，例如：

radarChart
    title 技能评估
    axis "编程", "设计", "测试", "文档", "沟通"
    "开发者A" [90, 85, 70, 80, 95]
    "开发者B" [75, 95, 80, 70, 85]

这种语法保持了Mermaid一贯的简洁风格，使得在文档中嵌入雷达图变得非常简单。

技术实现细节

雷达图的实现涉及以下几个关键技术点：

1. 坐标计算：需要将多个维度的数据均匀分布在圆周上
2. 多边形绘制：正确连接各数据点形成闭合区域
3. 比例尺处理：确保不同数据集在同一比例下进行比较
4. 标签定位：合理放置各维度的标签，避免重叠

Mermaid团队通过优化SVG渲染引擎，确保了雷达图在各种尺寸下的清晰显示。

流程图曲线配置修复

问题背景

在之前的版本中，Mermaid流程图的曲线类型配置存在一些问题，导致以下三种配置方式无法正常工作：

1. 全局配置（Config）
2. 初始化指令（%%{ init: { 'flowchart': { 'curve': '...' } }%%）
3. LinkStyle命令（linkStyle default interpolate ...）

这些配置方式本应允许开发者自定义流程图中连接线的曲线样式，但在某些情况下会被忽略。

修复内容

11.6.0版本彻底修复了这一问题，现在开发者可以自由选择以下曲线类型：

• 线性：直线连接
• 基础曲线：简单的贝塞尔曲线
• 单调曲线：保持单调性的曲线
• 高级样条曲线：更平滑的高级曲线

技术实现

修复涉及流程图渲染引擎的多个层面：

1. 配置继承：确保各级配置能正确传递到渲染层
2. 曲线算法：重写了曲线生成逻辑，确保各种类型都能正确渲染
3. 样式应用：修复了LinkStyle命令的解析和应用机制

其他改进

除了上述主要更新外，11.6.0版本还包含了一些小的改进和修复：

• 修复了需求图中的包含箭头显示问题
• 更新了解析器依赖版本至0.4.0

升级建议

对于现有项目，升级到11.6.0版本是推荐的，特别是：

1. 需要使用雷达图的项目
2. 依赖流程图曲线自定义的项目
3. 使用需求图的项目（修复了箭头显示问题）

升级通常只需要更新package.json中的版本号并重新安装依赖即可。

总结

Mermaid 11.6.0版本通过新增雷达图支持和修复流程图曲线配置，进一步丰富了其图表类型并提升了现有功能的可靠性。这些改进使得Mermaid在数据可视化和流程描述方面变得更加强大和灵活。

对于开发者而言，这些更新意味着可以在文档中使用更多样化的图表类型，同时享受更稳定的渲染效果。Mermaid团队持续改进的精神也确保了该项目在技术文档工具领域的领先地位。