如何在Mermaid图表中将连接线改为直线？

Question

**问题描述：** 在使用 Mermaid 绘制流程图或关系图时，默认的连接线通常是带箭头的折线（polyline），但在某些场景下，用户希望将连接线样式改为直线（straight line），以提升图表的简洁性或符合特定的视觉风格。然而，许多用户在初次尝试修改连接线样式时，发现设置未生效或不清楚如何正确配置。这引发了一个常见的技术问题：**如何在 Mermaid 图表中将连接线改为直线？** 该问题涉及 Mermaid 的语法设置、流程图方向限制以及不同版本之间的兼容性差异，是前端开发和文档可视化过程中较为典型的一个样式定制问题。

Answer 1

一、问题背景与核心痛点

在使用 Mermaid 绘制流程图或关系图时，默认的连接线通常是带箭头的折线（polyline），这种样式在复杂图中容易造成视觉混乱。因此，用户常希望将连接线样式改为直线（straight line），以提升图表的简洁性或符合特定的视觉风格。

然而，许多用户在初次尝试修改连接线样式时，发现设置未生效或不清楚如何正确配置。这引发了一个常见的技术问题：如何在 Mermaid 图表中将连接线改为直线？

该问题涉及 Mermaid 的语法设置、流程图方向限制以及不同版本之间的兼容性差异，是前端开发和文档可视化过程中较为典型的一个样式定制问题。

二、Mermaid 连接线样式的基本概念

Mermaid 中的连接线样式主要由以下三类构成：

• Polyline：默认样式，折线连接，带箭头；
• Curve：曲线连接；
• Straight：直线连接。

在 Mermaid 的流程图中，连接线的样式可以通过特定的语法来指定。例如，在节点之间使用 --> 表示 polyline，使用 ==> 表示 curve，而使用 --- 可以表示 straight line。

三、实现直线连接线的关键语法

要将 Mermaid 中的连接线设置为直线，需注意以下语法：

连接线类型	语法符号	说明
Polyline	-->	默认样式，带箭头的折线
Curve	==>	曲线连接
Straight	---	无箭头的直线连接

例如，以下是一个使用直线连接的简单流程图示例：

graph LR
A --- B
B --- C
    

四、流程图方向对连接线样式的影响

Mermaid 的流程图支持四种方向：

• LR：从左到右（Left to Right）
• RL：从右到左（Right to Left）
• TD：从上到下（Top Down）
• BT：从下到上（Bottom to Top）

需要注意的是，只有在 LR 或 RL 方向时，直线连接线（---）才能正常显示为直线。如果使用 TD 或 BT 方向，则 --- 会自动转换为 polyline 样式。

例如，以下代码在 LR 方向下显示为直线，但在 TD 方向下则无效：

graph TD
A --- B
    

五、版本兼容性与样式设置建议

Mermaid 的不同版本对连接线样式的处理方式略有差异，尤其是在 8.x 与 9.x 版本之间存在一些样式默认值的变化。

建议用户在使用 Mermaid 时：

• 明确指定流程图方向为 LR 或 RL；
• 使用 --- 作为直线连接符；
• 如需全局修改样式，可通过 CSS 或配置项 flowchart.defaultRenderer 调整。

例如，在 Mermaid 配置中可设置如下：

mermaid.initialize({
    flowchart: {
        defaultRenderer: 'dagre-d3'
    }
});
    

此外，部分版本中可以通过 classDef 自定义连接线样式，实现更灵活的控制。