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:Ocak 18, 2026

İş Süreci Modeli ve Notasyonu (BPMN), iş süreçlerini bir iş akışında belirtmek için grafik bir gösterim sağlayan bir süreç modelleme standardıdır. bpmn-js, etkileşimli yetenekler ve geniş özelleştirme seçenekleri sunarak, BPMN öğe diyagramlarını web uygulamalarına yerleştirmenizi sağlayan güçlü bir kütüphanedir. Camunda tarafından geliştirilen bpmn-js, modern web modelleme teknolojileri üzerine inşa edilmiştir ve JavaScript uygulamalarına sorunsuz bir şekilde entegre edilebilir. IronPDF kullanarak BPMN diyagram öğeleri ile bir PDF oluşturmanın nasıl yapılacağını da göreceğiz.

bpmn-js'in 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ü, karmaşık iş akışlarını tasarlamayı kolaylaştıran sürükle-bırak işlevselliğini destekler.
Özelleştirme: Kütüphane oldukça özelleştirilebilir olup, geliştiricilerin BPMN diyagramlarının görünüm ve hislerini uygulamalarının marka kimliğine ve gereksinimlerine uyacak şekilde adapte etmelerine olanak tanır.
Genişletilebilirlik: bpmn-js genişletilebilirlik göz önünde bulundurularak tasarlanmıştır. Geliştiriciler, BPMN diyagram etkileşim modeline özel öğeler, özellikler ve davranışlar ekleyerek temel işlevselliği genişletebilirler.
Entegrasyon: Diğer kütüphaneler ve çerçeveler ile, örneğin Angular ve React gibi, iyi entegre olup geniş bir yelpazede web uygulamalarında kullanılmasını kolaylaştırır.
Standart Uyumluluk: bpmn-js BPMN 2.0 standardına uygun olup, oluşturulan diyagramların diğer BPMN araçları ve düzenleme araç takımları ile uyumlu olmasını sağlar.

bpmn-js ile Başlarken

bpmn-js ile başlamak için temel bir web projesi kurmanız gerekecek. bpmn-js kullanarak basit bir diyagram oluşturmanın adım adım rehberi.

Adım 1: Projeyi Kurma

Öncelikle, projeniz için yeni bir dizin oluşturun ve aşağıdaki komutlarla 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'i Kurma

Sonraki adım, bpmn-js kütüphanesini kurmak:

npm install bpmn-js

npm install bpmn-js

SHELL

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

index.html adında bir dosya oluşturun ve aşağıdaki kaynak kodu içeriğini kullanın:

<!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ı Oluşturma

BPMN diyagramı 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ı Render Çı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 sayfada BPMN diyagramını görmek için http://localhost:8080 adresine gidin.

bpmn-js'ın İleri Düzey Kullanımı

Yukarıdaki örnek temel bilgileri kapsarken, bpmn-js özel öğeler eklemek, arka uç sistemleriyle entegre etmek ve diyagramları dışa aktarmak gibi daha gelişmiş özellikler sunar. Bu özellikleri bpmn-js belgelerinde keşfedebilirsiniz.

JavaScript için IronPDF'i Tanıyalım

IronPDF, geliştiricilerin PDF belgelerini programatik olarak oluşturmasını, değiştirmesini ve dönüştürmesini sağlayan güçlü bir kütüphanedir. Başlangıçta .NET için tasarlanan IronPDF, web uygulamaları için güçlü PDF oluşturma yetenekleri sunarak JavaScript'i destekleyecek şekilde genişletildi.

JavaScript için IronPDF'in Temel Özellikleri

PDF Oluşturma: 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: Çeşitli belge formatlarını (HTML ve görüntüler gibi) PDF'ye dönüştürün.
Özelleştirme: PDF'lerin görünümü ve düzeni, kapsamlı stil seçenekleriyle özelleştirin.

IronPDF ile bpmn-js Entegrasyonu

IronPDF ile bpmn-js entegrasyonunu göstermek için bir BPMN diyagramından bir PDF oluşturacak bir Node.js projesi oluşturalım.

Adım 1: Projeyi Kurma

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: Bağımlılıkları Yükleme

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ı ve PDF Oluşturma Betiği

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ı oluşturmak ve bir PDF olarak kaydetmek için betiği çalıştırı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 entegrasyonu, 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 oluşturmanın çok yönlülüğü ile birleştirir. Bu entegrasyon, özellikle belge, rapor veya süreçlerin görsel bir temsiline ihtiyaç duyulan diğer formatlar için belgeler oluşturmak için yararlı olabilir. Her iki kütüphane de mevcut belgeler ve destek sunarak, temel sağlanan örnekleri kolayca başlamak ve genişletmek sağlar.

IronPDF lisanslama ile ilgili kapsamlı bilgiler için IronPDF lisans sayfasını inceleyin. Daha fazla anlayış veya ek kaynaklar kazanmak için HTML'den PDF'ye Dönüşüm hakkında ayrıntılı eğitimimize göz atın.

Darrius Serrant

Mühendislik takımıyla şimdi sohbet edin

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

Darrius Serrant, Miami Üniversitesi'nden Bilgisayar Bilimleri lisans derecesine sahiptir ve Iron Software'de Tam Yığın WebOps Pazarlama Mühendisi olarak çalışmaktadır. Küçük yaşlardan itibaren kodlamaya ilgi duyan Darrius, bilişimi hem gizemli hem de erişilebilir buldu ve onu yaratıcılık ve problem çö...

Daha Fazlasını Oku