Mermaid.js イベントモデリング構文とスイムレーンガイド

イベントモデリング（EM）は、データが線形タイムライン上でどのように移動し、変換され、変化するかをマッピングすることで、情報システムの設計および記述に用いられる戦略的手法です。一時的なシステムメカニズムを意図的に省略することで、イベントモデリング図は、正確な情報フローと、ユーザーが特定の瞬間に明示的に見ている内容にのみ焦点を当てます。ネイティブな eventmodelingエンジンは、レイアウト定義を3つの独立した視覚的スイムレーンに自動的に分類します：UI/自動化, コマンド/読み取りモデル、およびイベント.

システムスイムレーンの理解

タイムライン上で要素を定義すると、Mermaidはそれらを、根本的なエンティティタイプに基づいて特定の水平トラックに割り当てます：

• UI/自動化レーン：ユーザーインターフェース（ui）およびバックエンドのバックグラウンドプロセッサ（pcr / プロセッサ）。アクションがどのようにトリガーされたり、可視化されたりするかを表します。
• コマンド/読み取りモデルレーン：コマンド（cmd / command）でシステム状態を変更しようとするもの、または読み取りモデル（rmo / readmodel）で構造化クエリデータを保持するもの。
• イベントレーン： 歴史的なドメインイベントを保持しています（evt / イベント）。このトラックは、過去に何が起きたかに関する絶対的な真実を捉えています。

基本的な構文構造（コンパクト vs. リラックス）

すべての図は、eventmodeling宣言から始まります。タイムラインを、次のいずれかの方法で構築できます。コンパクト構文（短い構造的トークン、たとえばtf, ui, cmd, evtなどを使って）または記述的なリラックス構文（timeframe, command, readmodelを使って）。どちらのスタイルも、自由に混在させることができます。

1. コンパクト構文のブループリント

イベントモデリング
tf 01 ui ログイン画面
tf 02 cmd 資格情報送信
tf 03 evt ユーザー認証完了

2. リラックスした構文のブループリント

イベントモデリング
timeframe 01 ui ログイン画面
timeframe 02 command 資格情報送信
timeframe 03 event ユーザー認証完了

構文リファレンス

以下の表は、Mermaidランタイムインタプリタ内にイベントモデリングフレームを構築するために使用される主なデータコンポーネント、フォーマットキーワード、およびショートカットトークンを分解しています。

コンテキストデータの投影を記録する

高密度の情報レイアウトを提供するため、Mermaidは明示的なデータスキーマやステートのモックアップをタイムラインフレーム内に直接埋め込むことを許可している。これはインラインフィールドまたは外部の構造的データブロックのいずれかを使用して実装できる。

1. インラインデータ定義

簡潔なパラメータ定義の場合、波かっこ（{ }）で囲まれた明示的なデータマップを、アクティブなタイムフレームラインの文に直接追加する：

イベントモデリング
tf 01 cmd AddToCart { itemSku: string, count: int }
tf 02 evt ItemAdded { itemSku: string }

2. 分離されたデータブロック（二重角括弧）

複雑なオブジェクト行列を扱う場合や、異なるフレーム間で同じプロパティを再利用する場合、外部の記述子をマッピングする。二重角括弧（[[BlockID]]）で囲まれたポインタ参照をタイムフレームラインに配置し、スクリプトの下部で「data」キーワードを介して、オブジェクトのコンポーネントを別々に詳細に記述する：

イベントモデリング
tf 01 cmd クイックチェックアウト [[OrderData01]]
tf 02 evt 注文完了 [[OrderData01]]

data OrderData01 {
  orderId: 'ORD-992'
  totalAmount: 145.50
  currency: 'USD'
}

実世界のブループリント：Eコマース在庫自動化

この包括的でマルチレーンのブループリントは、高度なアーキテクチャを持つEコマースワークフローを示しています。順次的なフロントエンドユーザー操作をマッピングし、処理コマンドを経由して遷移し、歴史的なイベントの足跡を追跡し、resetframe (rf）、そして隔離されたデータブロックモデルを提供します。

イベントモデリング
%% フェーズ1：ユーザーのカート操作
tf 01 ui 商品カタログ表示
tf 02 cmd カートに商品を追加 [[CartCommand]]
tf 03 evt カート.商品追加 [[CartEvent]]
tf 04 rmo 有効なミニカート表示 [[CartPayload]]

%% フェーズ2：自動バックグラウンド在庫検証
rf 05 evt カート.商品追加
tf 06 pcr 予約プロセッサ
tf 07 cmd 在庫倉庫在庫を割り当てる { sku: string, qty: int }
tf 08 evt 在庫.在庫予約済み { reservationId: uuid }

%% 外部データスキーマ仕様
data CartCommand {
  productId: 'PROD-402'
  quantity: 1
}
data CartEvent {
  productId: 'PROD-402'
  quantity: 1
  timestamp: 1718544000
}
data CartPayload {
  totalItems: 1
  cartSubtotal: 24.99
}

構文のヒント：メインレーンの下にクリーンに整理された二次的なスイミングトラックを作成する、または複数のサブシステムを分離するには、エンティティラベルの先頭にドット区切りのネームスペース修飾子文字列を付加できます（例：evt カート.商品追加 と evt 在庫.在庫予約済み）。エンジンはこれらのエンティティに対して自動的に異なるサブグループラインを生成します。

一般的な構文の落とし穴とシステム制約

非常に密度の高い時系列行動ブロックを設計する際は、コンパイルエラーを防ぐために、以下のフォーマット検証ルールを念頭に置いてください：

• タイムフレーム追跡シーケンス番号： すべての tf または timeframe の割り当てには、直後に明示的な数値識別子スロットトークンが必要です。トークン定義を tf ui ProductView 中間の番号インデックスなしで記述すると、システムの解析が停止します。
• 空白文字とオブジェクトの書式: JSON形式のデータマップ内またはスタンドアロンのデータ宣言では、明確な代入を保つこと。開始の波かっこを忘れたり、終了の括弧を省略したりすると、解決できないグリッドレイアウトになる可能性がある。
• タイムフレームとリセットフレームの区別: 以下を用いて:tf 前進型で人間主導の操作に使用する。リセットフレームとして意図的に使用する場合はrf / リセットフレーム 、以前に発生したイベントを処理するバックグラウンドのcronジョブなど、帯域外のトリガーを説明する必要がある場合に意図的に使用する。
• 不変データの再利用: 複数のタイムラインステップにわたって同じデータペイロード構造を参照する場合、重複するノードの生成を防ぐために、データポインターフック間で同一の命名を維持する。