An event modeling diagram maps out how a system processes actions over time by organising entities into three swimlanes: the user interface or automation that triggers an action, the commands and read models that process or present data, and the events that record what happened. The timeline runs left to right; each column represents one point in time.

Event modeling is a technique for designing systems by focusing on what changes and when — it is used in software architecture and product planning to ensure every action has a clear consequence and every view has a clear data source.

This diagram type is experimental and requires Mermaid v11.15 or later.

eventmodeling

timeframe 01 ui BookingForm
timeframe 02 command SubmitBooking
timeframe 03 event BookingSubmitted

timeframe 04 readmodel BookingConfirmation
timeframe 05 ui ConfirmationPage

resetframe 06 event External.PaymentReceived
timeframe 07 processor PaymentProcessor
timeframe 08 command ConfirmBooking
timeframe 09 event BookingConfirmed

Each time frame is assigned a type (ui, command, event, readmodel, or processor) and an entity name. Mermaid infers the connections between entities automatically based on their position in the timeline — no arrows need to be written by hand.

```mermaid
eventmodeling

timeframe 01 ui BookingForm
timeframe 02 command SubmitBooking
timeframe 03 event BookingSubmitted

timeframe 04 readmodel BookingConfirmation
timeframe 05 ui ConfirmationPage

resetframe 06 event External.PaymentReceived
timeframe 07 processor PaymentProcessor
timeframe 08 command ConfirmBooking
timeframe 09 event BookingConfirmed
```

For more event modeling diagram syntax see the event modeling diagram documentation at mermaid.js.org