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-jswurde 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

Schritt 2: Installation von bpmn-js

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

npm install bpmn-js

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

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 .

Ö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 derbpmn-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

Schritt 2: Abhängigkeiten installieren

Installieren Sie IronPDF:

npm i @ironsoftware/ironpdf

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);
      });
  });
});
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
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 Details zur IronPDF-Lizenzierung, beziehen Sie sich auf die IronPDF-Lizenzseite. Um mehr Verständnis oder zusätzliche Ressourcen zu erlangen, schauen Sie sich unser ausführliches Tutorial zuKonvertierung von HTML in PDF.

Kannaopat Udonpant

Kannapat Udonpant

Software-Ingenieur

 LinkedIn

Bevor er Software-Ingenieur wurde, promovierte Kannapat an der Universität Hokkaido in Japan im Bereich Umweltressourcen. Während seines Studiums wurde Kannapat auch Mitglied des Vehicle Robotics Laboratory, das Teil der Abteilung für Bioproduktionstechnik ist. Im Jahr 2022 wechselte er mit seinen C#-Kenntnissen zum Engineering-Team von Iron Software, wo er sich auf IronPDF konzentriert. Kannapat schätzt an seiner Arbeit, dass er direkt von dem Entwickler lernt, der den Großteil des in IronPDF verwendeten Codes schreibt. Neben dem kollegialen Lernen genießt Kannapat auch den sozialen Aspekt der Arbeit bei Iron Software. Wenn er nicht gerade Code oder Dokumentationen schreibt, kann man Kannapat normalerweise beim Spielen auf seiner PS5 oder beim Wiedersehen mit The Last of Us antreffen.
< PREVIOUS
Moment.js (Wie es für Entwickler funktioniert)
NÄCHSTES >
Body-Parser-Node (Wie es für Entwickler funktioniert)

Installation mit npm

Version:2025.3

> npm i @ironsoftware/ironpdf

Ein Problem melden

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

Kostenlose npm-Installation
Kostenloser Start
npm Herunterladen Kostenlos testen
Lizenzen anzeigen >
Textlogo Iron Suite related to BPMN JS npm (Wie es für Entwickler funktioniert)

IronPDF ist ein Teil von IRONSUITE

10 .NET API-Produkte für Ihre Bürodokumente

Erhalten Sie 10 Produkte zum Preis von 2   Kostenlos testen