Browserbasiertes Board für Event Storming, Domain-Driven Design, BDD / Example Mapping, User Story Mapping, Event Modeling, Prozess, Daten und Freiform (eigene Kartentypen / Stereotypen) mit lokaler JSON-Persistenz (.storm.json).
Kein Server für Domänendaten — die Arbeitsdatei liegt beim Nutzer.
Live: abx-git.github.io/E2
Repository: github.com/abx-git/E2
Diese README beschreibt die implementierten Funktionen und stellt sie klassischen Workshop-Methoden gegenüber (Brandolini, Evans/Vernon, Example Mapping, Story Mapping, Event Modeling, Prozess-/Datenmodellierung).
| Bereich | Inhalt |
|---|---|
| Methoden-Modi | ES · DDD · BDD · USM · EM · PROC · DATA · C4 · arc42 · Cloud · Freiform (Palette/Facilitator getrennt); Board darf Typen mischen |
| Sticky-Typen | Methodenspezifische Kataloge + Freiform-Stereotypen + geteilte Notizen/Instructions/Hotspots/Links |
| Relationen | 8 Verbindungstypen inkl. Auto-Vorschlag |
| Fläche | Timeline, Swimlanes, Bounded Contexts, Pan/Zoom |
| Workshop | Pro Modus eigene Facilitator-Formate + Frei |
| Sprache | Glossary (Ubiquitous Language) |
| Unsicherheit | Hotspots inkl. Status/Priorität |
| I/O | .storm.json + Schema, SVG/PNG, Markdown-Reports |
| UX | Mehrfachauswahl, Ausrichten, Rechtsklick-Menüs, Farben |
| UI-Sprache | Deutsch / English (clientseitig; Daten → Darstellung) |
Die Palette zeigt nur Typen des aktiven Methoden-Modus (im Facilitator zusätzlich phasenweise eingeschränkt).
Bereits platzierte Stickies bleiben beim Moduswechsel sichtbar — Elemente der anderen Methode sind leicht abgesetzt (gestrichelter Rahmen).
| Typ | Farbe / Form | Methodische Rolle |
|---|---|---|
| Domain Event | Orange | „Was ist passiert?“ (Vergangenheit) |
| Command | Blau | „Was soll geschehen?“ / Auslöser |
| Actor | Gelb (Pill) | Wer führt den Command aus? |
| Aggregate | Gelbes Rechteck | Konsistenzgrenze, Commands → Events |
| Policy | Lila | „When X, then Y“ |
| Read Model | Grün | Benötigte Information für Entscheidungen |
| External System | Pink | Integration außerhalb der Domäne |
| UI | Grau/Weiß | Screen / View |
| Notiz | Creme, gestrichelt (Farbe wählbar) | Freie Annotation (Workshop-Hinweis) |
| Instruction | Teal, Badge + linker Akzent | Anweisung / Aspekte für die Umsetzung |
| Hotspot | Rot, gedreht | Offene Frage, Konflikt, Unklarheit |
| Link | Himmelblau (Pill) | Externe URL oder Sprung zu einer Board-Sicht |
| Pivotal Event | Breiter gelber Block | Phasenwechsel / signifikanter Einschnitt |
| Typ | Farbe / Form | Methodische Rolle |
|---|---|---|
| Subdomain | Violett | Problemraum: Core / Supporting / Generic |
| Entity | Türkis | Identität über die Zeit |
| Value Object | Cyan | Wert ohne Identität |
| Aggregate | Gelbes Rechteck | Konsistenzgrenze (geteilt mit ES) |
| Domain Service | Indigo | Fachlogik ohne natürlichen Entity-Sitz |
| Repository | Stein | Persistenzzugriff für Aggregate Roots |
| Factory | Lime | Komplexe Erzeugung |
| Domain Event | Orange | Bedeutsame Zustandsänderung (geteilt) |
| External System | Pink | Integration (geteilt) |
| Notiz / Instruction / Hotspot | Creme / Teal / Rot | Annotationen (geteilt) |
| Typ | Farbe / Form | Methodische Rolle |
|---|---|---|
| Rule | Amber | Geschäftsregel zur Story |
| Example | Grün | Konkretes Szenario (Given/When/Then) |
| Question | Himmelblau | Offene Spec-Frage |
| Actor | Gelb (Pill) | Wer ist betroffen? |
| Notiz / Instruction / Hotspot | Creme / Teal / Rot | Annotationen |
| Typ | Farbe / Form | Methodische Rolle |
|---|---|---|
| Activity | Blau, breit | Backbone der User Journey |
| User Task | Hellblau | Aufgabe unter einer Activity |
| User Story | Gelb | Umsetzbare Story |
| Release | Rosa, breit | Horizontaler Release-/MVP-Schnitt |
| Actor | Gelb (Pill) | Persona / Rolle |
| Notiz / Instruction / Hotspot | Creme / Teal / Rot | Annotationen |
| Typ | Farbe / Form | Methodische Rolle |
|---|---|---|
| Slice | Orange, breit | Vertical Slice (UI→Command→Event→View) |
| Domain Event / Command / Read Model / UI / Policy / Actor / External System | wie ES | Bausteine der Timeline |
| Notiz / Instruction / Hotspot | Creme / Teal / Rot | Annotationen |
| Typ | Farbe / Form | Methodische Rolle |
|---|---|---|
| Start | Grün, rund | Prozessbeginn / Auslöser |
| Aktivität | Blau | Arbeitsschritt (Rolle, System, I/O, Dauer) |
| Gateway | Raute | XOR / AND / OR-Verzweigung mit Bedingungen |
| Ende | Rot, rund | Prozessende / Ergebnis |
| Notiz / Instruction / Hotspot | Creme / Teal / Rot | Annotationen |
| Typ | Farbe / Form | Methodische Rolle |
|---|---|---|
| Entität | Türkis | Tabelle / Konzept (PK, Attribute, Unique Keys) |
| Assoziation | Grau | Beziehung mit Kardinalität (1:1, 1:n, …) |
| Notiz / Instruction / Hotspot | Creme / Teal / Rot | Annotationen |
- Label, Beschreibung
- Auf der Karte anzeigen: Beschreibung / Attribute / Methoden / Web-Links (Detailleiste oder Rechtsklick)
- Web-Links: beliebige http(s)-URLs mit optionalem Titel; optional auf der Karte als klickbare Liste
- Position und Größe (Ziehen, Anfasser, Zahlen in der rechten Leiste)
- Zuordnung zu Swimlane / Bounded Context (automatisch bei Umschließung; Rechtsklick weiter möglich)
- „Wiederkehrend“ (Rechtsklick)
- Domain Event / Aggregate: Event-Schema (Werte-Editor oder Raw-JSON)
- Aggregate: Attribute, Methoden, Invarianten
- Entity: Identitätsfelder, Attribute, Operationen
- Value Object: Attribute/Komponenten, Flag „unveränderlich“
- Domain Service: Operationen, Flag „zustandslos“
- Repository: Aggregate Root, Operationen
- Factory: Erzeugter Typ, Operationen
- Hotspot: Status (offen/gelöst), Priorität (niedrig/mittel/hoch)
- Notiz: Hintergrundfarbe (Detailleiste oder Rechtsklick)
- Instruction: feste Kennzeichnung für Umsetzungsanweisungen (kein Farbwähler)
- Link: Zielart (URL oder Sicht), URL bzw. Sicht-Auswahl; Öffnen per Symbol / Detailleiste
- Subdomain: Art (Core / Supporting / Generic)
- Rule: Kriterien / Hinweise
- Example: Given / When / Then
- Question: Status (offen/geklärt)
- User Story: Persona, MoSCoW-Priorität, Schätzung, Akzeptanzkriterien
- Release / Slice: Ziel; Slice zusätzlich Systeme/Lanes
- Process Start / End: Auslöser bzw. Ergebnis
- Process Activity: Rolle, System, Eingaben/Ausgaben, Dauer
- Process Gateway: Art (XOR/AND/OR), Bedingungen/Pfade
- Data Entity: Tabellenname, Identitätsfelder, Attribute, Unique Keys
- Data Association: Kardinalität, linke/rechte Entität, Beziehungsattribute
Hinweis: Listenfelder (Attribute, Methoden, …) werden in der Detailleiste zeilenweise gepflegt.
Elemente lassen sich verbinden (Canvas Verbinden, Pfeil am Sticky oder Rechtsklick → Relation starten).
Undo/Redo: App-Leiste oder ⌘Z / Ctrl+Z (Undo) und ⌘⇧Z / Ctrl+Y (Redo). Duplizieren: ⌘D / Ctrl+D (Auswahl). Bearbeitungsstand (Karten & Verbinder, Badge mit Symbol): ⌘/Ctrl+1 OK · +2 ! · +3 ? · +4 In Arbeit · +5 Neu (nochmals = entfernen). Drag einer Gruppe zählt als ein Schritt. History wird nicht in .storm.json gespeichert.
| Typ | Bedeutung (UI) |
|---|---|
triggers |
löst aus |
reactsWith |
reagiert mit |
informs |
informiert (gestrichelt) |
executedBy |
ausgeführt von |
invokes |
ruft auf |
causal |
verursacht |
contains |
enthält |
annotates |
annotiert (gestrichelt; Notiz/Instruction ↔ Sticky) |
Der Relationstyp wird beim Verbinden heuristisch vorgeschlagen und kann per Rechtsklick geändert werden. Optionales Label in der Detailleiste.
- Pan: Trackpad-Scroll, Leertaste + Ziehen, oder mittlere Maustaste
- Zoom: Pinch / Ctrl+Scroll (⌘+Scroll), ± unten rechts am Canvas (ca. 25 %–250 %)
- Auswahl: Klick, Shift+Klick, Rahmen ziehen (Marquee)
- Verschieben: ein Element oder die Mehrfachauswahl
- Größe: acht Anfasser am ausgewählten Element
- Ausrichten: Rechtsklick bei ≥2 Elementen (links/mitte/rechts, oben/mitte/unten, verteilen, gleiche Breite/Höhe)
- Anlegen: Doppelklick auf leere Fläche, Rechtsklick → Element hinzufügen, oder 1–9/0 (Typ) + Enter/A (Viewport-Mitte)
- Titel: Doppelklick auf ein Sticky → Inline-Bearbeitung (Enter speichern, Esc abbrechen; Notizen/Instructions: ⌘/Ctrl+Enter)
- Aktionen: Rechtsklick-Context-Menü (Löschen, Zuordnung, Hotspot-Status, Hilfe, …)
- Sichtbar/unsichtbar (Canvas Ansicht → Timeline)
- Vertikal verschiebbar
- Start-/Ende-Labels (Rechtsklick)
- Optional Snap T: Elemente rasten an der Timeline-Höhe ein
Methodisch: chronologische Achse links → rechts für Domain Events.
- Anlegen über Canvas-Werkzeugleiste
- Verschieben und in der Größe ändern (wie Bounded Contexts)
- Elemente werden automatisch zugeordnet, wenn sie vollständig in der Lane liegen (und wieder entfernt, wenn nicht mehr vollständig drin)
- Beim Verschieben wandern vollständig enthaltene Elemente mit
- Manuelle Zuordnung weiterhin per Rechtsklick möglich
Methodisch: parallele Akteure / Streams / Verantwortlichkeiten.
- Rechteck auf der Fläche zeichnen („Bounded Context“-Modus)
- Verschieben, skalieren, Label, Zweck, Farbe
- Elemente werden automatisch zugeordnet bei vollständiger Umschließung (bei überlappenden BCs: der kleinste)
- Beim Verschieben wandern vollständig enthaltene Elemente mit
- Manuelle Zuordnung weiterhin per Rechtsklick
- Context Map: Canvas-Button → zwei BCs anklicken; Muster (ACL, Shared Kernel, Customer/Supplier, …) per Rechtsklick auf die Linie
Methodisch: Cluster nach Sprache und Verantwortung; Context-Map-Muster modellieren die Schnittstellen zwischen Contexts.
In der App-Leiste: Methoden-Dropdown (Event Storming, DDD, …, Freiform). Der Modus steuert Palette und Facilitator-Formate — nicht den Board-Inhalt. Workshop-Format und Facilitator liegen unter Session.
Eigene Kartentypen in der linken Palette anlegen, umbenennen und einfärben. Typen gelten pro Sicht und erscheinen farbig auf den Karten. Starter: Concept, Interface, Class — alles editierbar. Annotationen bleiben verfügbar.
| Format | Fokus |
|---|---|
| Frei | Alle ES-Typen, keine Phasenführung |
| Big Picture | Chaotic Exploration → Timeline → Konsistenz → Commands/Actors → Policies/Read Models → Bounded Contexts → Hotspots → Wrap-Up |
| Process Modeling | Commands & Policies → Pivotal Events → Contexts verfeinern → Aggregates & Read Models |
| Software Design | Aggregate Design → Event Schemas → Repository & Service |
| Format | Fokus |
|---|---|
| Frei | Alle DDD-Typen, keine Phasenführung |
| Strategic Design | Subdomains → Ubiquitous Language → Bounded Contexts → Context Map → Wrap-Up |
| Tactical Design | Aggregates & Entities → Value Objects → Services & Factories → Repositories → Domain Events → Wrap-Up |
| Format | Fokus |
|---|---|
| Frei | Rules, Examples, Questions, … |
| Example Mapping | Story & Rules → Examples → Questions → Wrap-Up |
| Format | Fokus |
|---|---|
| Frei | Activities, Tasks, Stories, Releases |
| Story Mapping | Backbone → Tasks → Stories → Releases |
| Format | Fokus |
|---|---|
| Frei | Slice + ES-Bausteine |
| Event Modeling | Events → Commands & UI → Views & Automation → Vertical Slices |
| Format | Fokus |
|---|---|
| Frei | Start, Aktivitäten, Gateways, Ende |
| Prozessmodellierung | Happy Path → Entscheidungen (Gateways) → Rollen & Systeme |
| Format | Fokus |
|---|---|
| Frei | Entitäten & Assoziationen |
| Datenmodellierung | Entitäten → Attribute & Schlüssel → Beziehungen |
Im Facilitator-Modus:
- Palette auf erlaubte Typen der Phase (im aktuellen Modus) begrenzt
- Checkliste, empfohlene Dauer, Phasenwechsel
- Hilfe-Dialoge zu Elementen, Relationen und Phasen
| Funktion | Inhalt |
|---|---|
| Glossary | Begriffe + Definitionen (Ubiquitous Language), Markdown-Export |
| Hotspot-Liste | Übersicht aller Hotspots, Klick selektiert; Status/Priorität sichtbar |
| Validierung | Hinweise am ausgewählten Element (z. B. Past Tense bei Events, isolierte Elemente, Hotspot ohne Beschreibung) — soft, nicht blockierend |
| Hilfe | Kontextbezogene Erklärungen (Palette, Sidebar, Rechtsklick, Facilitator) |
- Primär: lokale
.storm.json(File System Access API, wo verfügbar) — ein Dokument, mehrere Sichten (Tabs) - Format v2 (
views[]); ältere v1-Dateien werden beim Öffnen migriert - Alternativen: Datei öffnen / JSON einfügen — bei ungespeicherten Änderungen: Speichern / Nicht speichern / Abbrechen (wie in Desktop-Apps)
- Datei-Menü: Neu, Öffnen…, Speichern, Speichern unter…, Schließen, Umbenennen…
- Import als neue Seite: Daten → Als neue Seite importieren — Sichten aus einer
.storm.jsonals neue Tabs; Farben / Titel / Glossary / Workshop-Modus bleiben aus der geöffneten Datei - JSON als neue Sicht: Daten → Export JSON einfügen, Datei JSON als neue Sicht, oder Tab-Leiste JSON — liest E2-/KI-JSON aus der System-Zwischenablage und legt neue Sicht(en) an (bestehende Tabs bleiben)
- Board-Link teilen: Daten → Board-Link teilen… — Remote-URL zu einer öffentlichen
.storm.jsonprüfen (Schema); bei Erfolg Share-Link mit?board=…. Öffnen des Links fragt nach Bestätigung und lädt danach lokal weiter (CORS muss erlaubt sein) - Schutz vor Überschreiben: Autosave schreibt nie einen leeren/fremden Stand über eine nicht-leere Arbeitsdatei. Beim Öffnen einer anderen Datei ist Speichern blockiert, bis deren Inhalt geladen ist — der vorherige Editor-Stand wird nie in die neue Datei geschrieben. Backup / Remote und Kollaboration pausieren das Speichern — Weiter mit „Speichern unter…“. Ändert ein anderes Tool die Arbeitsdatei, übernimmt E2 den Dateistand automatisch (sichtbarer Tab, ~1 s Poll); waren Editor-Änderungen offen, wird zuvor eine Editor-Sicherheitskopie heruntergeladen.
- Auto-Speichern, Konfliktbehandlung bei externer Änderung
- Backup: Daten → mit Historie (zeitgestempelte Kopien) oder ohne Historie (immer dieselbe Backup-Datei überschreiben); manuell oder alle 5–30 Min. Backup öffnen überschreibt die Arbeitsdatei nicht.
- Während Kollaboration wird die Arbeitsdatei nicht gespiegelt (Autosave pausiert); beim Verlassen: Board behalten oder Stand vor dem Raum wiederherstellen (ohne stilles Disk-Overwrite)
- Workshop-Schalter: in Collab den aktiven Tab für alle synchronisieren (sonst lokal wie Viewport)
- PWA / offline-fähig (Serwist)
| Format | Nutzen | Typisch für |
|---|---|---|
| JSON | Vollständiger Board-Stand inkl. Schema-Verweis | alle |
| JSON Schema | Für andere Tools, die gültige Boards erzeugen | alle |
| KI-Kontext | Reduzierte Sicht (semantisch) + Schema; Import mit Auto-Layout | alle |
| Mermaid / PlantUML | Diagramm-Text pro Sicht; Import mit Auto-Layout | alle |
| SVG / PNG | Visueller Snapshot; SVG als .drawio.svg mit eingebettetem Diagramm — in diagrams.net / Draw.io bearbeitbar |
alle |
| Hotspot-Report (MD) | Offene Punkte | alle |
| Glossary (MD) | Ubiquitous Language | alle |
| Context Map (MD) | Contexts + Context-Map-Muster + Cross-Boundary-Relationen | ES, DDD |
| Event Catalog (MD) | Domain Events inkl. Schema | ES, Event Modeling |
| Domain Model (MD) | Aggregates, Entities, VOs, Services, Repos, Factories, Subdomains | DDD |
| Example Mapping (MD) | Rules, Examples (Given/When/Then), Questions | BDD |
| Story Map (MD) | Activities, Tasks, Stories, Releases | User Story Mapping |
| Event Model / Slices (MD) | Slices mit enthaltenen Events/Commands/Read Models | Event Modeling |
| Prozessmodell (MD) | Start, Aktivitäten (Rolle/System/I/O), Gateways, Ende | Prozess |
| Datenmodell (MD) | Entitäten (PK/Attribute/Keys), Assoziationen, Relationen | Daten |
Schema & Formatdoku: docs/BOARD-JSON-SCHEMA.md, public/schemas/board-snapshot-v2.schema.json, public/schemas/ai-board-context-v1.schema.json.
Unter Daten → Darstellung:
- Farbe Arbeitsbereich (Canvas)
- Farbe Seitenleisten / Docks
- Presets (Waypoints, Mitternacht, Workshop hell, Papier)
Sticky-Farben bleiben methodisch fix (Event-Storming-Konvention). Einstellungen werden im Board-JSON mitgespeichert.
Legende: ✅ vorhanden · 🟡 teilweise · ❌ fehlt / bewusst nicht
| Aspekt | Status | In E2 |
|---|---|---|
| Domain Events sammeln (Chaotic Exploration) | ✅ | Orange Stickies, Facilitator-Phase |
| Past Tense / Event-Formulierung | 🟡 | Hilfe + Soft-Validierung |
| Chronologische Timeline | ✅ | Timeline + Snap |
| Parallele Ströme | ✅ | Swimlanes (Auto-Zuordnung bei Umschließung) |
| Commands | ✅ | Blaue Stickies |
| Actors / Personas | ✅ | Actor-Stickies |
| Policies | ✅ | Lila Stickies |
| Read Models / Views | ✅ | Grün + UI-Typ |
| External Systems | ✅ | Pink Stickies |
| Hotspots / offene Fragen | ✅ | Typ + Liste + Status/Priorität |
| Pivotal Events | ✅ | Eigener Typ + Process-Modeling-Phasen |
| Bounded Contexts erkennen/clustern | ✅ | Zeichnen, benennen, zuordnen |
| Quantität vor Qualität (viele Stickies) | ✅ | Freies Anlegen, keine künstlichen Limits |
| Aspekt | Status | In E2 |
|---|---|---|
| Feiner Prozess entlang der Timeline | ✅ | Canvas + Process-Modeling-Format |
| Policies zwischen Events und Commands | ✅ | Typ + Relation reactsWith |
| Pivotal Events als Phasengrenzen | ✅ | Typ + Facilitator-Checklisten |
| Swimlanes für Akteure/Systeme | ✅ | Auto-Zuordnung bei vollständiger Umschließung |
| Aspekt | Status | In E2 |
|---|---|---|
| Aggregates | ✅ | Typ + Methoden + Schema-Felder |
| Event Schemas | ✅ | JSON am Event/Aggregate + Event-Catalog-Export |
| Aggregate-Invarianten | ✅ | Detailleiste (eine Zeile pro Invariante) + Soft-Hint |
| Context Map (visuell) | ✅ | BC-Boxen + Context-Map-Linien + Markdown-Report |
| Context-Map-Muster (ACL, Shared Kernel, Customer/Supplier, …) | ✅ | BC↔BC-Relationen, Muster-Menü, Styles |
| Ubiquitous Language | 🟡 | Glossary; keine Bindung an Sticky-Labels |
| Microservice-/Modul-Schnitt | 🟡 | Über BC-Cluster und Cross-Boundary-Report |
| Aspekt | Status | In E2 |
|---|---|---|
| Phasenführung / Facilitator | ✅ | Drei Formate + Checklisten |
| Typbeschränkung pro Phase | ✅ | Palette gefiltert |
| Empfohlene Zeitfenster | ✅ | Phasen-Countdown Start/Pause/Reset im Facilitator |
| Mehrbenutzer / Echtzeit-Kollaboration | ✅ | Raum mit Single-Writer, CAS-Writes, Sync-Konflikt-Dialog (kein stilles Überschreiben) |
| Undo/Redo | ✅ | History-Stack, App-Leiste, ⌘Z / Ctrl+Z |
| Papier-Workshop-Extras (Opportunity, Problem, Value Stream overlays) | ❌ | Nur die 10 Kern-Typen |
| Aspekt | Status | In E2 |
|---|---|---|
| Lokale Persistenz | ✅ | .storm.json |
| Austauschbares Format | ✅ | Schema + $schema |
| Bild-/Report-Export | ✅ | SVG, PNG, mehrere MD-Reports |
| Miro-Direktimport | ❌ | Kein natives Miro-Format (CSV/Paste möglich außerhalb) |
- Arbeitsdatei unter Daten anlegen oder öffnen.
- Elementtyp in der linken Palette wählen → Doppelklick auf die Fläche — oder 1–9/0 für Typ und Enter/A für Anlegen in der Viewport-Mitte.
- Relationen: Canvas Verbinden oder Pfeil am Sticky.
- Struktur: Canvas Ansicht / Swimlane / Bounded Context.
- Feinschliff: Rechtsklick-Menü; Text/Schema/Invarianten in der rechten Leiste.
- Optional unter Session Facilitator-Format einschalten (inkl. Phasen-Timer).
- Export über Daten.
- UI-Sprache (Deutsch / English) unter Daten → Darstellung (oder
?lang=eneinmalig).
Details zur i18n-Infrastruktur: docs/i18n.md.
Siehe docs/GITHUB-PAGES.md.
npm run build:static
npx serve out
# → http://localhost:3000/E2/npm install
npm run dev
npm run test:runNext.js 15, React 19, TypeScript, Tailwind CSS, Zustand, Serwist (PWA).
Persistenz-Muster angelehnt an T2.
E2 deckt den Kern von Event Storming ab: alle gängigen Sticky-Typen, Relationen, Timeline, Swimlanes, Bounded Contexts, Hotspots, Glossary sowie geführte Workshop-Phasen (Big Picture → Process → Design) inklusive Soft-Validierung und Exporten für Übergabe.
Bewusst oder noch schwach: Echtzeit-Kollaboration (optional via Supabase — siehe docs/COLLABORATION.md); räumliche Zuordnung zu Lanes/Contexts erfolgt jetzt automatisch bei vollständiger Umschließung.
Wenn du Lücken priorisieren willst, sind die methodisch größten Hebel typischerweise: Glossary-Bindung und Auto-Zuordnung.
MIT © Andreas Bergmann — siehe LICENSE.
Beta: Das .storm.json-Dateiformat kann sich noch ändern und inkompatibel werden.