AIDE NODE

BPMN JS npm (Comment ça marche pour les développeurs)

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

Mis à jour:juin 22, 2025

Le Business Process Model and Notation (BPMN) est une norme pour la modélisation des processus qui fournit une représentation graphique pour spécifier les processus métier dans un flux de travail. bpmn-js est une bibliothèque puissante qui vous permet d'intégrer des diagrammes d'éléments BPMN dans les applications web, offrant des capacités interactives et de vastes options de personnalisation. Développé par Camunda, bpmn-js est construit sur les technologies modernes de modélisation web et peut être intégré de manière transparente dans les applications JavaScript. Nous verrons également comment créer un PDF avec des éléments de diagramme BPMN en utilisant IronPDF.

Fonctionnalités clés de bpmn-js

Modélisation interactive : bpmn-js permet aux utilisateurs de créer des éléments BPMN, de modifier, et de visualiser des diagrammes de manière interactive. Son interface conviviale prend en charge la fonctionnalité de glisser-déposer, ce qui facilite la conception de flux de travail complexes.
Personnalisation : La bibliothèque est hautement personnalisable, permettant aux développeurs d'adapter l'apparence et la convivialité des diagrammes BPMN pour correspondre à la marque et aux exigences de leurs applications.
Extensibilité : bpmn-js est conçu avec l'extensibilité en tête. Les développeurs peuvent étendre les fonctionnalités de base en ajoutant des éléments, des propriétés et des comportements personnalisés au modèle d'interaction du diagramme BPMN.
Intégration : Il s'intègre bien avec d'autres bibliothèques et cadres, tels qu'Angular et React, facilitant son utilisation dans une large gamme d'applications web.
Conformité aux normes : bpmn-js adhère à la norme BPMN 2.0, garantissant que les diagrammes créés sont compatibles avec d'autres outils BPMN et systèmes de trousse à outils d'édition.

Commencer avec bpmn-js

Pour commencer avec bpmn-js, vous devrez configurer un projet web de base. Voici un guide étape par étape pour créer un diagramme simple en utilisant bpmn-js.

Étape 1 : Configurer le projet

Tout d'abord, créez un nouveau répertoire pour votre projet et initialisez un projet Node.js en utilisant les commandes suivantes :

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

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

SHELL

Étape 2 : Installer bpmn-js

Ensuite, installez la bibliothèque bpmn-js :

npm install bpmn-js

npm install bpmn-js

SHELL

Étape 3 : Créer la structure HTML

Créez un fichier index.html avec le contenu de code source suivant :

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

Étape 4 : Créer le fichier JavaScript

Créez un fichier app.js pour initialiser et rendre le diagramme 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 (Comment ça marche pour les développeurs) : Figure 1 - Sortie de rendu du diagramme BPMN

Étape 5 : Exécuter le projet

Pour servir le projet, vous pouvez utiliser un simple serveur statique comme http-server :

npm install -g http-server
http-server .

npm install -g http-server
http-server .

SHELL

Ouvrez votre navigateur et accédez à http://localhost:8080 pour voir le diagramme BPMN rendu sur la page.

Utilisation avancée de bpmn-js

Bien que l'exemple ci-dessus couvre les bases, bpmn-js offre des fonctionnalités plus avancées, telles que l'ajout d'éléments personnalisés, l'intégration avec des systèmes backend et l'exportation de diagrammes. Vous pouvez explorer ces fonctionnalités dans la documentation bpmn-js.

Présentation de IronPDF pour JavaScript

IronPDF est une bibliothèque puissante qui permet aux développeurs de générer, manipuler et convertir des documents PDF programmatique. Initialement conçu pour .NET, IronPDF a été étendu pour prendre en charge JavaScript, fournissant des capacités robustes de génération de PDF pour les applications web.

Fonctionnalités clés de IronPDF pour JavaScript

Génération de PDF : Créez des PDFs à partir de HTML, d'URL ou de contenu brut facilement.
Manipulation de PDF : Fusionnez, divisez et modifiez les documents PDF existants.
Conversion : Convertissez divers formats de documents (comme HTML et images) en PDF.
Personnalisation : Personnalisez l'apparence et la mise en page des PDFs avec de nombreuses options de style.

Intégration de IronPDF avec bpmn-js

Pour démontrer l'intégration de IronPDF avec bpmn-js, créons un projet Node.js qui génère un PDF à partir d'un diagramme BPMN.

Étape 1 : Configurer le projet

Créez un nouveau répertoire pour votre projet et initialisez-le :

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

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

SHELL

Étape 2 : Installer les dépendances

Installez IronPDF :

 npm i @ironsoftware/ironpdf

BPMN JS npm (Comment ça marche pour les développeurs) : Figure 2 - IronPDF

Étape 3 : Créer le diagramme BPMN et le script de génération de PDF

Créez un fichier nommé 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

Étape 4 : Exécuter le script

Exécutez le script pour générer le diagramme BPMN et l'enregistrer en tant que PDF :

node generatePDF.js

node generatePDF.js

SHELL

BPMN JS npm (Comment ça marche pour les développeurs) : Figure 3 - Sortie PDF

Conclusion

L'intégration de bpmn-js et IronPDF vous permet de créer des diagrammes interactifs BPMN et de les convertir en documents PDF, combinant la puissance de la modélisation de processus visuelle avec la polyvalence de la génération de PDF. Cette intégration peut être particulièrement utile pour générer de la documentation, des rapports ou tout autre format nécessitant une représentation visuelle des processus. Les deux bibliothèques offrent une documentation et un support étendus, facilitant le démarrage et l'expansion des exemples de base fournis.

Pour des détails complets sur la licence IronPDF, reportez-vous à la page de licence IronPDF. Pour avoir une meilleure compréhension ou des ressources supplémentaires, consultez notre tutoriel détaillé sur la conversion de HTML en PDF.

Darrius Serrant

Discutez maintenant avec l'équipe d'ingénierie

Ingénieur logiciel Full Stack (WebOps)

Darrius Serrant est titulaire d'un baccalauréat en informatique de l'université de Miami et travaille comme ingénieur marketing WebOps Full Stack chez Iron Software. Attiré par le codage dès son plus jeune âge, il a vu l'informatique comme à la fois mystérieuse et accessible, en faisant le ...