Saltar al pie de página
  1. IronPDF for Node.js
  2. Blog de IronPDF for Node.js
  3. Ayuda de Node
  4. BPMN JS npm
AYUDA DE NODE

BPMN JS npm (Cómo funciona para desarrolladores)

Darrius Serrant
Darrius Serrant
Actualizado:

El Modelo y Notación de Procesos de Negocio (BPMN) es un estándar para el modelado de procesos que proporciona una representación gráfica para especificar procesos de negocio en un flujo de trabajo. bpmn-js es una potente biblioteca que permite incrustar diagramas de elementos BPMN en aplicaciones web, proporcionando capacidades interactivas y extensas opciones de personalización. Desarrollado por Camunda, bpmn-js está construido sobre tecnologías modernas de modelado web y se puede integrar sin problemas en aplicaciones JavaScript. También veremos cómo crear un PDF con elementos de diagrama BPMN utilizando IronPDF.

Características principales de bpmn-js

  1. Modelado Interactivo: bpmn-js permite a los usuarios crear elementos BPMN, y modificar y ver diagramas de forma interactiva. Su interfaz fácil de usar admite la funcionalidad de arrastrar y soltar, lo que facilita el diseño de flujos de trabajo complejos.

  2. Personalización: La biblioteca es altamente personalizable, permitiendo a los desarrolladores adaptar la apariencia de los diagramas BPMN para que coincidan con la marca y los requisitos de sus aplicaciones.

  3. Extensibilidad: bpmn-js está diseñado con la extensibilidad en mente. Los desarrolladores pueden extender la funcionalidad central añadiendo elementos, propiedades y comportamientos personalizados al modelo de interacción del diagrama BPMN.

  4. Integración: Se integra bien con otras bibliotecas y frameworks, como Angular y React, facilitando su uso en una amplia gama de aplicaciones web.

  5. Cumplimiento de Estándares: bpmn-js se adhiere al estándar BPMN 2.0, asegurando que los diagramas creados sean compatibles con otras herramientas y sistemas de edición de BPMN.

Cómo empezar con bpmn-js

Para comenzar a usar bpmn-js, necesitarás configurar un proyecto web básico. Aquí tienes una guía paso a paso para crear un diagrama simple usando bpmn-js.

Paso 1: Configuración del proyecto

Primero, crea un nuevo directorio para tu proyecto e inicializa un proyecto Node.js usando los siguientes comandos:

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

Paso 2: Instalación de bpmn-js

A continuación, instala la biblioteca bpmn-js:

npm install bpmn-js
npm install bpmn-js
SHELL

Paso 3: Creación de la estructura HTML

Crea un archivo index.html con el siguiente contenido de código fuente:

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

Paso 4: Creación del archivo JavaScript

Crea un archivo app.js para inicializar y renderizar el 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 (Cómo Funciona Para Desarrolladores): Figura 1 - Salida del Renderizado del Diagrama BPMN

Paso 5: Ejecutar el proyecto

Para servir el proyecto, puedes usar un servidor estático simple como http-server:

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

Abre tu navegador y navega a http://localhost:8080 para ver el diagrama BPMN renderizado en la página.

Uso avanzado de bpmn-js

Aunque el ejemplo anterior cubre lo básico, bpmn-js ofrece características más avanzadas, como añadir elementos personalizados, integrar con sistemas backend y exportar diagramas. Puedes explorar estas características en la documentación de bpmn-js.

Presentación de IronPDF para JavaScript

IronPDF es una potente biblioteca que permite a los desarrolladores generar, manipular y convertir documentos PDF de manera programática. Diseñado originalmente para .NET, IronPDF se ha extendido para soportar JavaScript, proporcionando capacidades robustas de generación de PDF para aplicaciones web.

Características principales de IronPDF para JavaScript

  1. Generación de PDF: Crear PDFs a partir de HTML, URLs o contenido bruto con facilidad.

  2. Manipulación de PDF: Unir, dividir y modificar documentos PDF existentes.

  3. Conversión: Convertir varios formatos de documento (como HTML e imágenes) a PDF.

  4. Personalización: Personalizar la apariencia y el diseño de los PDFs con amplias opciones de estilo.

Integración de IronPDF con bpmn-js

Para demostrar la integración de IronPDF con bpmn-js, vamos a crear un proyecto Node.js que genere un PDF a partir de un diagrama BPMN.

Paso 1: Configuración del proyecto

Crea un nuevo directorio para tu proyecto e inicialízalo:

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

Paso 2: Instalación de dependencias

Instalar IronPDF:

 npm i @ironsoftware/ironpdf

BPMN JS NPM (Cómo Funciona Para Desarrolladores): Figura 2 - IronPDF

Paso 3: Creación del diagrama BPMN y del script de generación de PDF

Crea un archivo llamado 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

Paso 4: Ejecutar el script

Ejecuta el script para generar el diagrama BPMN y guardarlo como un PDF:

node generatePDF.js
node generatePDF.js
SHELL

BPMN JS NPM (Cómo Funciona Para Desarrolladores): Figura 3 - Salida PDF

Conclusión

Integrar bpmn-js e IronPDF te permite crear diagramas BPMN interactivos y convertirlos en documentos PDF, combinando el poder del modelado visual de procesos con la versatilidad de la generación de PDF. Esta integración puede ser particularmente útil para generar documentación, informes o cualquier otro formato donde se requiera una representación visual de procesos. Ambas bibliotecas ofrecen documentación y soporte extensos, facilitando comenzar y ampliar los ejemplos básicos proporcionados.

Para detalles completos sobre el licenciamiento de IronPDF, consulta la página de licencia de IronPDF. Para obtener más comprensión o recursos adicionales, consulta nuestro tutorial detallado sobre Conversión de HTML a PDF.

Darrius Serrant
Darrius Serrant
  Chatea con el equipo de ingeniería ahora
Ingeniero de Software Full Stack (WebOps)

Darrius Serrant tiene una licenciatura en Ciencias de la Computación de la Universidad de Miami y trabaja como Ingeniero de Marketing WebOps Full Stack en Iron Software. Atraído por la programación desde joven, vio la computación como algo misterioso y accesible, convirtiéndolo en el ...

Leer más

Artículos Relacionados

Prueba de 30 días → Producto completo. Sin límites. Sin tarjeta. Comenzar prueba gratuita