Mermaid.js如何在流程图中更改节点方向

Question

Mermaid.js中流程图如何更改方向？
因为我横向画的流程图，流程图太长了，也没出现滚动条太丑，怎么让它到一定位置往下画节点，然后再往左画节点？

Answer 1

让【宝码香车】来帮你解答，本回答参考DeepSeek编写，并整理提供。

如果还有疑问可以点击头像关注私信或评论。如果答案让您满意，请采纳、点赞、关注，非常感谢！

若您愿意支持，欢迎直接打赏，将不胜感激！
.

在Mermaid.js流程图中更改节点方向可以通过设置流程图的方向参数来实现。以下是详细解决方案：

1. 基本方向控制

Mermaid流程图支持4种基本方向：

2. 解决长流程图问题

针对横向流程图太长的情况，可以使用子图(subgraph)分段控制方向：

3. 完整示例（混合方向）

4. 代码实现方式

在Mermaid代码中通过direction参数控制：

graph LR  // 主方向从左到右
    A --> B
    
    subgraph 垂直部分
        direction TB  // 子图改为从上到下
        B --> C
        C --> D
    end
    
    D --> E  // 恢复主方向

5. 其他实用技巧

• 使用:::styleClass为节点添加样式控制宽度
• 通过click事件添加交互性
• 使用&符号创建并行路径

如果仍有特定布局需求，可以进一步结合节点间的明确连接关系来优化布局。Mermaid会自动计算最佳路径，但通过明确指定连接关系可以获得更可控的结果。