跳到正文
Mernyx
打开菜单

Mermaid 事件建模图速查表

信息是怎么随时间变化的。

这个页面上的每一张图都由Mernyx——macOS 上的原生 Mermaid 编辑器绘制。不是浏览器里跑的 Mermaid.js,而是 App 画布用的同一个渲染器。

时间帧

时间帧是编号、类型和名字三样。类型是 ui、cmd、evt、rmo 或 pcr。

eventmodeling
    tf 01 ui CartUI
    tf 02 cmd AddItem
    tf 03 evt ItemAdded
一张事件建模图,三个帧排成一行:叫 CartUI 的用户界面、叫 AddItem 的命令和叫 ItemAdded 的事件。放大图表

命令作用在什么上

箭头指向先出现的那个帧,花括号里装着载荷。

eventmodeling
    tf 01 ui Shop.Cart
    tf 02 cmd Ordering.AddItem ->> 01 { sku: "S" }
一张事件建模图,命令 Ordering.AddItem 指回一个用户界面帧,载荷写着 sku: S。放大图表

事件跟在命令后面

事件指向引发它的那个命令。

eventmodeling
    tf 01 ui Shop.Cart
    tf 02 cmd Ordering.AddItem ->> 01
    tf 03 evt Ordering.ItemAdded ->> 02 { sku: "S" }
一张事件建模图,有一个用户界面帧、一个命令帧和一个事件帧,每一个都指回前一个。放大图表

把事件读回来

读模型是 rmo,它指向自己据以构建的那个事件。

eventmodeling
    tf 01 ui Shop.Cart
    tf 02 cmd Ordering.AddItem ->> 01
    tf 03 evt Ordering.ItemAdded ->> 02
    tf 04 rmo CartView ->> 03
一张事件建模图,四个帧:用户界面、命令、事件,以及一个叫 CartView 的读模型指回那个事件。放大图表

在 Mernyx 里画出来

打开一个 .mmd 文件,在画布上挪一个节点,源码跟着走。macOS 原生,不经过浏览器。

图表预览