NODE YARDıM

BPMN JS npm (Geliştiriciler İçin Nasıl Çalışır)

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

Güncellendi:Nisan 21, 2026

İş Süreci Modeli ve Notasyonu (BPMN), bir iş akışındaki iş süreçlerini belirtmek için grafiksel bir temsili sağlayan süreç modelleme için bir standarttır. bpmn-js, BPMN eleman diyagramlarını web uygulamalarına yerleştirmenizi sağlayan, etkileşimli yetenekler ve geniş kapsamlı özelleştirme seçenekleri sunan güçlü bir kütüphanedir. Camunda tarafından geliştirilen bpmn-js, modern web modelleyici teknolojileri üzerinde inşa edilmiştir ve JavaScript uygulamalarına sorunsuz bir şekilde entegre edilebilir. IronPDF kullanılarak BPMN diyagram elemanlarıyla bir PDF oluşturmayı da göreceğiz.

bpmn-js'nin Temel Özellikleri

Etkileşimli Modelleme: bpmn-js, kullanıcıların BPMN öğeleri oluşturmasına, değiştirmesine ve diyagramları etkileşimli olarak görüntülemesine olanak tanır. Kullanıcı dostu arayüzü sürükle ve bırak işlevselliği destekler, karmaşık iş akışlarını tasarlamayı kolaylaştırır.
Özelleştirme: Kütüphane yüksek derecede özelleştirilebilir, geliştiricilerin BPMN diyagramlarının görünümünü ve hissini, uygulamalarının markalaşması ve gereksinimleri ile uyumlu hale getirmelerini sağlar.
Genişletilebilirlik: bpmn-js, genişletilebilirlik düşünülerek tasarlanmıştır. Geliştiriciler, BPMN diyagram etkileşim modeline özel elemanlar, özellikler ve davranışlar ekleyerek temel işlevselliği genişletebilir.
Entegrasyon: Başka kütüphaneler ve çerçevelerle, örneğin Angular ve React ile iyi entegrasyona sahiptir, bu da geniş bir web uygulamaları yelpazesinde kullanılmasını kolaylaştırır.
Standartlara Uyum: bpmn-js, oluşturulan diyagramların diğer BPMN araçları ve düzenleme araç kitleriyle uyumlu olmasını sağlamak için BPMN 2.0 standardına uyar.

bpmn-js ile Başlamak

bpmn-js ile başlamak için, temel bir web projesi kurmanız gerekecektir. İşte bpmn-js kullanarak basit bir diyagram oluşturma adım adım rehberi.

Adım 1: Projenin Kurulması

Öncelikle projeniz için yeni bir dizin oluşturun ve aşağıdaki komutları kullanarak bir Node.js projesi başlatın:

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

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

SHELL

Adım 2: bpmn-js'nin Kurulması

Sonra, bpmn-js kütüphanesini yükleyin:

npm install bpmn-js

npm install bpmn-js

SHELL

Adım 3: HTML Yapısının Oluşturulması

Aşağıdaki kaynak kod içeriğiyle bir index.html dosyası oluşturun:

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

Adım 4: JavaScript Dosyasının Oluşturulması

BPMN diyagramını başlatmak ve render etmek için bir app.js dosyası oluşturun:

// 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 (Geliştiriciler İçin Nasıl Çalışır): Şekil 1 - BPMN Diyagramı İşleme Çıktısı

Adım 5: Projeyi Çalıştırma

Projeyi sunmak için http-server gibi basit bir statik sunucu kullanabilirsiniz:

npm install -g http-server
http-server .

npm install -g http-server
http-server .

SHELL

Tarayıcınızı açın ve http://localhost:8080 adresine giderek BPMN diyagramının sayfada render edildiğini görün.

bpmn-js'nin Gelişmiş Kullanımı

Yukarıdaki örnek temel unsurları kapsamasına rağmen, bpmn-js, özel elemanlar ekleme, arka uç sistemleriyle entegrasyon ve diyagramları dışa aktarma gibi daha gelişmiş özellikler sunar. Bu özellikleri bpmn-js belgelerinde keşfedebilirsiniz.

JavaScript için IronPDF'i Tanıtma

IronPDF, geliştiricilerin, PDF belgelerini programlı olarak oluşturmasını, manipüle etmesini ve dönüştürmesini sağlayan güçlü bir kütüphanedir. Başlangıçta .NET için tasarlanmış olan IronPDF, web uygulamaları için güçlü PDF üretim yetenekleri sunarak JavaScript'i de destekleyecek şekilde genişletilmiştir.

JavaScript için IronPDF Temel Özellikleri

PDF Üretimi: HTML, URL veya ham içerikten kolayca PDF'ler oluşturun.
PDF Manipülasyonu: Mevcut PDF belgelerini birleştirin, ayırın ve değiştirin.
Dönüştürme: HTML ve resimler gibi çeşitli belge formatlarını PDF'e dönüştürün.
Özelleştirme: PDF'lerin görünümünü ve düzenini kapsamlı stil seçenekleriyle özelleştirin.

IronPDF'i bpmn-js ile Entegre Etme

IronPDF'i bpmn-js ile entegre etmenin demo olarak, bir BPMN diyagramından bir PDF oluşturacak bir Node.js projesi oluşturalım.

Adım 1: Projenin Kurulması

Projeniz için yeni bir dizin oluşturun ve başlatın:

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

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

SHELL

Adım 2: Gereksinimlerin Kurulması

IronPDF'i yükleyin:

npm i @ironsoftware/ironpdf

BPMN JS npm (Geliştiriciler İçin Nasıl Çalışır): Şekil 2 - IronPDF

Adım 3: BPMN Diyagramını ve PDF Üretim Betiğini Oluşturma

generatePDF.js: adlı bir dosya oluşturun:

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

Adım 4: Betiği Çalıştırma

BPMN diyagramını üretmek ve bir PDF olarak kaydetmek için betiği yürütün:

node generatePDF.js

node generatePDF.js

SHELL

BPMN JS npm (Geliştiriciler İçin Nasıl Çalışır): Şekil 3 - PDF Çıktısı

Sonuç

bpmn-js ve IronPDF'i entegre etmek, etkileşimli BPMN diyagramları oluşturmanıza ve bunları PDF belgelerine dönüştürmenize olanak tanır, görsel süreç modelleme gücünü PDF üretim esnekliği ile birleştirir. Bu entegrasyon, belgeler, raporlar veya süreçlerin görsel bir temsilinin gerektiği herhangi bir format için belgeler oluşturmak adına özellikle faydalı olabilir. Her iki kütüphane de kapsamlı belgeler ve destek sunar, bu nedenle temel örneklerden başlayarak genişletmek kolaydır.

IronPDF lisanslaması hakkında kapsamlı detaylar için IronPDF lisans sayfasına başvurun. Daha fazla bilgi veya ek kaynaklar edinmek için HTML'den PDF'e Dönüştürme adlı ayrıntılı eğitimimize göz atınız.

Darrius Serrant

Mühendislik ekibiyle şimdi sohbet edin

Tam Yığın Yazılım Mühendisi (WebOps)

Darrius Serrant, Miami Üniversitesi'nden Bilgisayar Bilimi alanında Lisans Derecesine sahip ve Iron Software'de Tam Yığın WebOps Pazarlama Mühendisi olarak çalışıyor. Genç yaşlardan itibaren kodlamaya çekildi, bilgisayar bilimi hem gizemli hem de erişilebilir olarak görüldü ve bu özellik, yaratıcılık ...

Daha Fazla Oku