- werkzeuge/bootstrap/: Bootstrap 5.3.8 (CSS, JS-Bundle) und Bootstrap Icons 1.13.1 (CSS, woff2/woff) byte-gleich aus den npm-Paketen, Integrität geprüft; README mit Version, Quelle, Integrität, Lizenz und Aktualisierung; Lizenzen (MIT) daneben; .gitattributes: binary, die README bleibt Text mit Diff. - werkzeuge/stil/ag_prozesse.css: eigene kleine Stilschicht (ag-*): Seite in voller Höhe, dunkle Navigationsleiste, hellgrauer Hintergrund, Karten mit farbigem Rand, Tabellenziffern, Druck. Vorbild VLN_SN/EA-Bilanz, nichts übernommen. - Vorschau: Kopfzeile als dunkle Navigationsleiste mit Icon-Knöpfen; JavaScript, IDs und Zeichenfläche (Wasserzeichen) unverändert. - scripts/vorschau.py bettet Bootstrap, Icons und Stil ein und setzt die Icon-Schrift als data:-URI ein (_schriften_einbetten); ein nicht einbettbarer Schriftverweis bricht laut ab. - Tests: drei neue in test_vorschau.py; der Aufbau von test_bibliothek_mit_script_ende_wird_abgelehnt kopiert jetzt ganz werkzeuge/ (Erwartung unverändert). - AGENTS.md: eingebettete Fremdbibliotheken sind bpmn-js und Bootstrap. - Tests: python -m pytest -q -> 256 bestanden, 1 übersprungen. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2.9 KiB
BPMN-Vorschau
Zeigt eine .bpmn-Datei als Diagramm im Browser — offline, ohne PICTURE, ohne dass die Datei den Rechner verlässt.
Grundlage ist bpmn-js, die Bibliothek hinter bpmn.io, lokal eingebettet.
Benutzen
Mit Python (aus dem Workspace-Root) — öffnet die Vorschau direkt im Browser, auch für einen Entwurf:
python scripts/vorschau.py Prozessbibliothek/antrag-pruefen/antrag-pruefen.bpmn
python scripts/vorschau.py entwuerfe/antrag-pruefen.md # .md wird vorher umgewandelt
Ohne Python: werkzeuge/vorschau/vorschau.html im Browser öffnen (Doppelklick) und eine .bpmn hineinziehen
oder über „Datei öffnen …“ wählen. Das funktioniert auch mit einer aus Gitea heruntergeladenen Datei.
Mausrad zoomt, Ziehen verschiebt, „Einpassen“ zeigt das ganze Diagramm.
Was die Vorschau zeigt — und was nicht
Sie zeigt, was in der Datei steht: Elemente, Lanes, Kanten mit genau den Anschlusspunkten, die md_to_bpmn.py
berechnet hat. Damit eignet sie sich, um Entwürfe vor der Freigabe und Modelländerungen im Review anzusehen.
PICTURE kann dieselbe Datei anders darstellen (eigene Schriften, eigene Behandlung von Anschlusspunkten). Der Import
in PICTURE bleibt deshalb der letzte Nachweis.
Aussehen
Die Seite nutzt Bootstrap mit Bootstrap Icons (werkzeuge/bootstrap/, eigene README) und den gemeinsamen Stil der
AG (werkzeuge/stil/ag_prozesse.css): dunkle Navigationsleiste mit Knopfgruppe wie in den Anwendungen von VLN_SN.
scripts/vorschau.py bettet alles in die erzeugte Einzeldatei ein, auch die Icon-Schrift.
Eingebettete Bibliothek
| Paket | bpmn-js 18.29.1 (npm), Datei dist/bpmn-navigated-viewer.production.min.js und dist/assets/*.css |
| Quelle | https://registry.npmjs.org/bpmn-js/-/bpmn-js-18.29.1.tgz |
| Integrität (npm) | sha512-7M3O9LeHbV2ZW9xLXap8CMmIjR+iXWqiXrz7Rt1hE+DqLGhULuwOIgTsQGtXPGVUCrnrk4L38NVlc5R8thOHJw== |
| Lizenz | MIT mit Auflage, siehe bpmn-js/LICENSE |
Lizenzauflage: Das bpmn.io-Wasserzeichen unten rechts im Diagramm darf nicht entfernt, verändert oder von anderen Elementen überdeckt werden. Bedienelemente deshalb nie in die untere rechte Ecke der Zeichenfläche legen.
Die Bibliothek lädt nichts aus dem Netz nach; die Adressen darin sind XML-Namensräume und der Link des Wasserzeichens.
Das Font-Paket bpmn-font wird nur vom Editor gebraucht und fehlt bewusst.
Aktualisieren
- Neue Version bei npm nachsehen, Tarball laden und die
integrityaushttps://registry.npmjs.org/bpmn-js/<version>gegen die Prüfsumme des geladenen Archivs prüfen. - Die vier Dateien in
bpmn-js/ersetzen (LICENSEauf geänderte Auflagen lesen). python -m pytest -q—scripts/vorschau.pylehnt eine Bibliothek ab, die<script/</scriptenthält und damit nicht sicher eingebettet werden kann.- Eine Vorschau erzeugen und im Browser ansehen; Tabelle oben nachziehen. Eigener Pull Request.