IRONSOFTWAREHOME
IRONSUITEすべて10で2の価格です。
イメージングと認識
ユーティリティ
エンタープライズ用IRON
営業に問い合わせ
企業別
ノードヘルプ

BPMN JS npm（開発者向けのしくみ）

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

ビジネスプロセスモデルと表記法（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
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ファイルの作成

BPMN図を初期化してレンダリングするためのapp.jsファイルを作成します：

// 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のドキュメントで探索できます。

JavaScript用IronPDFの紹介

IronPDFは、開発者がPDFドキュメントを生成、操作、およびプログラムで変換できる強力なライブラリです。 元々は.NET向けに設計されたIronPDFは、JavaScriptをサポートするように拡張され、Webアプリケーション向けに強力なPDF生成機能を提供します。

JavaScript用IronPDFの主な特徴

  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は、カールトン大学でコンピュータサイエンスの学士号を取得し、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

世界中の数百万人のエンジニアから信頼されています。

ライセンスはより安く
義務のない相談を受ける
下記のフォームを記入するか、sales@ironsoftware.comにメールしてください。
あなたの詳細は常に守秘されます。
世界中の数百万人のエンジニアから信頼されています。
ライセンスはより安く
あなたの無料30日間の試用キーをすぐに入手。
クレジットカードやアカウントの作成は不要です。
PDF用C# 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から