メッセージアイコン
  1. Node.js 用 IronPDF
  2. IronPDF for Node.js ブログ
  3. ノードヘルプ
  4. BPMN JS npm
ノードヘルプ

BPMN JS npm（開発者向けの動作説明）

公開済み 2024年9月29日
共有:

ビジネスプロセスモデルと表記法(BPMN)は、ワークフローにおけるビジネスプロセスを特定するためのグラフィカル表現を提供するプロセスモデリングの標準です。 bpmn-jsは強力なライブラリであり、WebアプリケーションにBPMN要素図を埋め込むことができ、インタラクティブな機能や幅広いカスタマイズオプションを提供します。 Camundaによって開発されました。bpmn-jsは、最新のウェブモデラーテクノロジーの上に構築されており、JavaScriptアプリケーションにシームレスに統合できます。 BPMNダイアグラム要素を使用してPDFを作成する方法も確認します。IronPDF.

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
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'mkdir bpmn-js-demo cd bpmn-js-demo npm init -y
VB   C#

ステップ2: bpmn-jsのインストール

次に、bpmn-jsライブラリをインストールします。

npm install bpmn-js
npm install bpmn-js
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install bpmn-js
VB   C#

ステップ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>
#canvas {
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <!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> width: 100%;
"viewport" content="width=device-width, initial-scale=1.0"> (Of title) bpmn-js Demo</title> (Of style) width: 100 Mod 
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content
"UTF-8"> <meta name="viewport" content
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name
"en"> (Of head) <meta charset="UTF-8"> <meta name
<(Not DOCTYPE) html> <html lang="en"> (Of head) <meta charset
	  height:
	  600px
	  border:
	  1px solid #ccc
	}
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'  </style> </head> <body> <div id="canvas"></div> <script src="app.js"></script> </body> </html>
VB   C#

ステップ 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');
  }
});
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import BpmnViewer from 'bpmn-js/@lib/NavigatedViewer'; 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'); } });
VB   C#

BPMN JS npm（開発者向けの動作方法）：図1 - BPMNダイアグラムレンダリング出力

ステップ5: プロジェクトを実行する

プロジェクトを提供するには、http-server のような単純な静的サーバーを使用できます。

npm install -g http-server
http-server .
npm install -g http-server
http-server .
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install -g http-server http-server.
VB   C#

ブラウザを開き、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の外観とレイアウトを広範なスタイリングオプションでカスタマイズします。

bpmn-jsとIronPDFの統合

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
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'mkdir bpmn-ironpdf-demo cd bpmn-ironpdf-demo npm init -y
VB   C#

手順 2: 依存関係のインストール

IronPDF をインストールする:

npm i @ironsoftware/ironpdf
npm i @ironsoftware/ironpdf
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm i @ironsoftware/ironpdf
VB   C#

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);
      });
  });
});
Private const fs = require( 'fs');
'INSTANT VB TODO TASK: The following line could not be converted:
const
	Private createCanvas } = require( 'canvas');
Private const BpmnViewer = require( 'bpmn-js/@lib/Viewer');
Private const PdfGenerator = require( '@ironsoftware/ironpdf');
' BPMN XML data
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: 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>`;
"36" height="36"/> </bpmndi:BPMNShape> </bpmndi:BPMNPlane> </bpmndi:BPMNDiagram> </definitions>`
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"102" width="36" height
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"173" y="102" width
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"StartEvent_1"> <omgdc:Bounds x="173" y
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"StartEvent_1_di" bpmnElement="StartEvent_1"> <omgdc:Bounds x
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"Process_1"> <bpmndi:BPMNShape id="StartEvent_1_di" bpmnElement
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"BPMNPlane_1" bpmnElement="Process_1"> <bpmndi:BPMNShape id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"BPMNDiagram_1"> <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"StartEvent_1"/> </process> <bpmndi:BPMNDiagram id="BPMNDiagram_1"> <bpmndi:BPMNPlane id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"false"> <startEvent id="StartEvent_1"/> </process> <bpmndi:BPMNDiagram id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"Process_1" isExecutable="false"> <startEvent id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"http://bpmn.io/schema/bpmn"> <process id="Process_1" isExecutable
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn"> <process id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id="sample-diagram" targetNamespace
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
"http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd" id
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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/DD/20100524/DC" xmlns:omgdi="http://www.omg.org/spec/DD/20100524/DI" xsi:schemaLocation
'INSTANT VB WARNING: An assignment within expression was extracted from the following statement:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
If(`<, xml version="1.0" encoding=If("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
'INSTANT VB TODO TASK: The following line contains an assignment within expression that was not extracted by Instant VB:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
	Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
Private const canvas = createCanvas(800, 600)
Else
'INSTANT VB TODO TASK: The following line contains an assignment within expression that was not extracted by Instant VB:
'ORIGINAL LINE: Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
	Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private Private const bpmnXML = If(`<, xml version="1.0" encoding=If("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
End If
Private 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', () =>
If True Then
	console.log( 'BPMN diagram TryCast(saved, PNG'));
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'	PdfGenerator.imageToPdf(filePaths).@then((pdf) =>
'	{
'		pdf.saveAs('diagram.pdf');
'		console.log('PDF generated @and TryCast(saved, diagram.pdf'));
'	}
'INSTANT VB TODO TASK: Lambda expressions and anonymous methods are not converted by Instant VB if local variables of the outer method are referenced within the anonymous method:
	).catch(([error]) =>
End If
)
VB   C#

ステップ 4: スクリプトの実行

スクリプトを実行してBPMNダイアグラムを生成し、PDFとして保存します。

node generatePDF.js
node generatePDF.js
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'node generatePDF.js
VB   C#

BPMN JS npm（開発者向けの動作方法）：図3 - PDF出力

結論

bpmn-jsとIronPDFを統合することで、インタラクティブなBPMNダイアグラムを作成し、それをPDFドキュメントに変換できます。視覚的なプロセスモデリングの力と、PDF生成の多様性を組み合わせることができます。 この統合は、ドキュメント、レポート、またはプロセスのビジュアル表現が必要な他の形式を生成する際に特に役立ちます。 両方のライブラリは、豊富なドキュメントとサポートを提供しており、基本的な例をもとに始めたり拡張したりするのが簡単です。

IronPDFのライセンスに関する詳細は、IronPDFのライセンスをご参照ください。ページ. より多くの理解や追加リソースを得るために、詳細なチュートリアルをご覧ください。HTMLをPDFに変換.

< 以前
Moment.js（開発者にとっての動作方法）
次へ >
ボディパーサーノード（開発者向けの動作原理）

npmでインストール

バージョン:2024.11

> npm i @ironsoftware/ironpdf

問題を報告

準備はできましたか？ バージョン: 2024.11 新発売

無料のnpmインストール ライセンスを表示 >
無料トライアルを開始
Curved White Arrow related to BPMN JS npm（開発者向けの動作説明）

完全に機能する製品、キーを即座に取得