Mermaid Event Modeling Diagram Cheat Sheet

How the information changed, in time.

Every picture on this page was drawn by

Mernyx, the native Mermaid editor for macOS. Not by a browser running Mermaid.js — the same renderer the app uses for its canvas.

The time frames

A time frame is a number, a kind and a name. The kind is ui, cmd, evt, rmo or pcr.

eventmodeling
    tf 01 ui CartUI
    tf 02 cmd AddItem
    tf 03 evt ItemAdded

The arrow points at the frame that came first, and the braces carry the payload.

eventmodeling
    tf 01 ui Shop.Cart
    tf 02 cmd Ordering.AddItem ->> 01 { sku: "S" }

An event points at the command that caused it.

eventmodeling
    tf 01 ui Shop.Cart
    tf 02 cmd Ordering.AddItem ->> 01
    tf 03 evt Ordering.ItemAdded ->> 02 { sku: "S" }

A read model is rmo, and it points at the event it is built from.

eventmodeling
    tf 01 ui Shop.Cart
    tf 02 cmd Ordering.AddItem ->> 01
    tf 03 evt Ordering.ItemAdded ->> 02
    tf 04 rmo CartView ->> 03