Mermaid.js Event Modeling Syntax & Swimlane-Leitfaden

Event Modeling (EM) ist eine strategische Methodik, die verwendet wird, um Informationssysteme zu entwerfen und zu beschreiben, indem der Ablauf von Datenveränderungen, -übersetzungen und -änderungen über eine lineare Zeitskala abgebildet wird. Durch bewusstes Weglassen vorübergehender Systemmechanismen konzentriert sich ein Event Modeling-Diagramm ausschließlich auf den genauen Informationsfluss und das, was ein Benutzer zu einem bestimmten Zeitpunkt explizit sieht. Die native eventmodelingEngine kategorisiert Ihre Layoutdefinitionen automatisch in drei getrennte visuelle Swimlanes: UI/Automation, Befehl/Lese-Modell, und Ereignisse.

Verständnis der System-Swimlanes

Wenn Sie Elemente auf Ihrer Zeitleiste definieren, weist Mermaid sie basierend ausschließlich auf die zugrundeliegenden Entitätstypen spezifischen horizontalen Spuren zu:

• UI/Automation-Spalte: Enthält Benutzeroberflächen (ui) und Hintergrundprozessoren im Backend (pcr / Prozessor). Stellt dar, wie Aktionen ausgelöst oder visualisiert werden.
• Befehl/Lese-Modell-Spalte: Enthält Befehle (cmd / Befehl) die darauf abzielen, den Systemzustand zu verändern, oder Lese-Modelle (rmo / Lese-Modell), die strukturierte Abfragedaten enthalten.
• Ereignisstraße: Enthält historische Domänenereignisse (evt / Ereignis). Diese Spur erfasst die absolute Quelle der Wahrheit bezüglich dessen, was in der Vergangenheit geschehen ist.

Grundlegende Syntaxstruktur (Kompakt vs. entspannt)

Jedes Diagramm beginnt mit der Ereignismodellierung Deklaration. Sie können Ihre Zeitleiste entweder mit einer kompakten Syntax (unter Verwendung kurzer struktureller Token wie tf, ui, cmd, evt) oder einer beschreibenden entspannten Syntax (unter Verwendung von Zeitraum, Befehl, Lesemodel). Beide Stile können beliebig miteinander kombiniert werden.

1. Kompakte Syntax-Blauzeichnung

eventmodeling
tf 01 ui LoginScreen
tf 02 cmd SubmitCredentials
tf 03 evt UserAuthenticated

2. Relaxed Syntax Blueprint

eventmodeling
timeframe 01 ui LoginScreen
timeframe 02 command SubmitCredentials
timeframe 03 event UserAuthenticated

Syntaxreferenz

Die Tabelle unten zeigt die primären Datenkomponenten, Formatierungskeywords und Kurztastentoken, die verwendet werden, um Event Modeling-Frames innerhalb des Mermaid-Runtime-Interpreters zu erstellen.

Dokumentation von Kontext-Daten-Projektionen

Um dichte Informationslayouts zu ermöglichen, erlaubt Mermaid die Einbettung expliziter Datenmodelle oder Zustandsmockups direkt in Ihre Zeitachsen-Frame. Dies können Sie entweder über Inline-Felder oder externe strukturelle Datenblöcke umsetzen.

1. Inline-Datendefinitionen

Für kurze Parameterdefinitionen fügen Sie eine explizite Datenkarte in geschweiften Klammern ({ }) direkt in die aktive Zeitachsen-Zeilenanweisung ein:

Ereignismodellierung
tf 01 bef AddToCart { itemSku: string, count: int }
tf 02 ere ItemAdded { itemSku: string }

2. Getrennte Datenblöcke (doppelte eckige Klammern)

Wenn Sie komplexe Objektmatrizen verarbeiten oder übereinstimmende Eigenschaften über verschiedene Frames hinweg wiederverwenden, legen Sie einen externen Beschreiber fest. Platzieren Sie einen Zeiger-Verweis in doppelten eckigen Klammern ([[BlockID]]) in der Zeitachsen-Zeile und beschreiben Sie die Objektkomponenten am Ende des Skripts über das SchlüsselwortdatenSchlüsselwort:

eventmodeling
tf 01 cmd Checkout [[OrderData01]]
tf 02 evt OrderPlaced [[OrderData01]]

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

Realitätsnaher Bauplan: E-Commerce-Inventar-Automatisierung

Dieser umfassende, mehrspurige Bauplan zeigt einen fortgeschrittenen architektonischen E-Commerce-Workflow. Er zeigt sequenzielle Benutzeraktionen in der Frontend-Oberfläche auf, Übergänge durch Verarbeitungsbefehle, verfolgt historische Ereignisverläufe und implementiert einen automatisierten Hintergrund-Mikroservice-Processor über eineresetframe (rf), und bietet isolierte Datenblock-Modelle.

eventmodeling
%% Phase 1: Benutzer-Warenkorb-Interaktion
tf 01 ui ProductCatalogView
tf 02 cmd AddItemToCart [[CartCommand]]
tf 03 evt Cart.ItemAdded [[CartEvent]]
tf 04 rmo ActiveMiniCartView [[CartPayload]]

%% Phase 2: Automatisierte Hintergrund-Prüfung des Inventars
rf 05 evt Cart.ItemAdded
tf 06 pcr ReservationProcessor
tf 07 cmd AllocateWarehouseStock { sku: string, qty: int }
tf 08 evt Inventory.StockReserved { reservationId: uuid }

%% Spezifikationen für externe Datenstrukturen
data CartCommand {
  productId: 'PROD-402'
  quantity: 1
}
data CartEvent {
  productId: 'PROD-402'
  quantity: 1
  timestamp: 1718544000
}
data CartPayload {
  totalItems: 1
  cartSubtotal: 24.99
}

Syntax-Tipp: Um sauber organisierte sekundäre Schwimmkanäle unter den Hauptbahnen zu erstellen oder mehrere Untersysteme zu isolieren, können Sie einen durch Punkte getrennten Namensraum-Bezeichner vor Ihre Entitätsbezeichnungen stellen (zum Beispiel:evt Cart.ItemAdded vs. evt Inventory.StockReserved). Der Engine werden automatisch unterschiedliche Untergruppenlinien für diese Entitäten generiert.

Häufige Syntax-Fehler & Systembeschränkungen

Beim Entwickeln von hochdichten Zeitreihen-Verhaltensblöcken sollten Sie diese Formatierungs-Validierungsregeln beachten, um Kompilierfehler zu vermeiden:

• Zeitraum-Verfolgungs-Sequenznummern: Jedetf oder timeframe Zuweisung erfordert einen expliziten numerischen Bezeichner-Slot direkt danach. Die Angabe eines Token-Definitions wietf ui ProductView ohne einen dazwischenliegenden Zahlenindex stoppt die System-Parsetung.
• Leerzeichen und Objektformatierung: Innerhalb von JSON-artigen Datenkarten oder eigenständigenDaten Deklarationen, achten Sie auf saubere Zuweisungen. Das Vergessen einer öffnenden Klammer oder schließender Klammern kann zu nicht aufgelösten Gitterlayoutproblemen führen.
• Unterscheidung von Zeitrahmen und Resetrahmen: Verwenden Sie tf für vorwärtsgerichtete, menschlich gesteuerte Operationen. Verwenden Sie rf / Resetframe bewusst, wenn Sie außerhalb des normalen Ablaufs liegende Auslöser darstellen müssen, beispielsweise einen Hintergrund-Cron-Job, der ein Ereignis verarbeitet, das zuvor stattgefunden hat.
• Unveränderliche Datenwiederverwendung: Wenn Sie die exakt gleiche Daten-Payload-Struktur über mehrere Zeitstrahl-Schritte hinweg referenzieren, bewahren Sie identische Namensübereinstimmungen über Ihre Daten-Pointer-Hooks hinweg, um die Erzeugung doppelter Knoten zu vermeiden.