푸터 콘텐츠로 바로가기
  1. Node.js용 IronPDF
  2. Node.js용 IronPDF 블로그
  3. 노드 도움말
  4. BPMN JS npm
노드 도움말

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

커티스 차우
커티스 차우
업데이트됨:

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

  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
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로 변환하는 방법 에 대한 자세한 튜토리얼을 참조하세요.

커티스 차우
커티스 차우
  지금 바로 엔지니어링 팀과 채팅하세요
기술 문서 작성자

커티스 차우는 칼턴 대학교에서 컴퓨터 과학 학사 학위를 취득했으며, Node.js, TypeScript, JavaScript, React를 전문으로 하는 프론트엔드 개발자입니다. 직관적이고 미적으로 뛰어난 사용자 인터페이스를 만드는 데 열정을 가진 그는 최신 프레임워크를 활용하고, 잘 구성되고 시각적으로 매력적인 매뉴얼을 제작하는 것을 즐깁니다.

커티스는 개발 분야 외에도 사물 인터넷(IoT)에 깊은 관심을 가지고 있으며, 하드웨어와 소프트웨어를 통합하는 혁신적인 방법을 연구합니다. 여가 시간에는 게임을 즐기거나 디스코드 봇을 만들면서 기술에 대한 애정과 창의성을 결합합니다.

관련 기사

30일 무료 체험 → 모든 기능 이용 가능. 제한 없음. 카드 정보 필요 없음. 무료 체험 시작하기

아이언 서포트 팀

저희는 주 5일, 24시간 온라인으로 운영합니다.
채팅
이메일
전화해