Files
Projektwissen/werkzeuge/vorschau/README.md
T
DanielandClaude Opus 5.5 b341a658bc Bootstrap lokal einbetten und Stil der AG anlegen (#27)
- 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>
2026-09-25 20:11:29 +02:00

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

  1. 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.
  2. Die vier Dateien in bpmn-js/ ersetzen (LICENSE auf geänderte Auflagen lesen).
  3. python -m pytest -q — scripts/vorschau.py lehnt eine Bibliothek ab, die <script/</script enthält und damit nicht sicher eingebettet werden kann.
  4. Eine Vorschau erzeugen und im Browser ansehen; Tabelle oben nachziehen. Eigener Pull Request.