# Mermaid イベントモデリング図のチートシート

情報が時間とともにどう変わったか。

## 時間フレーム

時間フレームは番号、種類、名前の 3 つです。種類は ui、cmd、evt、rmo、pcr のいずれかです。

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

![イベントモデリング図。3 つのフレームが横一列に並んでいます。CartUI というユーザーインターフェース、AddItem というコマンド、ItemAdded というイベントです。](/diagrams/eventmodeling/timeline.svg)

## コマンドが作用する対象

矢印は先に現れたフレームを指し、波括弧がペイロードを運びます。

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

![イベントモデリング図。コマンドの Ordering.AddItem がユーザーインターフェースのフレームを指しており、ペイロードは sku: S と書かれています。](/diagrams/eventmodeling/commands.svg)

## イベントがコマンドに続く

イベントは、それを起こすコマンドを指します。

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

![イベントモデリング図。ユーザーインターフェースのフレーム、コマンドのフレーム、イベントのフレームが、それぞれ直前のものを指しています。](/diagrams/eventmodeling/events.svg)

## イベントを読み戻す

read model は rmo で、それを作る元のイベントを指します。

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

![イベントモデリング図。4 つのフレーム——ユーザーインターフェース、コマンド、イベント、そして CartView という read model がイベントを指しています。](/diagrams/eventmodeling/views.svg)

## Mernyx で描いてみる

.mmd ファイルを開いて、キャンバスでノードを動かしてみてください。ソースコードもついてきます。macOS ネイティブで、ブラウザは介在しません。