plugins:bpmnio [PH Freiburg]

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== Diagramm-Plugin bpmn.io ======
<row>
<col sm="6">

[[https://www.dokuwiki.org/plugin:bpmnio|Plugin Doku]]

Renderer [[https://bpmn.io/toolkit/bpmn-js/ | bpmn.io ]] 
===== Syntax =====
<code><bpmnio type="bpmn">
   BPMN-XML-Code
</bpmnio></code>
optionale Parameter:
  * **zoom**: \\ die Größe des Diagramms kann durch einen Zoomfaktor eingestellt werden, z. B. für 80%: <code><bpmnio type="bpmn" zoom="0.8"> 
</bpmnio></code> //mit Dezimal**punkt**!//
  * **src**: \\ der BPMN-XML-Code kann auch aus einer vorhandenen Datei "xyz.bpmn" übernommen werden: <code><bpmnio type="bpmn" src="xyz.bpmn"> 
</bpmnio></code> //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<code><bpmnio type="bpmn" src="xyz.bpmn"> 
</bpmnio></code>
  * oder eingebettet:
    * öffne die BPMN-Datei mit einem Editor (Rechtsklick)
    * kopiere den Inhalt in die Zwischenablage \\ (z. B. mit <key>Strg+'A'</key> -> <key>Strg+'C'</key>),
    * schreibe in eine DokuWiki-Seite den Code  <code><bpmnio type="bpmn">
</bpmnio></code>
    * füge den Inhalt der Zwischenablage zwischen die beiden %%<bpmnio>%%-Tags ein \\ (z. B. mit <key>strg+'V'</key>),
    * lösche die erste Zeile aus dem kopierten Textblock \\ %%<?xml version="1.0" encoding="UTF-8"?>%% 
 
==== interner Editor ====

  * öffne eine DokuWiki Seite zum Bearbeiten, 
  * wähle in der Werkzeugleiste des Editors die Option {{:bpmnio:picker.png?nolink}} <key>BPMNIO Diagram</key> 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 ''<bpmnio>''-Tags.
  * Das eingebettete BMPN-Objekt wird bearbeitet über den <key>Bearbeiten</key>-Button unter dem Diagramm.

<WRAP lo>Das eingebettete Diagramm lässt sich bei Bedarf in eine eigene Datei speichern, indem über den DokuWiki-Seiteneditor der Textblock zwischen ''<bpmnio ... >'' und ''</bpmnio>'' in eine leere Text-Datei kopiert wird. Die Datei sollte einen Namen mit der Endung ''.bpmn'' bekommen.</WRAP>
==== 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.
<bpmnio type="bpmn" src=":bpmnio:diagramm-erweitert.bpmn">
</bpmnio>
</col>
<col sm="6">
===== Beispiele =====
=== Diagramm aus Datei ===

<bpmnio type="bpmn" src=":bpmnio:diagramm-lane.bpmn">
</bpmnio>
<code>
<bpmnio type="bpmn" src=":bpmnio:diagramm-lane.bpmn">
</bpmnio>
</code>
=== das gleiche Diagramm eingebettet ===

<bpmnio type="bpmn">
<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" targetNamespace="http://bpmn.io/bpmn" exporter="Camunda Modeler" exporterVersion="5.46.1">
  <collaboration id="Collaboration_16b3tfy">
    <participant id="Participant_1uzbeky" processRef="Process_0zw9sap" />
  </collaboration>
  <process id="Process_0zw9sap" isExecutable="false">
    <sequenceFlow id="Flow_0l4yaki" sourceRef="Event_0t6zzfj" targetRef="Activity_0a4pnvn" />
    <sequenceFlow id="Flow_1xzeucs" sourceRef="Activity_0a4pnvn" targetRef="Event_0zzmke5" />
    <task id="Activity_0a4pnvn" name="Prozess">
      <incoming>Flow_0l4yaki</incoming>
      <outgoing>Flow_1xzeucs</outgoing>
    </task>
    <startEvent id="Event_0t6zzfj" name="Start">
      <outgoing>Flow_0l4yaki</outgoing>
    </startEvent>
    <endEvent id="Event_0zzmke5" name="Ende">
      <incoming>Flow_1xzeucs</incoming>
    </endEvent>
  </process>
  <bpmndi:BPMNDiagram id="BpmnDiagram_1">
    <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Collaboration_16b3tfy">
      <bpmndi:BPMNShape id="Participant_1uzbeky_di" bpmnElement="Participant_1uzbeky" isHorizontal="true">
        <omgdc:Bounds x="152" y="80" width="378" height="140" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0a4pnvn_di" bpmnElement="Activity_0a4pnvn">
        <omgdc:Bounds x="300" y="100" width="100" height="80" />
        <bpmndi:BPMNLabel />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Event_0t6zzfj_di" bpmnElement="Event_0t6zzfj">
        <omgdc:Bounds x="232" y="122" width="36" height="36" />
        <bpmndi:BPMNLabel>
          <omgdc:Bounds x="238" y="165" width="25" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Event_0zzmke5_di" bpmnElement="Event_0zzmke5">
        <omgdc:Bounds x="432" y="122" width="36" height="36" />
        <bpmndi:BPMNLabel>
          <omgdc:Bounds x="437" y="165" width="26" height="14" />
        </bpmndi:BPMNLabel>
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="Flow_0l4yaki_di" bpmnElement="Flow_0l4yaki">
        <di:waypoint x="268" y="140" />
        <di:waypoint x="300" y="140" />
      </bpmndi:BPMNEdge>
      <bpmndi:BPMNEdge id="Flow_1xzeucs_di" bpmnElement="Flow_1xzeucs">
        <di:waypoint x="400" y="140" />
        <di:waypoint x="432" y="140" />
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>
</bpmnio>
<code>
<bpmnio type="bpmn">
<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" targetNamespace="http://bpmn.io/bpmn" exporter="Camunda Modeler" exporterVersion="5.46.1">
  <collaboration id="Collaboration_16b3tfy">
    <participant id="Participant_1uzbeky" processRef="Process_0zw9sap" />
  </collaboration>
  <process id="Process_0zw9sap" isExecutable="false">
    <sequenceFlow id="Flow_0l4yaki" sourceRef="Event_0t6zzfj" targetRef="Activity_0a4pnvn" />
...
</bpmnio>
</code>

=== 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:
<code><task id="Activity_0ey5eis" name="[[start|zur Startseite]]" /></code>
<bpmnio type="bpmn" src=":bpmnio:task-with-link.bpmn">
</bpmnio>

==== Fehler ====

<panel type="primary" title="Logo überdeckt Diagramm">
... wenn sich Elemente in der Ecke rechts unten befinden
<bpmnio type="bpmn" src=":bpmnio:diagramm.bpmn">
</bpmnio>
**Empfehlung:**

Elemente in einen Gruppenrahmen oder Lane platzieren
</panel>
/* behoben mit Update vom 14.06.2026
<panel type="primary" title="eingebettes Diagramm mit Link">

Der graphischen Editor fügt am Anfang des XML-Codes folgende Zeile ein:
<code> <?xml version="1.0" encoding="UTF-8"?> </code>
... und danach werden die Dokuwiki-Links in den gelabelten Elementen nicht mehr gerendert:  

<bpmnio type="bpmn">
<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" targetNamespace="http://bpmn.io/bpmn" exporter="Camunda Modeler" exporterVersion="5.46.1">
  <process id="Process_0zw9sap" isExecutable="false">
    <task id="Activity_0ey5eis" name="[[start|zur Startseite]]" />
    <group id="Group_1cnnv55" />
  </process>
  <bpmndi:BPMNDiagram id="BpmnDiagram_1">
    <bpmndi:BPMNPlane id="BpmnPlane_1" bpmnElement="Process_0zw9sap">
      <bpmndi:BPMNShape id="Activity_0ey5eis_di" bpmnElement="Activity_0ey5eis">
        <omgdc:Bounds x="140" y="100" width="100" height="80" />
        <bpmndi:BPMNLabel />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Group_1cnnv55_di" bpmnElement="Group_1cnnv55">
        <omgdc:Bounds x="120" y="80" width="300" height="120" />
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>
</bpmnio>
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++ ...)
</panel>
*/
<panel type="primary" title="Editor">
{{: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 <key>Strg</key> und dem Scroll-Rad der Mouse),
  * nach der Bearbeitung den Zoomfaktor des Browsers zurücksetzen (in Firefox <key>Strg</key>+<key>0</key> für "100%").
</panel>
<panel type="primary" title="Subprozesse">
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.
<bpmnio type="bpmn" src=":bpmnio:diagramm-sub.bpmn" zoom="1.5">
</bpmnio>
\\
<bpmnio type="bpmn" src=":bpmnio:diagramm-sub2.bpmn">
</bpmnio>
\\
**Empfehlung**: 

keine interaktiven Elemente verwenden, sondern lieber Zieldiagramm separat erstellen und mit einem DokuWiki-Link im Diagramm-Label darauf verweisen.
</panel>
</col>
</row>