如何使用 mermaid.js 繪制事件溯源決策器？

Question

我正在嘗試使用 mermaid.js 從我在 YT 視頻中看到的內容繪制事件源決策者： https://youtu.be/kgYGMVDHQHs?t=1572 。

到目前為止我的嘗試：

graph LR
    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.live 上獲得

這給出了如下內容：

它看起來真的很笨重，我想知道如何更好地定位不同的元素以使其看起來更像第一張圖片？

Answer 1

視頻中多次提到循環，或許plot可以這樣設計？

在Mermaid Live Editor中嘗試此示例代碼：

graph LR
    Command --> Decide
    Evolve --> Event

    subgraph A[loop]
    direction LR
    Evolve --> |New or Initial State|Decide
    Decide --> |New events|Evolve
    end