POMOC NODE

BPMN JS npm (jak to działa dla programistów)

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

Zaktualizowano:18 stycznia, 2026

Business Process Model and Notation (BPMN) to standard modelowania procesów, który zapewnia graficzną reprezentację służącą do określania procesów biznesowych w ramach przepływu pracy. bpmn-js to potężna biblioteka, która pozwala osadzać diagramy elementów BPMN w aplikacjach internetowych, zapewniając interaktywne możliwości i szerokie opcje dostosowywania. Opracowany przez firmę Camunda, bpmn-js opiera się na nowoczesnych technologiach modelowania sieciowego i może być płynnie zintegrowany z aplikacjami JavaScript. Zobaczymy również, jak utworzyć plik PDF z elementami diagramu BPMN przy użyciu IronPDF.

Najważniejsze cechy bpmn-js

Modelowanie interaktywne: bpmn-js umożliwia użytkownikom tworzenie elementów BPMN oraz interaktywną modyfikację i przeglądanie diagramów. Jego przyjazny dla użytkownika interfejs obsługuje funkcję "przeciągnij i upuść", co ułatwia projektowanie złożonych przepływów pracy.
Dostosowywanie: Biblioteka jest wysoce konfigurowalna, co pozwala programistom dostosować wygląd i styl diagramów BPMN do wizerunku marki i wymagań ich aplikacji.
Rozszerzalność: bpmn-js został zaprojektowany z myślą o rozszerzalności. Programiści mogą rozszerzyć podstawową funkcjonalność, dodając niestandardowe elementy, właściwości i zachowania do modelu interakcji diagramu BPMN.
Integracja: Dobrze integruje się z innymi bibliotekami i frameworkami, takimi jak Angular i React, co ułatwia jego wykorzystanie w szerokiej gamie aplikacji internetowych.
Zgodność ze standardami: bpmn-js jest zgodny ze standardem BPMN 2.0, co gwarantuje, że tworzone diagramy są kompatybilne z innymi narzędziami BPMN i systemami edytorów.

Pierwsze kroki z bpmn-js

Aby rozpocząć pracę z bpmn-js, należy skonfigurować podstawowy projekt internetowy. Oto przewodnik krok po kroku dotyczący tworzenia prostego diagramu przy użyciu bpmn-js.

Krok 1: Konfiguracja projektu

Najpierw utwórz nowy katalog dla swojego projektu i zainicjuj projekt Node.js za pomocą następujących poleceń:

mkdir bpmn-js-demo
cd bpmn-js-demo
npm init -y

mkdir bpmn-js-demo
cd bpmn-js-demo
npm init -y

SHELL

Krok 2: Instalacja bpmn-js

Następnie zainstaluj bibliotekę bpmn-js:

npm install bpmn-js

npm install bpmn-js

SHELL

Krok 3: Tworzenie struktury HTML

Utwórz plik index.html z następującą treścią kodu źródłowego:

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

Krok 4: Tworzenie pliku JavaScript

Utwórz plik app.js w celu zainicjowania i wyrenderowania diagramu BPMN:

// 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 (Jak to działa dla programistów): Rysunek 1 – Wynik renderowania diagramu BPMN

Krok 5: Uruchomienie projektu

Aby zrealizować ten projekt, można użyć prostego serwera statycznego, takiego jak http-server:

npm install -g http-server
http-server .

npm install -g http-server
http-server .

SHELL

Otwórz przeglądarkę i przejdź do strony http://localhost:8080, aby zobaczyć diagram BPMN wyświetlony na stronie.

Zaawansowane wykorzystanie bpmn-js

Chociaż powyższy przykład obejmuje podstawowe funkcje, bpmn-js oferuje bardziej zaawansowane możliwości, takie jak dodawanie elementów niestandardowych, integracja z systemami zaplecza oraz eksportowanie diagramów. Możesz zapoznać się z tymi funkcjami w dokumentacji bpmn-js.

Przedstawiamy IronPDF dla JavaScript

IronPDF to potężna biblioteka, która pozwala programistom generować, modyfikować i konwertować dokumenty PDF programowo. Pierwotnie zaprojektowany dla platformy .NET, IronPDF został rozszerzony o obsługę JavaScript, zapewniając solidne możliwości generowania plików PDF dla aplikacji internetowych.

Najważniejsze funkcje IronPDF dla JavaScript

Generowanie plików PDF: Łatwe tworzenie plików PDF z HTML, adresów URL lub surowej treści.
Manipulacja plikami PDF: łączenie, dzielenie i modyfikowanie istniejących dokumentów PDF.
Konwersja: Konwersja różnych formatów dokumentów (takich jak HTML i obrazy) do formatu PDF.
Dostosowywanie: Dostosuj wygląd i układ plików PDF dzięki szerokiej gamie opcji stylizacji.

Integracja IronPDF z bpmn-js

Aby zademonstrować integrację IronPDF z bpmn-js, stwórzmy projekt Node.js, który generuje plik PDF na podstawie diagramu BPMN.

Krok 1: Konfiguracja projektu

Utwórz nowy katalog dla swojego projektu i zainicjuj go:

mkdir bpmn-ironpdf-demo
cd bpmn-ironpdf-demo
npm init -y

mkdir bpmn-ironpdf-demo
cd bpmn-ironpdf-demo
npm init -y

SHELL

Krok 2: Instalacja zależności

Zainstaluj IronPDF:

 npm i @ironsoftware/ironpdf

BPMN JS npm (Jak to działa dla programistów): Rysunek 2 – IronPDF

Krok 3: Tworzenie diagramu BPMN i skryptu do generowania plików PDF

Utwórz plik o nazwie 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

Krok 4: Uruchomienie skryptu

Uruchom skrypt, aby wygenerować diagram BPMN i zapisz go jako plik PDF:

node generatePDF.js

node generatePDF.js

SHELL

BPMN JS npm (Jak to działa dla programistów): Rysunek 3 – Wynik w formacie PDF

Wnioski

Integracja bpmn-js i IronPDF pozwala tworzyć interaktywne diagramy BPMN i konwertować je na dokumenty PDF, łącząc możliwości wizualnego modelowania procesów z wszechstronnością generowania plików PDF. Ta integracja może być szczególnie przydatna do generowania dokumentacji, raportów lub innych formatów, w których wymagana jest wizualna reprezentacja procesów. Obie biblioteki oferują obszerną dokumentację i wsparcie, co ułatwia rozpoczęcie pracy i rozbudowę dostarczonych przykładów podstawowych.

Szczegółowe informacje na temat licencji IronPDF można znaleźć na stronie licencji IronPDF. Aby uzyskać więcej informacji lub dodatkowe zasoby, zapoznaj się z naszym szczegółowym samouczkiem dotyczącym konwersji HTML do PDF.

Darrius Serrant

Czat z zespołem inżynierów teraz

Full Stack Software Engineer (WebOps)

Darrius Serrant posiada tytuł licencjata z informatyki z Uniwersytetu Miami i pracuje jako Full Stack WebOps Marketing Engineer w Iron Software. Już od młodych lat zainteresował się kodowaniem, postrzegając informatykę jako zarówno tajemniczą, jak i dostępną, co czyni ją doskonałym medium dla kreatywności ...

Czytaj więcej