====== Diagramm-Plugin bpmn.io ====== [[https://www.dokuwiki.org/plugin:bpmnio|Plugin Doku]] Renderer [[https://bpmn.io/toolkit/bpmn-js/ | bpmn.io ]] ===== Syntax ===== BPMN-XML-Code optionale Parameter: * **zoom**: \\ die Größe des Diagramms kann durch einen Zoomfaktor eingestellt werden, z. B. für 80%: //mit Dezimal**punkt**!// * **src**: \\ der BPMN-XML-Code kann auch aus einer vorhandenen Datei "xyz.bpmn" übernommen werden: //beachte: Zeilenschaltung zwischen öffnendem und schließendem Tag!// ===== erstellen von BPMN-Diagrammen ===== BPNM-Diagramme lassen sich mit einer externen Anwendung erstellen oder innerhalb von DokuWiki mit einem graphischen Editor. ==== externer Editor ==== Erstelle ein Diagramm mit einer externen Anwendung und speichere es in eine lokale Datei mit der Endung ''.bpmn'': * entweder online mit der Web-App [[https://demo.bpmn.io/|BPMN.io]] * oder lokal mit der Desktop-Anwendung [[https://camunda.com/de/download/modeler/|Camunda-Modeler]] Füge das Diagramm in eine DokuWiki-Seite ein * entweder als Datei: * lade die erstellte BPMN-Datei "xyz.bpmn" in DokuWiki mit dem Medienmanger hoch, * verweise in einer Dokuwiki-Seite auf diese Datei mit * oder eingebettet: * öffne die BPMN-Datei mit einem Editor (Rechtsklick) * kopiere den Inhalt in die Zwischenablage \\ (z. B. mit Strg+'A' -> Strg+'C'), * schreibe in eine DokuWiki-Seite den Code * füge den Inhalt der Zwischenablage zwischen die beiden %%%%-Tags ein \\ (z. B. mit strg+'V'), * lösche die erste Zeile aus dem kopierten Textblock \\ %%%% ==== interner Editor ==== * öffne eine DokuWiki Seite zum Bearbeiten, * wähle in der Werkzeugleiste des Editors die Option {{:bpmnio:picker.png?nolink}} BPMNIO Diagram aus der Werkzeugleiste aus. Klicke nun auf {{:bpmnio:bpmn_add.png?nolink}} und speichere die Wiki-Seite. \\ Dadurch werden in den Quelltext der DokuWiki-Seite die entsprechenden XML-Codes eingefügt, begrenzt durch ''''-Tags. * Das eingebettete BMPN-Objekt wird bearbeitet über den Bearbeiten-Button unter dem Diagramm. Das eingebettete Diagramm lässt sich bei Bedarf in eine eigene Datei speichern, indem über den DokuWiki-Seiteneditor der Textblock zwischen '''' und '''' in eine leere Text-Datei kopiert wird. Die Datei sollte einen Namen mit der Endung ''.bpmn'' bekommen. ==== Spezifizierung ==== Die Elemente "Event", "Task" und "Gateway" lassen sich im graphischen Editor weiter spezifizieren/modifizieren. Verwende dazu das Symbol {{mdi>wrench}}, das neben einem markierten Element erscheint. Die externen Editoren **bpmn.io** oder **Camunda** bieten in der Seitenleiste auch ein passendes Untermenu {{mdi>dots-horizontal}} an. ===== Beispiele ===== === Diagramm aus Datei === === das gleiche Diagramm eingebettet === Flow_0l4yaki Flow_1xzeucs Flow_0l4yaki Flow_1xzeucs ... === Diagramm mit DokuWiki-Link === Elemente können DokuWiki-Links enthalten. Dazu muss das Label einen Links mit DokuWiki-Syntax. Alternativ wird im BPMN-Quellcode der Link mit DokuWiki-Syntax in das Attribut ''name='' anstelle eines Labels geschrieben: ==== Fehler ==== ... wenn sich Elemente in der Ecke rechts unten befinden **Empfehlung:** Elemente in einen Gruppenrahmen oder Lane platzieren /* behoben mit Update vom 14.06.2026 Der graphischen Editor fügt am Anfang des XML-Codes folgende Zeile ein: ... und danach werden die Dokuwiki-Links in den gelabelten Elementen nicht mehr gerendert: Nach manuellem Löschen dieser Zeile stimmen die Links dann wieder - bis zur nächsten Überarbeitung. [[https://github.com/Color-Of-Code/dokuwiki-plugin-bpmnio/issues/81]] **Empfehlung**: Diagramme mit klickbaren Inhalten grundsätzlich extern erstellen, auch Quellcode der Diagramme - z. B. für DokuWikiLinks - extern eintragen (mit Win-Editor, Notepad++ ...) */ {{:bpmnio:bpmniodokuwiki.png?150 |}}Beim Inline-Editor ist die Befehlsleiste je nach Bildschirm teilweise verdeckt und lässt sich auch nicht hochschieben. **Empfehlung**: * den Mousezeiger in die Befehlsleiste platzieren, * den Zoomfaktor des Browsers verkleinern (in Firefox mit Strg und dem Scroll-Rad der Mouse), * nach der Bearbeitung den Zoomfaktor des Browsers zurücksetzen (in Firefox Strg+0 für "100%"). interaktive BPMN-Diagramme mit Subprozessen erhalten zwar einen anklickbaren Button (wenn auch nicht immer an der gewünschten Stelle), aber: * die Diagramm-Größe passt sich nicht dem Ergebnis an, ggf. ist nur ein Ausschnitt sichtbar, * die Zoom-Stufe des Unterdiagramms ist immer 100%, auch wenn das Hauptdiagramm eine andere Stufe hat, * das Subprozess-Diagramm lässt sich nicht mehr schließen. \\ \\ **Empfehlung**: keine interaktiven Elemente verwenden, sondern lieber Zieldiagramm separat erstellen und mit einem DokuWiki-Link im Diagramm-Label darauf verweisen.