信息圖標
跳過到頁腳內容
  1. IronPDF for Node.js
  2. IronPDF for Node.js 博客
  3. Node 說明
  4. BPMN JS npm
NODE 說明

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

Darrius Serrant
Darrius Serrant
更新日期:

業務流程模型與標註（BPMN）是一種流程建模標準，提供圖形表示以指定工作流程中的業務流程。 bpmn-js 是一個強大的庫，允許您將 BPMN 元素圖嵌入到 Web 應用程式中，提供互動功能和廣泛的自訂選項。 由 Camunda 開發的 bpmn-js 建立在現代 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 圖呈現輸出

步驟 5：運行項目

要提供該項目，您可以使用一個簡單的靜態服務器，比如 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 文檔中探索這些功能。

介紹 IronPDF for JavaScript

IronPDF 是一個強大的庫，允許開發者以程式化方式生成、操作和轉換 PDF 文件。 IronPDF 最初為 .NET 設計，現已擴展以支持 JavaScript，為 Web 應用程式提供強大的 PDF 生成功能。

IronPDF for JavaScript 的關鍵功能

  1. PDF 生成： 輕鬆從 HTML、URL 或原生內容創建 PDF。

  2. 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

步驟 2：安裝依賴項

安裝 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 轉換 詳細教程。

Darrius Serrant
Darrius Serrant
  立即與工程團隊聊天
全棧軟件工程師 (WebOps)

Darrius Serrant 擁有邁阿密大學計算機科學學士學位，目前任職於 Iron Software 的全栈 WebOps 市場營銷工程師。從小就迷上編碼，他認為計算既神秘又可接近，是創意和解決問題的完美媒介。

在 Iron Software，Darrius 喜歡創造新事物，並簡化複雜概念以便於理解。作為我們的駐場開發者之一，他也自願教學生，分享他的專業知識給下一代。

對 Darrius 來說，工作令人滿意因為它被重視且有實際影響。

相關文章

30 天試用→完整產品。無限制。無需信用卡。 開始免費試用