Ícone de mensagem
Ir para o conteúdo do rodapé
  1. IronPDF for Node.js
  2. Blog do IronPDF for Node.js
  3. Ajuda do Node
  4. BPMN JS npm
AJUDA DO NODE

BPMN JS npm (Como funciona para desenvolvedores)

Darrius Serrant
Darrius Serrant
Atualizado:

A Notação e Modelagem de Processos de Negócio (BPMN) é um padrão para modelagem de processos que fornece uma representação gráfica para especificar processos de negócios em um fluxo de trabalho. bpmn-js é uma biblioteca poderosa que permite incorporar diagramas de elementos BPMN em aplicações web, oferecendo recursos interativos e amplas opções de personalização. Desenvolvido pela Camunda, o bpmn-js é construído sobre tecnologias modernas de modelagem web e pode ser integrado perfeitamente em aplicações JavaScript . Veremos também como criar um PDF com elementos de diagrama BPMN usando o IronPDF .

Principais características do bpmn-js

  1. Modelagem interativa: o bpmn-js permite que os usuários criem elementos BPMN, modifiquem e visualizem diagramas de forma interativa. Sua interface amigável suporta a funcionalidade de arrastar e soltar, facilitando a criação de fluxos de trabalho complexos.

  2. Personalização: A biblioteca é altamente personalizável, permitindo que os desenvolvedores adaptem a aparência dos diagramas BPMN para corresponder à identidade visual e aos requisitos de seus aplicativos.

  3. Extensibilidade: o bpmn-js foi projetado com a extensibilidade em mente. Os desenvolvedores podem ampliar a funcionalidade principal adicionando elementos, propriedades e comportamentos personalizados ao modelo de interação do diagrama BPMN.

  4. Integração: Ele se integra bem com outras bibliotecas e frameworks, como Angular e React, facilitando seu uso em uma ampla gama de aplicações web.

  5. Conformidade com os padrões: o bpmn-js está em conformidade com o padrão BPMN 2.0, garantindo que os diagramas criados sejam compatíveis com outras ferramentas BPMN e sistemas de edição.

Primeiros passos com bpmn-js

Para começar a usar o bpmn-js, você precisará configurar um projeto web básico. Aqui está um guia passo a passo para criar um diagrama simples usando bpmn-js.

Etapa 1: Configurando o projeto

Primeiro, crie um novo diretório para o seu projeto e inicialize um projeto Node.js usando os seguintes comandos:

mkdir bpmn-js-demo
cd bpmn-js-demo
npm init -y
mkdir bpmn-js-demo
cd bpmn-js-demo
npm init -y
SHELL

Passo 2: Instalando o bpmn-js

Em seguida, instale a biblioteca bpmn-js:

npm install bpmn-js
npm install bpmn-js
SHELL

Etapa 3: Criando a estrutura HTML

Crie um arquivo index.html com o seguinte conteúdo de código-fonte:

<!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

Passo 4: Criando o arquivo JavaScript

Crie um arquivo app.js para inicializar e renderizar o diagrama 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
  }
});
// 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 (Como funciona para desenvolvedores): Figura 1 - Saída de renderização do diagrama BPMN

Etapa 5: Executando o projeto

Para hospedar o projeto, você pode usar um servidor estático simples como o http-server:

npm install -g http-server
http-server .
npm install -g http-server
http-server .
SHELL

Abra seu navegador e acesse http://localhost:8080 para visualizar o diagrama BPMN na página.

Uso avançado do bpmn-js

Embora o exemplo acima aborde os conceitos básicos, o bpmn-js oferece recursos mais avançados, como a adição de elementos personalizados, a integração com sistemas de back-end e a exportação de diagramas. Você pode explorar esses recursos na documentação do bpmn-js .

Apresentando o IronPDF for JavaScript

IronPDF é uma biblioteca poderosa que permite aos desenvolvedores gerar, manipular e converter documentos PDF programaticamente. Originalmente desenvolvido for .NET, o IronPDF foi ampliado para oferecer suporte a JavaScript, proporcionando recursos robustos de geração de PDFs para aplicações web.

Principais funcionalidades do IronPDF for JavaScript

  1. Geração de PDFs: Crie PDFs a partir de HTML, URLs ou conteúdo bruto com facilidade.

  2. Manipulação de PDF: Mesclar, dividir e modificar documentos PDF existentes.

  3. Conversão: Converta vários formatos de documentos (como HTML e imagens) para PDF.

  4. Personalização: Personalize a aparência e o layout dos PDFs com diversas opções de estilo.

Integrando o IronPDF com o bpmn-js

Para demonstrar a integração do IronPDF com o bpmn-js, vamos criar um projeto Node.js que gera um PDF a partir de um diagrama BPMN.

Etapa 1: Configurando o projeto

Crie um novo diretório para o seu projeto e inicialize-o:

mkdir bpmn-ironpdf-demo
cd bpmn-ironpdf-demo
npm init -y
mkdir bpmn-ironpdf-demo
cd bpmn-ironpdf-demo
npm init -y
SHELL

Etapa 2: Instalar as dependências

Instale o IronPDF:

 npm e @ironsoftware/ironpdf

BPMN JS npm (Como funciona para desenvolvedores): Figura 2 - IronPDF

Etapa 3: Criação do diagrama BPMN e do script de geração de PDF

Crie um arquivo chamado 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

Etapa 4: Executando o script

Execute o script para gerar o diagrama BPMN e salve-o como um arquivo PDF:

node generatePDF.js
node generatePDF.js
SHELL

BPMN JS npm (Como funciona para desenvolvedores): Figura 3 - Saída em PDF

Conclusão

A integração do bpmn-js com o IronPDF permite criar diagramas BPMN interativos e convertê-los em documentos PDF, combinando o poder da modelagem visual de processos com a versatilidade da geração de PDFs. Essa integração pode ser particularmente útil para gerar documentação, relatórios ou qualquer outro formato em que seja necessária uma representação visual dos processos. Ambas as bibliotecas oferecem ampla documentação e suporte, facilitando o início e a expansão dos exemplos básicos fornecidos.

Para obter detalhes completos sobre o licenciamento do IronPDF , consulte a página de licença do IronPDF . Para obter mais informações ou recursos adicionais, consulte nosso tutorial detalhado sobre conversão de HTML para PDF .

Darrius Serrant
Darrius Serrant
  Converse agora mesmo com a equipe de engenharia.
Engenheiro de Software Full Stack (WebOps)

Darrius Serrant é bacharel em Ciência da Computação pela Universidade de Miami e trabalha como Engenheiro de Marketing WebOps Full Stack na Iron Software. Atraído por programação desde jovem, ele via a computação como algo misterioso e acessível ao mesmo tempo, tornando-a o meio ...

Leia mais

Artigos relacionados

Teste grátis por 30 dias → Produto completo. Sem limites. Sem cartão. Comece seu teste gratuito

Equipe de suporte de ferro

Estamos online 24 horas por dia, 5 dias por semana.
Bater papo
E-mail
Liga para mim