HILFE ZUM KNOTENPUNKT

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

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

Darrius Serrant

29. September 2024

Teilen Sie:

Business Process Model and Notation (BPMN) ist ein Standard für die Prozessmodellierung, der eine grafische Darstellung zur Spezifizierung von Geschäftsprozessen in einem Workflow 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, ist bpmn-js auf modernen Webmodellierungs-Technologien aufgebaut und kann nahtlos in JavaScript-Anwendungen integriert werden. Wir werden auch sehen, wie man mit BPMN-Diagrammelementen ein PDF mit IronPDF erstellt.

Hauptmerkmale von bpmn-js

Interaktives Modellieren: bpmn-js ermöglicht es Benutzern, BPMN-Elemente zu erstellen, zu modifizieren und Diagramme interaktiv anzusehen. Die benutzerfreundliche Oberfläche unterstützt Drag-and-Drop-Funktionalität, was das Entwerfen komplexer Workflows einfach macht.
Anpassung: Die Bibliothek ist hochgradig anpassbar und ermöglicht es Entwicklern, das Erscheinungsbild von BPMN-Diagrammen an die Markenidentität und Anforderungen ihrer Anwendungen anzupassen.
Erweiterbarkeit: bpmn-js ist mit Blick auf Erweiterbarkeit entwickelt. Entwickler können die Kernfunktionalität erweitern, indem sie dem BPMN-Diagramm-Interaktionsmodell benutzerdefinierte Elemente, Eigenschaften und Verhaltensweisen hinzufügen.
Integration: Es integriert sich gut mit anderen Bibliotheken und Frameworks, wie Angular und React, und erleichtert so seine Verwendung in einer Vielzahl von Webanwendungen.
Standardskonformität: bpmn-js hält sich an den BPMN 2.0 Standard, was sicherstellt, dass die erstellten Diagramme mit anderen BPMN-Tools und Bearbeitungs-Werkzeugsystemen 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

SHELL

Schritt 2: Installation 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 Quellcodeinhalt:

<!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 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');
  }
});

js

JAVASCRIPT

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

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 .

SHELL

Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:8080, um das BPMN-Diagramm auf der Seite 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 erkunden.

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

PDF-Generierung: Erstellen Sie mühelos PDFs aus HTML, URLs oder Rohinhalten.
PDF-Bearbeitung: Bestehende PDF-Dokumente zusammenführen, teilen und ändern.
Konvertierung: Verschiedene Dokumentformate (wie HTML und Bilder) in PDF umwandeln.
Anpassung: Passen Sie das Aussehen und das Layout von PDFs mit umfangreichen 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

SHELL

Schritt 2: Abhängigkeiten installieren

Installieren Sie IronPDF:

npm i @ironsoftware/ironpdf

npm i @ironsoftware/ironpdf

SHELL

BPMN JS npm (Wie es für Entwickler funktioniert): 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);
      });
  });
});

js

JAVASCRIPT

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

js

JAVASCRIPT

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 Informationen zur Lizenzierung von IronPDF, besuchen Sie die Seite zur IronPDF-Lizenz. Um ein besseres Verständnis zu erlangen oder zusätzliche Ressourcen zu finden, schauen Sie sich unser ausführliches Tutorial zur HTML-zu-PDF-Konvertierung an.

Darrius Serrant

Jetzt mit dem Ingenieurteam chatten

Full Stack Software Engineer (WebOps)

Darrius Serrant hat einen Bachelor-Abschluss in Informatik von der University of Miami und arbeitet als Full Stack WebOps Marketing Engineer bei Iron Software. Schon in jungen Jahren vom Programmieren angezogen, sah er das Rechnen sowohl als mysteriös als auch zugänglich an, was es zum perfekten Medium für Kreativität und Problemlösung machte.

Bei Iron Software genießt Darrius es, neue Dinge zu erschaffen und komplexe Konzepte zu vereinfachen, um sie verständlicher zu machen. Als einer unserer ansässigen Entwickler hat er sich auch freiwillig gemeldet, um Schüler zu unterrichten und sein Fachwissen mit der nächsten Generation zu teilen.

Für Darrius ist seine Arbeit erfüllend, weil sie geschätzt wird und einen echten Einfluss hat.

< PREVIOUS
Moment.js (Wie es für Entwickler funktioniert)

NÄCHSTES >
Body-Parser-Node (Wie es für Entwickler funktioniert)