1. IronPDF for Node.js
  2. Blog de IronPDF for Node.js
  3. Ayuda para nodos
  4. BPMN JS npm
AYUDA PARA NODOS

BPMN JS npm (Cómo Funciona Para Desarrolladores)

Publicado en 29 de septiembre, 2024
Compartir:

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 biblioteca poderosa que te permite integrar diagramas de elementos BPMN en aplicaciones web, proporcionando capacidades interactivas y amplias opciones de personalización. Desarrollado por Camunda,bpmn-jsestá construido sobre tecnologías modernas de modelado web y puede integrarse perfectamente en aplicaciones JavaScript. También veremos cómo crear un PDF con elementos de diagrama BPMN utilizandoIronPDF.

Características clave de bpmn-js

  1. Modelado interactivo: bpmn-js permite a los usuarios crear elementos BPMN, modificar y ver diagramas de manera 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, lo que permite a los desarrolladores adaptar la apariencia y el diseño de los diagramas BPMN para que coincidan con la marca y los requisitos de sus aplicaciones.

  3. Extensibilidad: bpmn-js está diseñado teniendo en cuenta la extensibilidad. Los desarrolladores pueden ampliar la funcionalidad principal añadiendo elementos personalizados, propiedades y comportamientos 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 BPMN y sistemas de edición de conjuntos de herramientas.

Comenzando con bpmn-js

Para comenzar con 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: Configurar el proyecto

Primero, crea un nuevo directorio para tu proyecto e inicializa un proyecto de 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
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'mkdir bpmn-js-demo cd bpmn-js-demo npm init -y
VB   C#

Paso 2: Instalar bpmn-js

A continuación, instala la biblioteca 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#

Paso 3: Crear la estructura HTML

Cree 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>
#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#

Paso 4: Crear el archivo JavaScript

Crea un archivo app.js para inicializar y renderizar el diagrama 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(Cómo funciona para desarrolladores): Figura 1 - Salida de renderización del diagrama BPMN

Paso 5: Ejecución del proyecto

Para servir el proyecto, puedes utilizar un servidor estático simple como 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#

Abra su navegador y vaya 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 la adición de elementos personalizados, la integración con sistemas de backend y la exportación de diagramas. Puedes explorar estas características en el documentación de bpmn-js.

Presentamos IronPDF for JavaScript

IronPDF es una potente biblioteca que permite a los desarrolladores generar, manipular y convertir documentos PDF de forma programática. Originalmente diseñado para .NET, IronPDF se ha ampliado para soportar JavaScript, ofreciendo capacidades sólidas de generación de PDF para aplicaciones web.

Características clave de IronPDF for JavaScript

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

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

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

  4. Personalización: Personaliza la apariencia y el diseño de 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 de Node.js que genere un PDF a partir de un diagrama BPMN.

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

Paso 2: Instalación de dependencias

Instalar 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(Cómo Funciona Para Desarrolladores): Figura 2 - IronPDF

Paso 3: Crear el Diagrama BPMN y el Script de Generación de PDF

Cree 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>`;
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#

Paso 4: Ejecutar el script

Ejecute el script para generar el diagrama BPMN y guárdelo como un 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(Cómo funciona para desarrolladores): Figura 3 - Salida en PDF

Conclusión

La integración de bpmn-js e IronPDF te permite crear diagramas BPMN interactivos y convertirlos en documentos PDF, combinando el poder del modelado de procesos visuales 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 los procesos. Ambas bibliotecas ofrecen documentación y soporte extensos, lo que facilita comenzar y expandirse a partir de los ejemplos básicos proporcionados.

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

< ANTERIOR
Moment.js (Cómo Funciona para Desarrolladores)
SIGUIENTE >
análisis del cuerpo node (Cómo Funciona para Desarrolladores)

Instalar con npm

Versión:2024.11

> npm i @ironsoftware/ironpdf

Informar un Problema

¿Listo para empezar? Versión: 2024.11 acaba de salir

Instalación gratuita de npm Ver licencias >