1. IronPDF for Node.js
  2. IronPDF for Node.js Blog
  3. Node Help
  4. BPMN JS npm
NODE HELP

BPMN JS npm (How It Works For Developers)

Published September 29, 2024
Share:

Business Process Model and Notation (BPMN) is a standard for process modeling that provides a graphical representation for specifying business processes in a workflow. bpmn-js is a powerful library that allows you to embed BPMN element diagrams in web application, providing interactive capabilities and extensive customization options. Developed by Camunda, bpmn-js is built on top of modern web modeler technologies and can be integrated seamlessly into JavaScript applications. We will also see how to create a PDF with BPMN diagram elements using IronPDF.

Key Features of bpmn-js

  1. Interactive Modeling: bpmn-js enables users to create BPMN elements, and modify, and view diagrams interactively. Its user-friendly interface supports drag-and-drop functionality, making it easy to design complex workflows.

  2. Customization: The library is highly customizable, allowing developers to adapt the look and feel of BPMN diagrams to match the branding and requirements of their applications.

  3. Extensibility: bpmn-js is designed with extensibility in mind. Developers can extend the core functionality by adding custom elements, properties, and behaviors to the BPMN diagram interaction model.

  4. Integration: It integrates well with other libraries and frameworks, such as Angular and React, facilitating its use in a wide range of web applications.

  5. Standards Compliance: bpmn-js adheres to the BPMN 2.0 standard, ensuring that the diagrams created are compatible with other BPMN tools and editing toolkit systems.

Getting Started with bpmn-js

To get started with bpmn-js, you'll need to set up a basic web project. Here’s a step-by-step guide to creating a simple diagram using bpmn-js.

Step 1: Setting Up the Project

First, create a new directory for your project and initialize a Node.js project using the following commands:

mkdir bpmn-js-demo
cd bpmn-js-demo
npm init -y
mkdir bpmn-js-demo
cd bpmn-js-demo
npm init -y
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'mkdir bpmn-js-demo cd bpmn-js-demo npm init -y
VB   C#

Step 2: Installing bpmn-js

Next, install the bpmn-js library:

npm install bpmn-js
npm install bpmn-js
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install bpmn-js
VB   C#

Step 3: Creating the HTML Structure

Create an index.html file with the following source code content:

<!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>
#canvas {
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <!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> width: 100%;
"viewport" content="width=device-width, initial-scale=1.0"> (Of title) bpmn-js Demo</title> (Of style) width: 100 Mod 
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content
"UTF-8"> <meta name="viewport" content
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name
"en"> (Of head) <meta charset="UTF-8"> <meta name
<(Not DOCTYPE) html> <html lang="en"> (Of head) <meta charset
	  height:
	  600px
	  border:
	  1px solid #ccc
	}
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'  </style> </head> <body> <div id="canvas"></div> <script src="app.js"></script> </body> </html>
VB   C#

Step 4: Creating the JavaScript File

Create an app.js file to initialize and render the BPMN diagram:

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');
  }
});
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');
  }
});
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import BpmnViewer from 'bpmn-js/@lib/NavigatedViewer'; 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'); } });
VB   C#

BPMN JS npm (How It Works For Developers): Figure 1 - BPMN Diagram Rendering Output

Step 5: Running the Project

To serve the project, you can use a simple static server like http-server:

npm install -g http-server
http-server .
npm install -g http-server
http-server .
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install -g http-server http-server.
VB   C#

Open your browser and navigate to http://localhost:8080 to see the BPMN diagram rendered on the page.

Advanced Usage of bpmn-js

While the above example covers the basics, bpmn-js offers more advanced features, such as adding custom elements, integrating with backend systems, and exporting diagrams. You can explore these features in the bpmn-js documentation.

Introducing IronPDF for JavaScript

IronPDF is a powerful library that allows developers to generate, manipulate, and convert PDF documents programmatically. Originally designed for .NET, IronPDF has been extended to support JavaScript, providing robust PDF generation capabilities for web applications.

Key Features of IronPDF for JavaScript

  1. PDF Generation: Create PDFs from HTML, URLs, or raw content with ease.

  2. PDF Manipulation: Merge, split, and modify existing PDF documents.

  3. Conversion: Convert various document formats (like HTML and images) to PDF.

  4. Customization: Customize the appearance and layout of PDFs with extensive styling options.

Integrating IronPDF with bpmn-js

To demonstrate the integration of IronPDF with bpmn-js, let's create a Node.js project that generates a PDF from a BPMN diagram.

Step 1: Setting Up the Project

Create a new directory for your project and initialize it:

mkdir bpmn-ironpdf-demo
cd bpmn-ironpdf-demo
npm init -y
mkdir bpmn-ironpdf-demo
cd bpmn-ironpdf-demo
npm init -y
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'mkdir bpmn-ironpdf-demo cd bpmn-ironpdf-demo npm init -y
VB   C#

Step 2: Installing Dependencies

Install the IronPDF:

npm i @ironsoftware/ironpdf
npm i @ironsoftware/ironpdf
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm i @ironsoftware/ironpdf
VB   C#

BPMN JS npm (How It Works For Developers): Figure 2 - IronPDF

Step 3: Creating the BPMN Diagram and PDF Generation Script

Create a file named 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);
      });
  });
});
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);
      });
  });
});
Private const fs = require( 'fs');
'INSTANT VB TODO TASK: The following line could not be converted:
const
	Private createCanvas } = require( 'canvas');
Private const BpmnViewer = require( 'bpmn-js/@lib/Viewer');
Private const PdfGenerator = require( '@ironsoftware/ironpdf');
' BPMN XML data
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: 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>`;
"36" height="36"/> </bpmndi:BPMNShape> </bpmndi:BPMNPlane> </bpmndi:BPMNDiagram> </definitions>`
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"102" width="36" height
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"173" y="102" width
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"StartEvent_1"> <omgdc:Bounds x="173" y
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"StartEvent_1_di" bpmnElement="StartEvent_1"> <omgdc:Bounds x
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"Process_1"> <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"BPMNPlane_1" bpmnElement="Process_1"> <bpmndi:BPMNShape id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"StartEvent_1"/> </process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"false"> <startEvent id="StartEvent_1"/> </process> <bpmndi:BPMNDiagram id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"Process_1" isExecutable="false"> <startEvent id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"http://bpmn.io/schema/bpmn"> <process id="Process_1" isExecutable
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <process id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
If(`<, xml version="1.0" encoding=If("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
'INSTANT VB TODO TASK: The following line contains an assignment within expression that was not extracted by Instant VB:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
	Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
Private const canvas = createCanvas(800, 600)
Else
'INSTANT VB TODO TASK: The following line contains an assignment within expression that was not extracted by Instant VB:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
	Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
End If
Private 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', () =>
If True Then
	console.log( 'BPMN diagram TryCast(saved, PNG'));
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	PdfGenerator.imageToPdf(filePaths).@then((pdf) =>
'	{
'		pdf.saveAs('diagram.pdf');
'		console.log('PDF generated @and TryCast(saved, diagram.pdf'));
'	}
'INSTANT VB TODO TASK: Lambda expressions and anonymous methods are not converted by Instant VB if local variables of the outer method are referenced within the anonymous method:
	).catch(([error]) =>
End If
)
VB   C#

Step 4: Running the Script

Execute the script to generate the BPMN diagram and save it as a PDF:

node generatePDF.js
node generatePDF.js
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'node generatePDF.js
VB   C#

BPMN JS npm (How It Works For Developers): Figure 3 - PDF Output

Conclusion

Integrating bpmn-js and IronPDF allows you to create interactive BPMN diagrams and convert them into PDF documents, combining the power of visual process modeling with the versatility of PDF generation. This integration can be particularly useful for generating documentation, reports, or any other format where a visual representation of processes is required. Both libraries offer extensive documentation and support, making it easy to get started and expand upon the basic examples provided.

For comprehensive details on IronPDF licensing, refer to the IronPDF license page. To gain more understanding or additional resources, check out our detailed tutorial on HTML to PDF Conversion.

< PREVIOUS
Moment.js (How It Works For Developers)
NEXT >
body parser node (How It Works For Developers)

Install with npm

Version: 2024.9

> npm i @ironsoftware/ironpdf

Report an Issue

Ready to get started? Version: 2024.9 just released

Free npm Install View Licenses >

Get your FREE

30-day Trial Key instantly.

15-day Trial Key instantly.

bullet_checkedNo credit card or account creation required
The trial form was submitted
successfully.

Your trial key should be in the email.
If it is not, please contact
support@ironsoftware.com

bullet_testTest in production
without watermarks
bullet_calendar30 days fully
functional product
bullet_support24/5 technical
support during trial

Thank you!

Your license key has been delivered to the email provided.Contact us

24-Hour Upgrade Offer:

Save 50% on a
Professional Upgrade

Go Professional to cover 10 developers
and unlimited projects.

hours

:

minutes

:

seconds

Upgrade to Professional

Upgrade

Professional

$600 USD

$299 USD

  • 10 developers
  • 10 locations
  • 10 projects
TODAY ONLY

5 .NET Products for the Price of 2

IronPDF IronOCR IronXL IronBarcode IronWebscraper

Total Suite Value:

$7,192 USD

Upgrade price

TODAY
ONLY

$499 USD

After 24 Hrs

$1,098 USD