跳至頁尾內容
  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 元素圖嵌入到網路應用中，提供互動功能和廣泛的自訂選項。 由 Camunda 開發的bpmn-js建立在現代網路建模器技術之上，可以無縫整合到 JavaScript 應用中。 我們還將看到如何使用IronPDF建立包含 BPMN 圖表元素的 PDF。

bpmn-js 的主要功能

  1. 互動建模：bpmn-js 使使用者能夠建立 BPMN 元素，修改並互動查看圖表。 其使用者友好的介面支持拖放功能，使設計複雜的工作流程變得容易。

  2. 自訂：該程式庫高度自訂化，允許開發者調整 BPMN 圖表的外觀和感覺，以符合應用的品牌和需求。

  3. 可擴展性：bpmn-js 旨在考慮擴展性。 開發者可以通過向 BPMN 圖表交互模型新增自訂元素、屬性和行為來擴展核心功能。

  4. 整合：它可以很好地與其它程式庫和框架（如 Angular 和 React）整合，便於在各種網路應用中使用。

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

開始使用 bpmn-js

要開始使用 bpmn-js，您需要設置一個基本的網路項目。 這是一個使用 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 文件。 最初為 .NET 設計，IronPDF 現已擴展以支持 JavaScript，為網路應用提供穩健的 PDF 生成能力。

IronPDF for JavaScript 的主要功能

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

  2. PDF 操作：合併、拆分和修改現有的 PDF 文件。

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

  4. 自訂：使用廣泛的樣式選項自訂 PDF 的外觀和佈局。

整合 IronPDF 和 bpmn-js

為了演示 IronPDF 和 bpmn-js 的整合，讓我們建立一個從 BPMN 圖表生成 PDF 的 Node.js 項目。

步驟 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天試用→完整產品。無限制。無需信用卡。 開始免費試用

Iron 支援團隊

我們線上24小時，每週5天。
聊天
電子郵件
給我打電話