NODE-HILFE

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

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Aktualisiert:Juni 22, 2025

Business Process Model and Notation (BPMN) ist ein Standard für die Prozessmodellierung, der eine grafische Darstellung für die Spezifikation von Geschäftsprozessen in einem Workflow bietet. bpmn-js ist eine leistungsstarke Bibliothek, mit der Sie BPMN-Elementdiagramme in Webanwendungen einbetten können. Sie bietet interaktive Funktionen und umfangreiche Anpassungsmöglichkeiten. Das von Camunda entwickelte bpmn-js basiert auf modernen Web Modeler-Technologien und kann nahtlos in JavaScript-Anwendungen integriert werden. Wir werden auch sehen, wie man ein PDF mit BPMN-Diagrammelementen mit IronPDF erstellt.

Wichtige Merkmale von bpmn-js

Interaktive Modellierung: bpmn-js ermöglicht es den Benutzern, BPMN-Elemente zu erstellen, zu ändern und Diagramme interaktiv zu betrachten. Die benutzerfreundliche Oberfläche unterstützt Drag-and-Drop-Funktionen, die die Gestaltung komplexer Arbeitsabläufe erleichtern.
Anpassung: Die Bibliothek ist in hohem Maße anpassbar und ermöglicht es Entwicklern, das Aussehen der BPMN-Diagramme an das Branding und die Anforderungen ihrer Anwendungen anzupassen.
Erweiterbarkeit: bpmn-js wurde mit Blick auf die Erweiterbarkeit entwickelt. Entwickler können die Kernfunktionalität erweitern, indem sie benutzerdefinierte Elemente, Eigenschaften und Verhaltensweisen zum Interaktionsmodell des BPMN-Diagramms hinzufügen.
Integration: Es lässt sich gut mit anderen Bibliotheken und Frameworks wie Angular und React integrieren, was den Einsatz in einer breiten Palette von Webanwendungen erleichtert.
Standardkonformität: bpmn-js hält sich an den BPMN 2.0-Standard, wodurch sichergestellt wird, dass die erstellten Diagramme mit anderen BPMN-Tools und Editier-Toolkit-Systemen kompatibel sind.

Einstieg mit bpmn-js

Um mit bpmn-js zu beginnen, müssen Sie ein einfaches Webprojekt einrichten. Hier finden Sie eine schrittweise Anleitung zur Erstellung eines einfachen Diagramms mit bpmn-js.

Schritt 1: Einrichten des Projekts

Erstellen Sie zunächst 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

SHELL

Schritt 2: Installieren von bpmn-js

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

npm install bpmn-js

npm install bpmn-js

SHELL

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>

HTML

Schritt 4: Erstellen der JavaScript-Datei

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

// Import the BpmnViewer class from bpmn-js
import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';

// BPMN XML data as a 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">
  <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>`;

// Initialize the viewer with the container where the BPMN diagram will be rendered
const viewer = new BpmnViewer({
  container: '#canvas'
});

// Import the BPMN XML and render the diagram
viewer.importXML(bpmnXML, function(err) {
  if (err) {
    console.error('Error rendering', err); // Log an error message if rendering fails
  } else {
    console.log('BPMN diagram rendered'); // Log success message if rendering is successful
  }
});

// Import the BpmnViewer class from bpmn-js
import BpmnViewer from 'bpmn-js/lib/NavigatedViewer';

// BPMN XML data as a 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">
  <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>`;

// Initialize the viewer with the container where the BPMN diagram will be rendered
const viewer = new BpmnViewer({
  container: '#canvas'
});

// Import the BPMN XML and render the diagram
viewer.importXML(bpmnXML, function(err) {
  if (err) {
    console.error('Error rendering', err); // Log an error message if rendering fails
  } else {
    console.log('BPMN diagram rendered'); // Log success message if rendering is successful
  }
});

JAVASCRIPT

BPMN JS npm (How It Works For Developers): Abbildung 1 - BPMN Diagramm Rendering Output

Schritt 5: Ausführen des Projekts

Für die Bereitstellung des Projekts 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 .

SHELL

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

Erweiterte Verwendung von bpmn-js

Während das obige Beispiel die Grundlagen abdeckt, bietet bpmn-js fortgeschrittenere 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 nachlesen.

Einführung in IronPDF für JavaScript

IronPDF ist eine leistungsstarke Bibliothek, die es Entwicklern ermöglicht, PDF-Dokumente programmatisch zu erzeugen, zu bearbeiten und zu konvertieren. IronPDF wurde ursprünglich für .NET entwickelt und um die Unterstützung von JavaScript erweitert, um robuste PDF-Generierungsfunktionen für Webanwendungen bereitzustellen.

Wichtige Funktionen von IronPDF für JavaScript

PDF-Generierung: Erstellen Sie mühelos PDFs aus HTML, URLs oder Rohinhalten.
PDF-Bearbeitung: Zusammenführen, Teilen und Ändern vorhandener PDF-Dokumente.
Konvertierung: Konvertierung verschiedener Dokumentformate (wie HTML und Bilder) in PDF.
Anpassung: Passen Sie das Erscheinungsbild und das Layout von PDFs mit umfangreichen Styling-Optionen 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 erzeugt.

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

SHELL

Schritt 2: Installieren von Abhängigkeiten

IronPDF installieren:

 npm i @ironsoftware/ironpdf

BPMN JS npm (How It Works For Developers): Abbildung 2 - IronPDF

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

Erstellen Sie eine Datei namens 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>`;

// Create a canvas for rendering the BPMN diagram
const canvas = createCanvas(800, 600);
const viewer = new BpmnViewer({ container: canvas });

// Import the BPMN XML and render the diagram
viewer.importXML(bpmnXML, function(err) {
  if (err) {
    console.error('Error rendering BPMN diagram:', err);
    return;
  }

  // Fit the diagram to the viewport
  viewer.get('canvas').zoom('fit-viewport');

  // Create a PNG stream and save the diagram as an image
  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(['diagram.png']).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>`;

// Create a canvas for rendering the BPMN diagram
const canvas = createCanvas(800, 600);
const viewer = new BpmnViewer({ container: canvas });

// Import the BPMN XML and render the diagram
viewer.importXML(bpmnXML, function(err) {
  if (err) {
    console.error('Error rendering BPMN diagram:', err);
    return;
  }

  // Fit the diagram to the viewport
  viewer.get('canvas').zoom('fit-viewport');

  // Create a PNG stream and save the diagram as an image
  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(['diagram.png']).then((pdf) => {
      pdf.saveAs('diagram.pdf');
      console.log('PDF generated and saved as diagram.pdf');
    }).catch((error) => {
      console.error('Error generating PDF:', error);
    });
  });
});

JAVASCRIPT

Schritt 4: Ausführen des Skripts

Führen Sie das Skript aus, um das BPMN-Diagramm zu generieren, und speichern Sie es im PDF-Format:

node generatePDF.js

node generatePDF.js

SHELL

BPMN JS npm (How It Works For Developers): Abbildung 3 - PDF-Ausgabe

Abschluss

Die Integration von bpmn-js und IronPDF ermöglicht die Erstellung interaktiver BPMN-Diagramme und deren Konvertierung in PDF-Dokumente, wodurch die Leistungsfähigkeit der visuellen Prozessmodellierung mit der Vielseitigkeit der PDF-Erstellung kombiniert wird. Diese Integration kann besonders nützlich für die Erstellung von Dokumentationen, Berichten oder anderen Formaten sein, bei denen eine visuelle Darstellung von Prozessen erforderlich ist. Beide Bibliotheken bieten eine ausführliche Dokumentation und Unterstützung, die den Einstieg und die Erweiterung der mitgelieferten grundlegenden Beispiele erleichtern.

Umfassende Informationen zur IronPDF-Lizenzierung finden Sie auf der IronPDF-Lizenz Seite. Wenn Sie mehr wissen oder zusätzliche Ressourcen benötigen, lesen Sie unser ausführliches Tutorial zur HTML-zu-PDF-Konvertierung.

Darrius Serrant

Jetzt mit dem Ingenieurteam chatten

Full-Stack-Software-Ingenieur (WebOps)

Darrius Serrant hat einen Bachelor-Abschluss in Informatik von der University of Miami und arbeitet als Full-Stack-WebOps-Marketing-Ingenieur bei Iron Software. Seit seiner Jugend vom Programmieren angezogen, sah er die Informatik als sowohl mysteriös als auch zugänglich, was es zum perfekten Medium für Kreativität und Problemlösung ...