Nachrichten-Symbol
  1. IronPDF for Node.js
  2. IronPDF for Node.js Blog
  3. Hilfe zum Knotenpunkt
  4. BPMN JS npm
HILFE ZUM KNOTENPUNKT

BPMN JS npm (Wie es für Entwickler funktioniert)

Veröffentlicht 29. September 2024
Teilen Sie:

Geschäftsprozessmodell und Notation (BPMN) ist ein Standard für die Prozessmodellierung, der eine grafische Darstellung zur Spezifikation von Geschäftsprozessen in einem Arbeitsablauf bietet. bpmn-js ist eine leistungsstarke Bibliothek, die es ermöglicht, BPMN-Elementdiagramme in Webanwendungen einzubetten und dabei interaktive Funktionen sowie umfangreiche Anpassungsoptionen bietet. Entwickelt von Camunda, bpmn-js wurde auf modernen Webmodeler-Technologien aufgebaut und kann nahtlos in JavaScript-Anwendungen integriert werden. Wir werden auch sehen, wie man mit BPMN-Diagrammelementen ein PDF erstellt. IronPDF.

Hauptmerkmale von bpmn-js

  1. Interaktive Modellierung: bpmn-js ermöglicht es Benutzern, BPMN-Elemente zu erstellen, zu ändern und Diagramme interaktiv anzusehen. Die benutzerfreundliche Oberfläche unterstützt Drag-and-Drop-Funktionalität, was das Entwerfen komplexer Workflows einfach macht.

  2. Anpassung: Die Bibliothek ist hochgradig anpassbar und ermöglicht es Entwicklern, das Aussehen und Verhalten von BPMN-Diagrammen an die Markenidentität und Anforderungen ihrer Anwendungen anzupassen.

  3. Erweiterbarkeit: bpmn-js ist mit Blick auf Erweiterbarkeit entwickelt worden. Entwickler können die Kernfunktionalität erweitern, indem sie dem BPMN-Diagramm-Interaktionsmodell benutzerdefinierte Elemente, Eigenschaften und Verhaltensweisen hinzufügen.

  4. Integration: Es integriert sich gut mit anderen Bibliotheken und Frameworks wie Angular und React, was die Nutzung in einer Vielzahl von Webanwendungen erleichtert.

  5. Standardkonformität: bpmn-js entspricht dem BPMN 2.0-Standard und stellt sicher, dass die erstellten Diagramme mit anderen BPMN-Tools und Bearbeitungstoolkitsystemen kompatibel sind.

Erste Schritte mit bpmn-js

Um mit bpmn-js zu beginnen, müssen Sie ein grundlegendes Webprojekt einrichten. Hier ist eine Schritt-für-Schritt-Anleitung zur Erstellung eines einfachen Diagramms mit bpmn-js.

Schritt 1: Einrichten des Projekts

Erstellen Sie zuerst ein neues Verzeichnis für Ihr Projekt und initialisieren Sie ein Node.js-Projekt mit den folgenden Befehlen:

mkdir bpmn-js-demo
cd bpmn-js-demo
npm init -y
mkdir bpmn-js-demo
cd bpmn-js-demo
npm init -y
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'mkdir bpmn-js-demo cd bpmn-js-demo npm init -y
VB   C#

Schritt 2: Installation von bpmn-js

Als Nächstes installieren Sie die bpmn-js-Bibliothek:

npm install bpmn-js
npm install bpmn-js
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install bpmn-js
VB   C#

Schritt 3: Erstellen der HTML-Struktur

Erstellen Sie eine index.html-Datei mit folgendem Quellcode-Inhalt:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bpmn-js Demo</title>
  <style>
    #canvas {
      width: 100%;
      height: 600px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div id="canvas"></div>
  <script src="app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>bpmn-js Demo</title>
  <style>
    #canvas {
      width: 100%;
      height: 600px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <div id="canvas"></div>
  <script src="app.js"></script>
</body>
</html>
#canvas {
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> bpmn-js Demo</title> <style> width: 100%;
"viewport" content="width=device-width, initial-scale=1.0"> (Of title) bpmn-js Demo</title> (Of style) width: 100 Mod 
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content
"UTF-8"> <meta name="viewport" content
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name
"en"> (Of head) <meta charset="UTF-8"> <meta name
<(Not DOCTYPE) html> <html lang="en"> (Of head) <meta charset
	  height:
	  600px
	  border:
	  1px solid #ccc
	}
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'  </style> </head> <body> <div id="canvas"></div> <script src="app.js"></script> </body> </html>
VB   C#

Schritt 4: Erstellen der JavaScript-Datei

Erstellen Sie eine app.js-Datei, um das BPMN-Diagramm zu initialisieren und darzustellen:

import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';
// XML string
const bpmnXML = `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="17.6.4" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  <process id="Process_1" isExecutable="false">
    <startEvent id="StartEvent_1">
      <outgoing>Flow_1a5niwu</outgoing>
    </startEvent>
    <task id="Activity_0ncu32f" name="This is the Test Diagram">
      <incoming>Flow_1a5niwu</incoming>
    </task>
    <sequenceFlow id="Flow_1a5niwu" sourceRef="StartEvent_1" targetRef="Activity_0ncu32f" />
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
        <omgdc:Bounds x="152" y="102" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0ncu32f_di" bpmnElement="Activity_0ncu32f">
        <omgdc:Bounds x="240" y="80" width="100" height="80" />
        <bpmndi:BPMNLabel />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="Flow_1a5niwu_di" bpmnElement="Flow_1a5niwu">
        <omgdi:waypoint x="188" y="120" />
        <omgdi:waypoint x="240" y="120" />
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>`;
const viewer = new BpmnViewer({
  container: '#canvas'
});
viewer.importXML(bpmnXML, function(err) {
  if (err) {
    console.error('Error rendering', err);
  } else {
    console.log('BPMN diagram rendered');
  }
});
import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';
// XML string
const bpmnXML = `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="17.6.4" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
  <process id="Process_1" isExecutable="false">
    <startEvent id="StartEvent_1">
      <outgoing>Flow_1a5niwu</outgoing>
    </startEvent>
    <task id="Activity_0ncu32f" name="This is the Test Diagram">
      <incoming>Flow_1a5niwu</incoming>
    </task>
    <sequenceFlow id="Flow_1a5niwu" sourceRef="StartEvent_1" targetRef="Activity_0ncu32f" />
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
        <omgdc:Bounds x="152" y="102" width="36" height="36" />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNShape id="Activity_0ncu32f_di" bpmnElement="Activity_0ncu32f">
        <omgdc:Bounds x="240" y="80" width="100" height="80" />
        <bpmndi:BPMNLabel />
      </bpmndi:BPMNShape>
      <bpmndi:BPMNEdge id="Flow_1a5niwu_di" bpmnElement="Flow_1a5niwu">
        <omgdi:waypoint x="188" y="120" />
        <omgdi:waypoint x="240" y="120" />
      </bpmndi:BPMNEdge>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>`;
const viewer = new BpmnViewer({
  container: '#canvas'
});
viewer.importXML(bpmnXML, function(err) {
  if (err) {
    console.error('Error rendering', err);
  } else {
    console.log('BPMN diagram rendered');
  }
});
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import BpmnViewer from 'bpmn-js/@lib/NavigatedViewer'; const bpmnXML = `<?xml version="1.0" encoding="UTF-8"?> <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="17.6.4" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"> <process id="Process_1" isExecutable="false"> <startEvent id="StartEvent_1"> <outgoing> Flow_1a5niwu</outgoing> </startEvent> <task id="Activity_0ncu32f" name="This is the Test Diagram"> <incoming> Flow_1a5niwu</incoming> </task> <sequenceFlow id="Flow_1a5niwu" sourceRef="StartEvent_1" targetRef="Activity_0ncu32f" /> </process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"> <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1"> <omgdc:Bounds x="152" y="102" width="36" height="36" /> </bpmndi:BPMNShape> <bpmndi:BPMNShape id="Activity_0ncu32f_di" bpmnElement="Activity_0ncu32f"> <omgdc:Bounds x="240" y="80" width="100" height="80" /> <bpmndi:BPMNLabel /> </bpmndi:BPMNShape> <bpmndi:BPMNEdge id="Flow_1a5niwu_di" bpmnElement="Flow_1a5niwu"> <omgdi:waypoint x="188" y="120" /> <omgdi:waypoint x="240" y="120" /> </bpmndi:BPMNEdge> </bpmndi:BPMNPlane> </bpmndi:BPMNDiagram> </definitions>`; const viewer = New BpmnViewer({ container: '#canvas' }); viewer.importXML(bpmnXML, @function(err) { if(err) { console.@error('@Error rendering', err); } else { console.log('BPMN diagram rendered'); } });
VB   C#

BPMN JS npm (Wie es für Entwickler funktioniert): Abbildung 1 - Ausgabe der BPMN-Diagramm-Darstellung

Schritt 5: Ausführen des Projekts

Um das Projekt bereitzustellen, können Sie einen einfachen statischen Server wie http-server verwenden:

npm install -g http-server
http-server .
npm install -g http-server
http-server .
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install -g http-server http-server.
VB   C#

Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:8080, um das BPMN-Diagramm auf der Seite angezeigt zu sehen.

Erweiterte Nutzung von bpmn-js

Während das obige Beispiel die Grundlagen abdeckt, bietet bpmn-js erweiterte Funktionen wie das Hinzufügen benutzerdefinierter Elemente, die Integration mit Backend-Systemen und den Export von Diagrammen. Sie können diese Funktionen in der bpmn-js Dokumentation.

Einführung von IronPDF für JavaScript

IronPDF ist eine leistungsstarke Bibliothek, die es Entwicklern ermöglicht, PDF-Dokumente programmgesteuert zu erzeugen, zu bearbeiten und zu konvertieren. Ursprünglich für .NET entwickelt, wurde IronPDF erweitert, um JavaScript zu unterstützen und bietet leistungsstarke PDF-Generierungsfähigkeiten für Webanwendungen.

Hauptfunktionen von IronPDF für JavaScript

  1. PDF-Erstellung: Erstellen Sie PDFs aus HTML, URLs oder rohen Inhalten ganz einfach.

  2. PDF-Bearbeitung: Zusammenführen, aufteilen und bearbeiten bestehender PDF-Dokumente.

  3. Konvertierung: Verschiedene Dokumentformate konvertieren (wie HTML und Bilder) zu PDF.

  4. Anpassung: Passen Sie das Erscheinungsbild und das Layout von PDFs mit umfassenden Stiloptionen an.

Integration von IronPDF mit bpmn-js

Um die Integration von IronPDF mit bpmn-js zu demonstrieren, erstellen wir ein Node.js-Projekt, das ein PDF aus einem BPMN-Diagramm generiert.

Schritt 1: Einrichten des Projekts

Erstellen Sie ein neues Verzeichnis für Ihr Projekt und initialisieren Sie es:

mkdir bpmn-ironpdf-demo
cd bpmn-ironpdf-demo
npm init -y
mkdir bpmn-ironpdf-demo
cd bpmn-ironpdf-demo
npm init -y
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'mkdir bpmn-ironpdf-demo cd bpmn-ironpdf-demo npm init -y
VB   C#

Schritt 2: Abhängigkeiten installieren

Installieren Sie IronPDF:

npm i @ironsoftware/ironpdf
npm i @ironsoftware/ironpdf
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm i @ironsoftware/ironpdf
VB   C#

BPMN JS npm (Erklärung für Entwickler): Abbildung 2 - IronPDF

Schritt 3: Erstellung des BPMN-Diagramms und PDF-Generierungsskripts

Erstellen Sie eine Datei mit dem Namen generatePDF.js:

const fs = require('fs');
const { createCanvas } = require('canvas');
const BpmnViewer = require('bpmn-js/lib/Viewer');
const PdfGenerator = require('@ironsoftware/ironpdf');
// BPMN XML data
const bpmnXML = `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
             xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC"
             xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI"
             xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"
             id="sample-diagram"
             targetNamespace="http://bpmn.io/schema/bpmn">
  <process id="Process_1" isExecutable="false">
    <startEvent id="StartEvent_1"/>
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
        <omgdc:Bounds x="173" y="102" width="36" height="36"/>
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>`;
const canvas = createCanvas(800, 600);
const viewer = new BpmnViewer({ container: canvas });
viewer.importXML(bpmnXML, function(err) {
  if (err) {
    console.error('Error rendering BPMN diagram:', err);
    return;
  }
  viewer.get('canvas').zoom('fit-viewport');
  const stream = canvas.createPNGStream();
  const out = fs.createWriteStream('diagram.png');
  stream.pipe(out);
  out.on('finish', () => {
    console.log('BPMN diagram saved as PNG');
    // Generate PDF from the saved PNG
    PdfGenerator.imageToPdf(filePaths)
      .then((pdf) => {
        pdf.saveAs('diagram.pdf');
        console.log('PDF generated and saved as diagram.pdf');
      })
      .catch((error) => {
        console.error('Error generating PDF:', error);
      });
  });
});
const fs = require('fs');
const { createCanvas } = require('canvas');
const BpmnViewer = require('bpmn-js/lib/Viewer');
const PdfGenerator = require('@ironsoftware/ironpdf');
// BPMN XML data
const bpmnXML = `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL"
             xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
             xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI"
             xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC"
             xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI"
             xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd"
             id="sample-diagram"
             targetNamespace="http://bpmn.io/schema/bpmn">
  <process id="Process_1" isExecutable="false">
    <startEvent id="StartEvent_1"/>
  </process>
  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1">
      <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1">
        <omgdc:Bounds x="173" y="102" width="36" height="36"/>
      </bpmndi:BPMNShape>
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
</definitions>`;
const canvas = createCanvas(800, 600);
const viewer = new BpmnViewer({ container: canvas });
viewer.importXML(bpmnXML, function(err) {
  if (err) {
    console.error('Error rendering BPMN diagram:', err);
    return;
  }
  viewer.get('canvas').zoom('fit-viewport');
  const stream = canvas.createPNGStream();
  const out = fs.createWriteStream('diagram.png');
  stream.pipe(out);
  out.on('finish', () => {
    console.log('BPMN diagram saved as PNG');
    // Generate PDF from the saved PNG
    PdfGenerator.imageToPdf(filePaths)
      .then((pdf) => {
        pdf.saveAs('diagram.pdf');
        console.log('PDF generated and saved as diagram.pdf');
      })
      .catch((error) => {
        console.error('Error generating PDF:', error);
      });
  });
});
Private const fs = require( 'fs');
'INSTANT VB TODO TASK: The following line could not be converted:
const
	Private createCanvas } = require( 'canvas');
Private const BpmnViewer = require( 'bpmn-js/@lib/Viewer');
Private const PdfGenerator = require( '@ironsoftware/ironpdf');
' BPMN XML data
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: const bpmnXML = `<?xml version="1.0" encoding="UTF-8"?> <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <process id="Process_1" isExecutable="false"> <startEvent id="StartEvent_1"/> </process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"> <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1"> <omgdc:Bounds x="173" y="102" width="36" height="36"/> </bpmndi:BPMNShape> </bpmndi:BPMNPlane> </bpmndi:BPMNDiagram> </definitions>`;
"36" height="36"/> </bpmndi:BPMNShape> </bpmndi:BPMNPlane> </bpmndi:BPMNDiagram> </definitions>`
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <process id="Process_1" isExecutable="false"> <startEvent id="StartEvent_1"/> </process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"> <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1"> <omgdc:Bounds x="173" y="102" width="36" height
"102" width="36" height
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <process id="Process_1" isExecutable="false"> <startEvent id="StartEvent_1"/> </process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"> <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1"> <omgdc:Bounds x="173" y="102" width
"173" y="102" width
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <process id="Process_1" isExecutable="false"> <startEvent id="StartEvent_1"/> </process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"> <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1"> <omgdc:Bounds x="173" y
"StartEvent_1"> <omgdc:Bounds x="173" y
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <process id="Process_1" isExecutable="false"> <startEvent id="StartEvent_1"/> </process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"> <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement="StartEvent_1"> <omgdc:Bounds x
"StartEvent_1_di" bpmnElement="StartEvent_1"> <omgdc:Bounds x
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <process id="Process_1" isExecutable="false"> <startEvent id="StartEvent_1"/> </process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"> <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement
"Process_1"> <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <process id="Process_1" isExecutable="false"> <startEvent id="StartEvent_1"/> </process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_1"> <bpmndi:BPMNShape id
"BPMNPlane_1" bpmnElement="Process_1"> <bpmndi:BPMNShape id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <process id="Process_1" isExecutable="false"> <startEvent id="StartEvent_1"/> </process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement
"BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <process id="Process_1" isExecutable="false"> <startEvent id="StartEvent_1"/> </process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id
"StartEvent_1"/> </process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <process id="Process_1" isExecutable="false"> <startEvent id="StartEvent_1"/> </process> <bpmndi:BPMNDiagram id
"false"> <startEvent id="StartEvent_1"/> </process> <bpmndi:BPMNDiagram id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <process id="Process_1" isExecutable="false"> <startEvent id
"Process_1" isExecutable="false"> <startEvent id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <process id="Process_1" isExecutable
"http://bpmn.io/schema/bpmn"> <process id="Process_1" isExecutable
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <process id
"sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <process id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace
"http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id
"http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation
"http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi
If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc="http://www.omg.org/spec/DD/20100524/DC" xmlns:omgdi
'INSTANT VB TODO TASK: The following line contains an assignment within expression that was not extracted by Instant VB:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc
	Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc
Private const canvas = createCanvas(800, 600)
Else
'INSTANT VB TODO TASK: The following line contains an assignment within expression that was not extracted by Instant VB:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc
	Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("UTF-8", > <definitions xmlns="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns, xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns), bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns):omgdc
End If
Private const viewer = New BpmnViewer({ container:= canvas })
viewer.importXML(bpmnXML, [function](err) { if(err) { console.error( '@Error rendering BPMN diagram:', err); Return; } viewer.@get('canvas').zoom('fit-viewport'); const stream = canvas.createPNGStream(); const out = fs.createWriteStream('diagram.png'); stream.pipe(out); out.on('finish', () =>
If True Then
	console.log( 'BPMN diagram TryCast(saved, PNG'));
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	PdfGenerator.imageToPdf(filePaths).@then((pdf) =>
'	{
'		pdf.saveAs('diagram.pdf');
'		console.log('PDF generated @and TryCast(saved, diagram.pdf'));
'	}
'INSTANT VB TODO TASK: Lambda expressions and anonymous methods are not converted by Instant VB if local variables of the outer method are referenced within the anonymous method:
	).catch(([error]) =>
End If
)
VB   C#

Schritt 4: Ausführen des Skripts

Führen Sie das Skript aus, um das BPMN-Diagramm zu erstellen und als PDF zu speichern:

node generatePDF.js
node generatePDF.js
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'node generatePDF.js
VB   C#

BPMN JS npm (Wie es für Entwickler funktioniert): Abbildung 3 - PDF-Ausgabe

Schlussfolgerung

Die Integration von bpmn-js und IronPDF ermöglicht es Ihnen, interaktive BPMN-Diagramme zu erstellen und in PDF-Dokumente zu konvertieren, wodurch die Leistungsfähigkeit der visuellen Prozessmodellierung mit der Vielseitigkeit der PDF-Generierung kombiniert wird. Diese Integration kann besonders nützlich sein, um Dokumentationen, Berichte oder jedes andere Format zu erstellen, in dem eine visuelle Darstellung von Prozessen erforderlich ist. Beide Bibliotheken bieten umfangreiche Dokumentation und Unterstützung, was den Einstieg erleichtert und die Erweiterung der bereitgestellten Grundbeispiele ermöglicht.

Für umfassende Details zur IronPDF-Lizenzierung, beziehen Sie sich auf die IronPDF-Lizenz seite. Um mehr Verständnis oder zusätzliche Ressourcen zu erlangen, schauen Sie sich unser ausführliches Tutorial zu Konvertierung von HTML in PDF.

< PREVIOUS
Moment.js (Wie es für Entwickler funktioniert)
NÄCHSTES >
Body-Parser-Node (Wie es für Entwickler funktioniert)

Installation mit npm

Version:2024.9

> npm i @ironsoftware/ironpdf

Ein Problem melden

Sind Sie bereit, loszulegen? Version: 2024.9 gerade veröffentlicht

Kostenlose npm-Installation Lizenzen anzeigen >

Holen Sie sich Ihr FREE

30-Tage-Testschlüssel sofort.

15-Tage-Probe-Schlüssel sofort.

bullet_checkedKeine Kreditkarte oder Kontoerstellung erforderlich
Das Versuchsformular wurde eingereicht
erfolgreich.

Ihr Testschlüssel sollte in der E-Mail enthalten sein.
Sollte dies nicht der Fall sein, wenden Sie sich bitte an
support@ironsoftware.com

schuss_testTest in der Produktion
ohne Wasserzeichen
aufzählungszeichen_Kalender30 Tage vollständig
funktionsfähiges Produkt
aufzählungszeichen_Unterstützung24/5 technisch
unterstützung während des Prozesses

Ich danke Ihnen!

Ihr Lizenzschlüssel wurde an die angegebene E-Mail-Adresse gesendet.Kontakt

24-Stunden-Upgrade-Angebot:

Save 50% in einem
Professional Upgrade

Weiter Professional für 10 Entwickler
und unbegrenzte Projekte.

stunden

:

minuten

:

sekunden

Upgrade auf Professional

Upgrade

Professional

$600 USD

$299 USD

  • 10 Entwickler
  • 10 Standorte
  • 10 Projekte
HEUTE NUR

5 .NET-Produkte zum Preis von 2

IronPDF IronOCR IronXL IronBarcode IronWebscraper

Gesamtwert der Suite:

$7,192 USD

Upgrade-Preis

HEUTE
NUR

$499 USD

Nach 24 Std

$1,098 USD

Kostenlos testen

Voll funktionsfähiges Produkt, sofortiger Erhalt des Schlüssels