如何用mermaid.js优化Event-sourcing Decider的绘图布局？

我参考了Event-sourcing Decider图，尝试用Mermaid.js绘制，原代码如下：

Command(Command) --> Decide[[Decide]]
    Decide --> Events(NewEvents)
    Events --> Evolve[[Evolve]]
    PreviousState(Previous State) --> Evolve[[Evolve]]
    Evolve --> State(New or Initial State)
    State --> PreviousState
    State --> Decide

当前生成的图布局杂乱，希望调整得更接近参考图的结构，请问如何优化元素位置？

优化方案 #

通过Mermaid的rank same指令强制控制节点的水平层级，同时调整节点顺序，让流程线更贴合参考图的逻辑排布：

%% 强制设置同层级节点，对齐参考图布局
    rank same Command PreviousState
    rank same Decide Events
    rank same Evolve
    rank same State

    Command(Command) --> Decide[[Decide]]
    Decide --> Events(New Events)
    PreviousState(Previous State) --> Evolve[[Evolve]]
    Events --> Evolve
    Evolve --> State(New or Initial State)
    State --> PreviousState
    State --> Decide

优化说明 #

• 使用rank same指令将功能关联的节点归为同一水平层级，避免节点乱序排布
• 调整节点声明顺序，让逻辑流的箭头走向更清晰，减少交叉线条
• 补充节点文本的空格（如NewEvents改为New Events），提升可读性

内容的提问来源于stack exchange，提问作者Natalie Perret