Files

T

DanielandClaude Opus 5.5 19947a845f BPMN-Vorschau im Browser, offline, auf Basis von bpmn-js

- werkzeuge/vorschau/vorschau.html: Anzeige per Drag & Drop oder
  Dateiauswahl, Zoom, Einpassen, Fehlermeldungen; funktioniert ohne
  Python direkt aus dem Dateisystem.
- scripts/vorschau.py: erzeugt aus .bpmn oder Arbeitsschritt-.md eine
  in sich geschlossene Seite und öffnet sie; --stdin als Filter, etwa
  für einen Gitea-Renderer. Diagramm wird mit maskiertem '<' eingebettet,
  die Bibliothek unverändert und nur auf <script/</script geprüft.
- bpmn-js 18.29.1 (navigated viewer + CSS + LICENSE) lokal eingebettet,
  npm-Integrität geprüft; lädt nichts aus dem Netz. Wasserzeichen bleibt
  laut Lizenzauflage sichtbar.
- tests/test_vorschau.py: 11 Tests; Skill sn-bpmn, Anleitung, AGENTS.md,
  README, Leitfäden, Fallstricke und STATUS ergänzt.
- Tests: python -m pytest -q -> 55 bestanden. Darstellung mit Edge
  headless geprüft (beide Beispiele, leere Seite, kaputte Datei).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

2026-09-23 13:32:14 +02:00

2.6 KiB

Raw Blame History

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 prozesse/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.

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 integrity aus https://registry.npmjs.org/bpmn-js/<version> gegen die Prüfsumme des geladenen Archivs prüfen.
Die vier Dateien in bpmn-js/ ersetzen (LICENSE auf geänderte Auflagen lesen).
python -m pytest -q — scripts/vorschau.py lehnt eine Bibliothek ab, die <script/</script enthält und damit nicht sicher eingebettet werden kann.
Eine Vorschau erzeugen und im Browser ansehen; Tabelle oben nachziehen. Eigener Pull Request.

2.6 KiB Raw Blame History