IRONSOFTWAREHOME
IRONSUITE所有10個程式庫只需支付2個的價格
聯絡銷售
按公司
NODE 說明

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

Curtis Chau
Curtis Chau
Updated: 2026年4月21日

業務流程模型與標註（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
SHELL

步驟 2：安裝 bpmn-js

接下來，安裝 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>
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
  }
});
JavaScript

BPMN JS npm（對開發者的運作原理）：圖 1 - BPMN 圖表呈現輸出

步驟 5：運行項目

要提供項目，您可以使用簡單的靜態伺服器，如 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
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);
    });
  });
});
JavaScript

步驟 4：執行腳本

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

node generatePDF.js
SHELL

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

結論

整合 bpmn-js 和 IronPDF 使您能夠建立互動的 BPMN 圖表並將其轉換為 PDF 文件，結合了視覺流程建模的力量和 PDF 生成的多功能性。 這種整合在產生文件、報告或任何需要過程視覺表現的格式中特別有用。 兩個程式庫都提供了廣泛的文件和支持，使您能夠輕鬆開始並擴展所提供的基本例子。

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

Curtis Chau
Curtis Chau
技術作家

Curtis Chau擁有Carleton大學的電腦科學學士學位，專精於前端開發，擁有Node.js、TypeScript、JavaScript和React的專業知識。Curtis熱衷於建立直觀且美觀的使用者介面，喜愛使用現代框架並建立結構良好、視覺吸引力的手冊。

...
閱讀更多

相關文章

Key in blue circle

立即免費取得 30 天試用金鑰。

Your trial license will be sent to your email address

無任何限制。100% 解鎖。無需信用卡。

OR
bullet_checked無需信用卡或建立帳號無任何限制。100% 解鎖。無需信用卡。
  • Logo Aetna
  • Logo NASA
  • Logo GE
  • Logo Porsche
  • Logo USDA
  • Logo Qatar
Join Millions of Engineers who’ve tried Iron Suite
預訂您的免費線上演示
Booking Badge

獲得來自全球數百萬工程師的信賴

Iron Software的客戶徽標
獲取您的無義務諮詢
填寫以下表格或發送電子郵件至sales@ironsoftware.com
您的資料將始終保密。
獲得來自全球數百萬工程師的信賴
Iron Software的客戶徽標
立即獲取您的30天試用金鑰。
無需信用卡或帳戶建立
C# 用於PDF的NuGet程式庫
使用NuGet安裝

版本： 2026.9

PM > Install-Package IronPdf
nuget.org/packages/IronPdf/
  1. 在解決方案資源管理器，右鍵點選參考，管理NuGet包
  2. 選擇瀏覽並搜尋"IronPdf"
  3. 選擇套件並安裝
C# PDF DLL
下載DLL

版本： 2026.9

或者點擊此處下載Windows安裝程式。

  1. 下載並解壓IronPDF到類似~/Libs的位置，位於您的解決方案目錄中
  2. 在Visual Studio解決方案資源管理器，右鍵點選參考。選擇瀏覽，"IronPdf.dll"

授權從$999起