節點幫助

BPMN JS npm（開發者如何運作）

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

Darrius Serrant

2024年9月29日

業務流程模型和註釋 (BPMN) 是一種流程建模標準，它提供了一種圖形表示，用於在工作流程中指定業務流程。 bpmn-js 是一個強大的庫，允許您在網頁應用程式中嵌入 BPMN 元素圖，提供互動功能和廣泛的自訂選項。由 Camunda 開發的bpmn-js是基於現代網頁建模技術構建的，可以無縫整合到 JavaScript 應用中。我們還將看到如何使用IronPDF創建具有 BPMN 圖表元素的 PDF。

bpmn-js 的主要功能

互動建模：bpmn-js 使用户能够創建 BPMN 元素，並以互動方式修改和查看圖表。其使用者友好的介面支援拖放功能，使設計複雜的工作流程變得容易。
自訂功能：此庫具有高度自訂性，允許開發人員調整 BPMN 圖的外觀和風格，以符合應用程序的品牌和要求。
擴展性：bpmn-js 設計時考慮了擴展性。開發人員可以透過向BPMN圖互動模型添加自訂元素、屬性和行為來擴展核心功能。
整合：它能與其他函式庫和框架（如 Angular 和 React）良好整合，促進其在各種網頁應用程式中的使用。
標準合規性：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

第2步：安裝 bpmn-js

接下來，安裝 bpmn-js 庫：

npm install bpmn-js

步驟 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 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');
  }
});

JAVASCRIPT

BPMN JS npm（對開發者的作用）：圖 1 - BPMN 圖表渲染輸出

步驟 5：執行專案

要為專案提供服務，您可以使用像 http-server 這樣的簡單靜態伺服器：

npm install -g http-server
http-server .

打開您的瀏覽器，並導航至http://localhost:8080以查看頁面上呈現的BPMN圖。

bpmn-js 的進階用法

雖然上述範例涵蓋了基礎內容，bpmn-js 提供了更多的高級功能，例如添加自訂元素、與後端系統整合以及導出圖表。您可以在bpmn-js 文档中探索这些功能。

介紹 IronPDF for JavaScript

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

IronPDF for JavaScript 的主要功能

PDF 生成：輕鬆從 HTML、URL 或原始內容創建 PDF。
PDF 操作：合併、拆分並修改現有的 PDF 文件。
轉換：將各種文件格式（如 HTML 和圖像）轉換為 PDF。
自訂：透過廣泛的樣式選項自訂 PDF 的外觀和佈局。

將 IronPDF 與 bpmn-js 集成

要展示 IronPDF 與 bpmn-js 的整合，讓我們建立一個 Node.js 項目，從 BPMN 圖生成 PDF。

步驟 1：設定專案

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

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

步驟 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>`;
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);
      });
  });
});

JAVASCRIPT

步驟 4：運行腳本

執行腳本以生成 BPMN 圖並將其儲存為 PDF：

node generatePDF.js

node generatePDF.js

JAVASCRIPT

BPMN JS npm（對開發者的工作原理）：圖3 - PDF輸出

結論

將 bpmn-js 和 IronPDF 結合在一起，可以創建互動式 BPMN 圖，並將其轉換為 PDF 文件，結合了視覺化流程建模的強大功能與 PDF 生成的多樣性。此集成在生成文檔、報告或任何需要過程可視化表現的格式時特別有用。這兩個程式庫都提供詳盡的文件和支援，讓您能夠輕鬆開始，並在提供的基本範例基礎上進一步擴展。

有關 IronPDF 授權的詳細資訊，請參閱 IronPDF 授權頁面。要獲得更多了解或額外資源，請查看我們有關HTML到PDF轉換的詳細教程。

Darrius Serrant

立即與工程團隊聊天

全端軟體工程師（WebOps）

Darrius Serrant 擁有邁阿密大學的計算機科學學士學位，目前擔任 Iron Software 的全端 WebOps 行銷工程師。自幼對編程產生興趣，他認為計算機既神秘又易於接觸，使其成為創造力和解決問題的完美媒介。

在 Iron Software，Darrius 享受創造新事物並簡化複雜概念使其更易理解的過程。作為我們的其中一位常駐開發人員，他也自願教導學生，將他的專業知識傳授給下一代。

對 Darrius 來說，他的工作之所以令人滿足，是因為它受到重視並且產生了真正的影響。

< 上一頁
Moment.js（開發者如何使用）

下一個 >
body parser node（對開發人員的運作原理）