노드 도움말

BPMN JS npm (개발자를 위한 작동 방식)

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

업데이트됨:1월 18, 2026

비즈니스 프로세스 모델 및 표기법(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

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 파일 생성

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
  }
});

// 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 문서 에서 이러한 기능들을 살펴볼 수 있습니다.

JavaScript 용 IronPDF 소개합니다

IronPDF 는 개발자가 PDF 문서를 프로그래밍 방식으로 생성, 조작 및 변환할 수 있도록 해주는 강력한 라이브러리입니다. 원래 .NET 용으로 설계된 IronPDF JavaScript 지원하도록 확장되어 웹 애플리케이션에 강력한 PDF 생성 기능을 제공합니다.

JavaScript 용 IronPDF 의 주요 기능

PDF 생성: HTML, URL 또는 원본 콘텐츠에서 PDF를 간편하게 생성할 수 있습니다.
PDF 조작: 기존 PDF 문서를 병합, 분할 및 수정합니다.
변환: 다양한 문서 형식(HTML 및 이미지 등)을 PDF로 변환합니다.
사용자 정의: 다양한 스타일링 옵션을 사용하여 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과 @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로 변환하는 방법 에 대한 자세한 튜토리얼을 참조하세요.

다리우스 세란트

지금 바로 엔지니어링 팀과 채팅하세요

풀스택 소프트웨어 엔지니어 (웹 운영)

다리우스 세런트는 마이애미 대학교에서 컴퓨터 과학 학사 학위를 받았으며, Iron Software에서 풀 스택 웹 운영 마케팅 엔지니어로 근무하고 있습니다. 어린 시절부터 코딩에 매료되었던 그는 컴퓨팅이 신비로우면서도 접근하기 쉬운 분야라고 생각했고, 창의력과 문제 해결 능력을 발휘하기에 완벽한 매체라고 여겼습니다.

Iron Software에서 다리우스는 새로운 것을 만들고 복잡한 개념을 단순화하여 더 쉽게 이해할 수 있도록 하는 것을 즐깁니다. 그는 사내 개발자로서 학생들을 가르치는 데에도 자원하여 차세대 인재들과 전문 지식을 공유하고 있습니다.

다리우스에게 있어 그의 일은 가치 있고 실질적인 영향을 미치기 때문에 보람 있는 일입니다.