NODE 說明

BPMN JS npm（開發者的使用方法）

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

更新:6月 22, 2025

業務流程模型和符號（BPMN）是一種流程建模標準，它提供了一種圖形化表示方法，用於在工作流程中指定業務流程。 bpmn-js 是一個功能強大的函式庫，可讓您將 BPMN 元素圖嵌入到 Web 應用程式中，提供互動功能和廣泛的自訂選項。 bpmn-js由 Camunda 開發，基於現代 Web 建模技術，可無縫整合到 JavaScript 應用程式中。我們也將了解如何使用IronPDF建立包含 BPMN 圖元素的 PDF。

bpmn-js 的主要特性

1.互動式建模： bpmn-js 使用戶能夠建立 BPMN 元素，並以互動方式修改和檢視圖表。它的人性化介面支援拖放功能，使設計複雜的工作流程變得容易。

2.自訂：該程式庫具有高度可自訂性，可讓開發人員調整 BPMN 圖的外觀和風格，以符合其應用程式的品牌和要求。

3.可擴展性： bpmn-js 的設計充分考慮了可擴展性。開發人員可以透過在 BPMN 圖互動模型中添加自訂元素、屬性和行為來擴展核心功能。

4.整合：它與其他程式庫和框架（如 Angular 和 React）整合良好，便於在各種 Web 應用程式中使用。

5.標準符合性： bpmn-js 遵循 BPMN 2.0 標準，確保建立的圖表與其他 BPMN 工具和編輯工具包系統相容。

bpmn-js 入門指南

要開始使用 bpmn-js，您需要設定一個基本的 Web 專案。以下是使用 bpmn-js 建立簡單圖表的逐步指南。

步驟 1：項目設定

首先，為你的專案建立一個新目錄，並使用以下指令初始化一個Node.js專案：

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

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

SHELL

步驟 2：安裝 bpmn-js

接下來，安裝 bpmn-js 函式庫：

npm install bpmn-js

npm install bpmn-js

SHELL

步驟 3：建立 HTML 結構

建立一個名為index.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>

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

步驟 4：建立 JavaScript 文件

建立app.js檔案以初始化和渲染 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（開發者使用指南）：圖 1 - BPMN 圖表渲染輸出

步驟五：運行項目

要運行該項目，您可以使用像http-server這樣的簡單靜態伺服器：

npm install -g http-server
http-server .

npm install -g http-server
http-server .

SHELL

開啟瀏覽器並造訪http://localhost:8080 ，即可在頁面上看到渲染的 BPMN 圖。

bpmn-js 的高階用法

雖然上面的例子涵蓋了基本功能，但 bpmn-js 還提供了更高級的功能，例如添加自訂元素、與後端系統整合以及導出圖表。您可以在bpmn-js 文件中了解這些功能。

隆重推出適用於 JavaScript 的 IronPDF。

IronPDF 是一個功能強大的程式庫，可讓開發人員以程式設計方式產生、操作和轉換 PDF 文件。 IronPDF 最初是為 .NET 設計的，後來擴展支援 JavaScript，為 Web 應用程式提供了強大的 PDF 生成功能。

IronPDF for JavaScript 的主要特性

PDF 產生：輕鬆地從 HTML、URL 或原始內容建立 PDF。
PDF 操作：合併、分割和修改現有 PDF 文件。

3.轉換：將各種文件格式（如 HTML 和圖片）轉換為 PDF。

4.自訂：透過豐富的樣式選項自訂 PDF 的外觀和佈局。

將 IronPDF 與 bpmn-js 集成

為了示範 IronPDF 與 bpmn-js 的集成，讓我們建立一個 Node.js 項目，該項目從 BPMN 圖產生 PDF。

步驟 1：項目設定

為你的專案建立一個新目錄並進行初始化：

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

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

SHELL

步驟二：安裝依賴項

安裝 IronPDF：

 npm i @ironsoftware/ironpdf

! BPMN JS npm（開發者使用指南）：圖 2 - IronPDF

步驟 3：建立 BPMN 圖和 PDF 生成腳本

建立一個名為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

步驟 4：運行腳本

執行腳本產生 BPMN 圖並將其儲存為 PDF 檔案：

node generatePDF.js

node generatePDF.js

SHELL

！ BPMN JS npm（開發者使用指南）：圖 3 - PDF 輸出

結論

將 bpmn-js 和 IronPDF 整合在一起，可以建立互動式 BPMN 圖並將其轉換為 PDF 文檔，將視覺化流程建模的強大功能與 PDF 產生的多功能性相結合。這種整合對於產生文件、報告或任何其他需要以視覺化方式表示流程的格式都特別有用。這兩個庫都提供了豐富的文件和支持，使用戶可以輕鬆上手並擴展所提供的基本範例。

有關 IronPDF 許可的詳細信息，請參閱 IronPDF 許可頁面。如需了解更多資訊或取得更多資源，請查看我們關於HTML 轉 PDF 的詳細教學。