Seminar bpmn.io – bpmn-js erweitern: Renderer, Palette, Context Pad und Regeln

Das Aufbauseminar behandelt die gezielte Erweiterung von bpmn-js zu einem domänenspezifischen Modellierungswerkzeug. Dazu werden die interne Modularchitektur, Dependency Injection, Event Bus und Command Stack analysiert. Anschließend entstehen eigene Renderer, Palette- und Context-Pad-Einträge, Modellierungsregeln, Properties-Panel-Erweiterungen und automatisierte Tests. Besonderes Gewicht liegt auf wartbaren Erweiterungsgrenzen und der Vermeidung schwer aktualisierbarer Eingriffe in Kernmodule.

Inhaltsübersicht

1. Kapitel 1: Tag 1: Architektur und Erweiterungsmodule
2. Kapitel 2: Tag 2: Custom Renderer und visuelle Interaktion
3. Kapitel 3: Tag 3: Regeln, Commands und Properties Panel
4. Kapitel 4: Tag 4: Qualität, Packaging und Upgrade-Fähigkeit

Lernziele

• diagram-js, bpmn-js, Services und Dependency Injection fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Event Bus, Command Stack und Änderungslebenszyklus fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Renderer-Prioritäten und Shape-/Connection-Darstellung fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Marker, Overlays, Icons und fachliche Zustände fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Custom Modeling Rules und zulässige Verbindungen fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Eigene Commands, Undo und Redo fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Unit-, Integrations- und Browser-Tests für Module fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten
• Custom Bundle, Buildoptimierung und Assets fachlich einordnen, praktisch umsetzen und anhand definierter Prüfpunkte bewerten

Kapitel 1: Tag 1: Architektur und Erweiterungsmodule

Der Einstieg legt die technischen Grenzen und Lebenszyklen eigener Module offen.

Kapitelinhaltsverzeichnis: 1.1 diagram-js, bpmn-js, Services und Dependency Injection; 1.2 Event Bus, Command Stack und Änderungslebenszyklus; 1.3 Zusätzliche Module registrieren und konfigurieren; 1.4 Debugging, Servicezugriff und Erweiterungsgrenzen

1. Schritt 1: diagram-js, bpmn-js, Services und Dependency Injection

   Zunächst wird „diagram-js, bpmn-js, Services und Dependency Injection“ systematisch eingeordnet. Begriffe, Verantwortlichkeiten, Eingaben und erwartete Artefakte werden abgegrenzt. Das Teilziel wird mit den Qualitätskriterien des Kapitels verbunden.

2. Schritt 2: Event Bus, Command Stack und Änderungslebenszyklus

   Danach wird „Event Bus, Command Stack und Änderungslebenszyklus“ am Schulungssystem umgesetzt. Einstellungen, Dateien und Modellierungsschritte werden in einer nachvollziehbaren Reihenfolge ausgeführt; jeder Zwischenstand wird unmittelbar kontrolliert.

3. Schritt 3: Zusätzliche Module registrieren und konfigurieren

   Im nächsten Schritt wird „Zusätzliche Module registrieren und konfigurieren“ mit Positiv-, Grenz- und Fehlerfällen geprüft. Meldungen, Modellartefakte und sichtbares Verhalten werden ausgewertet, damit Abweichungen nicht nur behoben, sondern ursächlich verstanden werden.

4. Schritt 4: Debugging, Servicezugriff und Erweiterungsgrenzen

   Abschließend wird „Debugging, Servicezugriff und Erweiterungsgrenzen“ in eine wiederverwendbare Arbeitsanweisung überführt. Reviewpunkte, Versionshinweise, Zuständigkeiten und typische Fehlermuster werden so dokumentiert, dass der Ablauf im Projekt reproduzierbar bleibt.

Praxisaufgabe: Ein minimales Zusatzmodul wird registriert, beobachtet Modellierungsereignisse und protokolliert Commands ohne Kerncode zu verändern.

Kontrollpunkte: Das Ergebnis ist reproduzierbar, fachlich nachvollziehbar, ohne ungeklärte Warnungen gespeichert und anhand mindestens eines Fehlerfalls geprüft.

Kapitel 2: Tag 2: Custom Renderer und visuelle Interaktion

Eigene Darstellungen werden sauber vom BPMN-Datenmodell getrennt und in den Rendering-Lebenszyklus eingebunden.

Kapitelinhaltsverzeichnis: 2.1 Renderer-Prioritäten und Shape-/Connection-Darstellung; 2.2 Marker, Overlays, Icons und fachliche Zustände; 2.3 Palette-Provider und eigene Erzeugungsaktionen; 2.4 Context-Pad-Provider und situationsabhängige Aktionen

1. Schritt 1: Renderer-Prioritäten und Shape-/Connection-Darstellung

   Zunächst wird „Renderer-Prioritäten und Shape-/Connection-Darstellung“ systematisch eingeordnet. Begriffe, Verantwortlichkeiten, Eingaben und erwartete Artefakte werden abgegrenzt. Das Teilziel wird mit den Qualitätskriterien des Kapitels verbunden.

2. Schritt 2: Marker, Overlays, Icons und fachliche Zustände

   Danach wird „Marker, Overlays, Icons und fachliche Zustände“ am Schulungssystem umgesetzt. Einstellungen, Dateien und Modellierungsschritte werden in einer nachvollziehbaren Reihenfolge ausgeführt; jeder Zwischenstand wird unmittelbar kontrolliert.

3. Schritt 3: Palette-Provider und eigene Erzeugungsaktionen

   Im nächsten Schritt wird „Palette-Provider und eigene Erzeugungsaktionen“ mit Positiv-, Grenz- und Fehlerfällen geprüft. Meldungen, Modellartefakte und sichtbares Verhalten werden ausgewertet, damit Abweichungen nicht nur behoben, sondern ursächlich verstanden werden.

4. Schritt 4: Context-Pad-Provider und situationsabhängige Aktionen

   Abschließend wird „Context-Pad-Provider und situationsabhängige Aktionen“ in eine wiederverwendbare Arbeitsanweisung überführt. Reviewpunkte, Versionshinweise, Zuständigkeiten und typische Fehlermuster werden so dokumentiert, dass der Ablauf im Projekt reproduzierbar bleibt.

Praxisaufgabe: Ein domänenspezifisches Service-Task-Verhalten erhält eigene Darstellung, Palette, Context Pad und visuelle Statusinformationen.

Kontrollpunkte: Das Ergebnis ist reproduzierbar, fachlich nachvollziehbar, ohne ungeklärte Warnungen gespeichert und anhand mindestens eines Fehlerfalls geprüft.

Kapitel 3: Tag 3: Regeln, Commands und Properties Panel

Der dritte Tag verankert fachliche Vorgaben in Modellierungslogik und editierbaren Eigenschaften.

Kapitelinhaltsverzeichnis: 3.1 Custom Modeling Rules und zulässige Verbindungen; 3.2 Eigene Commands, Undo und Redo; 3.3 Properties-Panel-Gruppen, Einträge und Validierung; 3.4 Asynchrone Auswahldaten und fachliche Fehleranzeigen

1. Schritt 1: Custom Modeling Rules und zulässige Verbindungen

   Zunächst wird „Custom Modeling Rules und zulässige Verbindungen“ systematisch eingeordnet. Begriffe, Verantwortlichkeiten, Eingaben und erwartete Artefakte werden abgegrenzt. Das Teilziel wird mit den Qualitätskriterien des Kapitels verbunden.

2. Schritt 2: Eigene Commands, Undo und Redo

   Danach wird „Eigene Commands, Undo und Redo“ am Schulungssystem umgesetzt. Einstellungen, Dateien und Modellierungsschritte werden in einer nachvollziehbaren Reihenfolge ausgeführt; jeder Zwischenstand wird unmittelbar kontrolliert.

3. Schritt 3: Properties-Panel-Gruppen, Einträge und Validierung

   Im nächsten Schritt wird „Properties-Panel-Gruppen, Einträge und Validierung“ mit Positiv-, Grenz- und Fehlerfällen geprüft. Meldungen, Modellartefakte und sichtbares Verhalten werden ausgewertet, damit Abweichungen nicht nur behoben, sondern ursächlich verstanden werden.

4. Schritt 4: Asynchrone Auswahldaten und fachliche Fehleranzeigen

   Abschließend wird „Asynchrone Auswahldaten und fachliche Fehleranzeigen“ in eine wiederverwendbare Arbeitsanweisung überführt. Reviewpunkte, Versionshinweise, Zuständigkeiten und typische Fehlermuster werden so dokumentiert, dass der Ablauf im Projekt reproduzierbar bleibt.

Praxisaufgabe: Modellierungsregeln verhindern unzulässige Strukturen; zusätzliche Eigenschaften werden über ein eigenes Panel mit Undo-/Redo-Unterstützung bearbeitet.

Kontrollpunkte: Das Ergebnis ist reproduzierbar, fachlich nachvollziehbar, ohne ungeklärte Warnungen gespeichert und anhand mindestens eines Fehlerfalls geprüft.

Kapitel 4: Tag 4: Qualität, Packaging und Upgrade-Fähigkeit

Die Erweiterung wird testbar, paketierbar und für Versionswechsel vorbereitet.

Kapitelinhaltsverzeichnis: 4.1 Unit-, Integrations- und Browser-Tests für Module; 4.2 Custom Bundle, Buildoptimierung und Assets; 4.3 Kompatibilitätsmatrix und API-Änderungen; 4.4 Releaseprozess, Dokumentation und Fehlerdiagnose

1. Schritt 1: Unit-, Integrations- und Browser-Tests für Module

   Zunächst wird „Unit-, Integrations- und Browser-Tests für Module“ systematisch eingeordnet. Begriffe, Verantwortlichkeiten, Eingaben und erwartete Artefakte werden abgegrenzt. Das Teilziel wird mit den Qualitätskriterien des Kapitels verbunden.

2. Schritt 2: Custom Bundle, Buildoptimierung und Assets

   Danach wird „Custom Bundle, Buildoptimierung und Assets“ am Schulungssystem umgesetzt. Einstellungen, Dateien und Modellierungsschritte werden in einer nachvollziehbaren Reihenfolge ausgeführt; jeder Zwischenstand wird unmittelbar kontrolliert.

3. Schritt 3: Kompatibilitätsmatrix und API-Änderungen

   Im nächsten Schritt wird „Kompatibilitätsmatrix und API-Änderungen“ mit Positiv-, Grenz- und Fehlerfällen geprüft. Meldungen, Modellartefakte und sichtbares Verhalten werden ausgewertet, damit Abweichungen nicht nur behoben, sondern ursächlich verstanden werden.

4. Schritt 4: Releaseprozess, Dokumentation und Fehlerdiagnose

   Abschließend wird „Releaseprozess, Dokumentation und Fehlerdiagnose“ in eine wiederverwendbare Arbeitsanweisung überführt. Reviewpunkte, Versionshinweise, Zuständigkeiten und typische Fehlermuster werden so dokumentiert, dass der Ablauf im Projekt reproduzierbar bleibt.

Praxisaufgabe: Die entstandene Erweiterung wird als reproduzierbares Paket gebaut, automatisiert getestet und mit einer Upgrade- und Diagnosecheckliste versehen.

Kontrollpunkte: Das Ergebnis ist reproduzierbar, fachlich nachvollziehbar, ohne ungeklärte Warnungen gespeichert und anhand mindestens eines Fehlerfalls geprüft.

Zielgruppe und Voraussetzungen

Zielgruppe: Erfahrene JavaScript- und TypeScript-Entwickler, Frontend-Architekten, Plattformteams und Entwickler eigener Modellierungsprodukte.

Voraussetzungen: Praxiserfahrung mit bpmn-js oder vergleichbaren modularen JavaScript-Anwendungen, sichere npm- und Buildkenntnisse sowie BPMN-Grundverständnis.

Didaktik und Arbeitsweise

Kurze Fachimpulse wechseln mit Demonstrationen, strukturierten Arbeitsschritten, eigenständigen Übungen und kontrollierten Fehlerfällen. Jede Aufgabe enthält Ausgangslage, Ziel, Umsetzung, Prüfpunkte und Dokumentationsanforderungen. Dadurch entstehen nicht nur funktionierende Modelle oder Erweiterungen, sondern wiederholbare Vorgehensweisen für Projekt- und Teamarbeit.